uniapp 微信小程序视频播放器如何实现

在uniapp开发微信小程序时，如何实现一个视频播放器？我尝试使用video组件，但遇到全屏控制、自动播放和自定义UI的问题。有没有完整的示例代码或解决方案可以参考？具体需求包括横竖屏切换、进度条控制和视频封面设置。

2 回复

使用uni.createVideoContext创建视频实例，通过ID控制播放。支持全屏、暂停、进度控制等。可自定义封面和控件样式。


在 UniApp 中实现微信小程序视频播放器，可以使用 <video> 组件。以下是基本实现方法和代码示例：

基本实现

  1. 添加 <video> 组件：

    <template>
  <view>
    <video 
      :src="videoSrc" 
      controls 
      autoplay 
      style="width: 100%;"
      @play="onPlay"
      @pause="onPause"
    ></video>
  </view>
</template>

  2. 配置数据和方法：

    export default {
  data() {
    return {
      videoSrc: 'https://example.com/sample.mp4' // 视频链接
    }
  },
  methods: {
    onPlay() {
      console.log('视频开始播放')
    },
    onPause() {
      console.log('视频暂停')
    }
  }
}

关键属性说明

  • src：视频资源地址，支持网络链接或本地路径。
  • controls：显示默认播放控件（播放/暂停、进度条等）。
  • autoplay：是否自动播放（注意微信小程序限制，通常需用户交互触发）。
  • poster：设置视频封面图。

注意事项

  1. 自动播放限制：微信小程序要求必须有用户交互（如点击）才能自动播放，可通过按钮触发：

    <video ref="videoPlayer" :src="videoSrc"></video>
<button [@tap](/user/tap)="playVideo">播放</button>

    methods: {
  playVideo() {
    this.$refs.videoPlayer.play()
  }
}

  2. 视频格式：建议使用 MP4 格式，兼容性较好。

  3. 全屏处理：默认支持全屏播放，可通过 direction 属性控制全屏方向。

高级功能

如需自定义控件，可结合 VideoContext API 控制播放：

const videoContext = uni.createVideoContext('myVideo') // 需设置视频id
videoContext.play()  // 播放
videoContext.pause() // 暂停

此方法简单高效，适用于大多数视频播放场景。

回到顶部