更新记录

1.0.0（2025-10-08） 下载此版本

✨ 新特性

平台兼容性

uni-app(4.0)

uni-app x(4.01)

其他

MC直播播放器 - 全平台直播组件

📖 简介

mc-live-player 是一个功能强大的 uniapp 直播播放器组件，支持多种直播协议和全平台运行。

✨ 特性

• 🎯 多协议支持：HLS (.m3u8)、FLV (.flv)、RTMP、MP4 等
• 📱 全平台兼容：H5、微信小程序、支付宝小程序、App 等
• 🎨 自定义控制栏：播放/暂停、全屏、音量、清晰度切换
• 🔄 智能播放策略：自动保持播放状态，智能切换流
• 🚀 性能优化：HLS 缓冲优化、FLV 错误恢复、自动重试
• 💡 易于使用：简单的 API，丰富的事件回调

🎬 支持的流格式

📦 安装

方式 1：插件市场导入

1. 访问 DCloud 插件市场
2. 搜索 "mc-live-player"
3. 点击 "使用 HBuilderX 导入插件"

方式 2：手动导入

将 uni_modules/mc-live-player 目录复制到项目的 uni_modules 目录下。

🚀 快速开始

基本使用

<template>
  <view>
    <mc-live-player
      src="https://example.com/live.m3u8"
      height="500rpx"
      :autoplay="true"
      :show-custom-controls="true"
    />
  </view>
</template>

<script>
export default {
  // 无需手动引入，uni_modules 会自动注册
}
</script>

多清晰度支持

<template>
  <view>
    <mc-live-player
      :src="qualityList"
      height="500rpx"
      :autoplay="true"
      :show-custom-controls="true"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      qualityList: [
        { name: '超清', url: 'https://example.com/hd.m3u8' },
        { name: '高清', url: 'https://example.com/sd.m3u8' },
        { name: '流畅', url: 'https://example.com/ld.m3u8' }
      ]
    }
  }
}
</script>

动态切换流

<template>
  <view>
    <mc-live-player
      :src="currentSrc"
      height="500rpx"
      :autoplay="false"
      @play="handlePlay"
      @error="handleError"
    />

    <button @click="switchStream">切换流</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentSrc: 'https://example.com/stream1.m3u8'
    }
  },
  methods: {
    switchStream() {
      // 直接修改 src，播放器会自动重新加载
      // 如果正在播放，会自动播放新流
      this.currentSrc = 'https://example.com/stream2.m3u8'
    },
    handlePlay() {
      console.log('开始播放')
    },
    handleError(e) {
      console.error('播放错误', e)
    }
  }
}
</script>

📋 API 文档

Props 属性

Events 事件

Methods 方法

通过 ref 调用组件方法：

<mc-live-player ref="player" :src="src" />

<script>
export default {
  methods: {
    play() {
      this.$refs.player.togglePlay() // 播放/暂停
    },
    enterFullscreen() {
      this.$refs.player.enterFullscreen() // 进入全屏
    },
    exitFullscreen() {
      this.$refs.player.exitFullscreen() // 退出全屏
    },
    retry() {
      this.$refs.player.retry() // 重试
    }
  }
}
</script>

🎯 智能播放策略

组件支持智能播放策略，当切换流（修改 src）时：

• autoplay = true：总是自动播放新流
• autoplay = false：
  • 如果当前正在播放 → 自动播放新流（保持播放状态）
  • 如果当前未播放 → 不自动播放（需要手动点击）

这样可以提供更好的用户体验，避免意外播放。

⚙️ 配置说明

组件内置了优化的播放器配置，如需自定义，可以修改 config.js：

// uni_modules/mc-live-player/config.js
export default {
  // CDN 地址
  flvJsUrl: 'https://cdn.jsdelivr.net/npm/flv.js@latest/dist/flv.min.js',
  hlsJsUrl: 'https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js',

  // 播放器配置
  player: {
    flv: {
      // FLV 配置
    },
    hls: {
      // HLS 配置
    }
  }
}

🔧 常见问题

1. H5 端无法播放

原因：浏览器自动播放限制

解决方案：

• 设置 autoplay="false"，让用户手动点击播放
• 或设置 muted="true"，静音后可以自动播放

2. FLV 流无法播放

原因：可能是 CORS 跨域问题或流不存在

解决方案：

• 检查流 URL 是否正确
• 确认服务器已配置 CORS
• 查看浏览器控制台的错误信息

3. 小程序端无法播放

原因：域名未配置白名单

解决方案：

• 在小程序后台配置直播流域名白名单
• 路径：开发 → 开发设置 → 服务器域名

4. 切换流后不播放

原因：autoplay 设置问题

解决方案：

• 如果希望切换后自动播放，设置 autoplay="true"
• 或者在切换前确保播放器处于播放状态

📚 更多文档

• 详细使用文档
• API 参考
• 常见问题
• 更新日志

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可

MIT License

💬 联系方式

如有问题或建议，欢迎通过以下方式联系：

• Issue: GitHub Issues
• Email: your-email@example.com

如果这个组件对你有帮助，请给个⭐️支持一下！