uniapp 原生视频

在UniApp中使用原生视频组件

UniApp提供了video组件用于嵌入原生视频播放功能，支持跨平台运行（H5、小程序、App）。该组件基于各平台原生能力实现，性能较好。

基本用法示例：

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

核心属性说明

• src: 视频资源地址（支持网络URL和本地路径）
• controls: 是否显示默认控件（播放/暂停按钮等）
• autoplay: 是否自动播放（注意部分平台限制自动播放）
• loop: 是否循环播放
• muted: 是否静音播放
• poster: 视频封面图URL
• object-fit: 视频填充模式（contain/fill/cover）

平台差异注意事项

自动播放限制：

• iOS微信小程序：需用户交互触发播放
• Android微信小程序：允许autoplay但需设置muted
• H5：多数浏览器限制自动播放需配合muted

全屏处理：

• App端默认全屏播放
• 小程序端需通过fullscreen属性控制
• H5端依赖浏览器实现

自定义控制条实现

通过监听事件和API可实现自定义控制：

<video 
  ref="videoRef"
  @play="onPlay"
  @pause="onPause"
  @timeupdate="onTimeUpdate"
></video>

<script>
export default {
  methods: {
    onPlay() {
      console.log('视频开始播放')
    },
    togglePlay() {
      this.$refs.videoRef.play()
    }
  }
}
</script>

常用API方法

• play(): 播放视频
• pause(): 暂停视频
• seek(time): 跳转到指定位置
• stop(): 停止播放
• requestFullScreen(): 进入全屏
• exitFullScreen(): 退出全屏

性能优化建议

• 使用合适的视频格式：MP4在多数平台兼容性最好
• 控制视频分辨率：移动端720p通常足够
• 实现预加载：通过preload属性设置
• 使用poster减少加载等待感知
• 考虑使用lazy-load懒加载非首屏视频

高级功能实现

视频下载管理： App端可通过plus.downloader实现下载功能：

const task = plus.downloader.createDownload(url, {}, (d, status) => {
  if (status === 200) {
    console.log('下载完成:', d.filename)
  }
})
task.start()

画中画模式： 部分平台支持画中画功能，需检测API可用性：

if(videoElement.requestPictureInPicture) {
  videoElement.requestPictureInPicture()
}

多分辨率切换： 可通过动态修改src实现清晰度切换：

changeQuality(url) {
  this.videoSrc = url
  this.$refs.videoRef.play()
}

常见问题解决

视频无法播放：

• 检查格式兼容性（MP4/H.264最通用）
• 确认服务器支持Range请求（流式播放必需）
• 测试直接访问视频URL是否有效

全屏显示异常：

• 小程序端需配置navigationStyle: custom
• App端注意manifest.json的fullscreen配置
• H5端检查CSS是否限制视频元素尺寸

播放卡顿处理：

• 降低视频码率或分辨率
• 使用CDN加速视频分发
• 实现缓冲提示UI（监听waiting事件）