uniapp视频播放器插件如何使用

在 UniApp 中使用视频播放器插件，通常推荐使用官方提供的 <video> 组件或第三方插件（如 uni-media）。以下是详细步骤和代码示例：

1. 使用官方 <video> 组件

• 直接在页面中嵌入 <video> 标签，支持基础播放功能。
• 示例代码：

  <template>
    <view>
      <video 
        src="https://example.com/sample.mp4" 
        controls 
        autoplay 
        style="width: 100%;"
      ></video>
    </view>
  </template>
  

  • 属性说明：
    • src：视频资源地址（支持网络链接或本地路径）。
    • controls：显示默认播放控件。
    • autoplay：自动播放（部分平台需用户交互触发）。

2. 使用第三方插件（如 uni-media）

• 安装插件：
  • 在 HBuilderX 中通过“插件市场”搜索 “uni-media”，导入项目。
• 示例代码：

  <template>
    <view>
      <uni-media 
        src="/static/sample.mp4" 
        :controls="true"
        @play="onPlay"
      />
    </view>
  </template>
  
  <script>
  export default {
    methods: {
      onPlay() {
        console.log('视频开始播放');
      }
    }
  }
  </script>
  

3. 注意事项

• 平台差异：Android 和 iOS 对自动播放、全屏等支持可能不同，需测试兼容性。
• 路径问题：本地视频建议放在 static 目录，引用时使用绝对路径（如 /static/video.mp4）。
• 功能扩展：如需弹幕、倍速播放等高级功能，可选用功能更丰富的第三方插件。

4. 常见问题

• 自动播放失败：部分浏览器要求用户交互（如点击）后才能自动播放。
• 全屏适配：可通过 fullscreen 属性控制，但不同平台表现可能不一致。

通过以上方法，可快速实现视频播放功能。根据需求选择合适方案，并注意测试多端兼容性。