uniapp视频

uniapp视频开发基础

uniapp支持通过video组件实现视频播放功能，该组件兼容多端（H5、小程序、App等），基本用法如下：

<template>
  <video 
    src="/static/video.mp4" 
    controls 
    autoplay 
    style="width: 100%;"
  ></video>
</template>

关键属性说明：

• src：视频资源地址（支持本地路径或网络URL）
• controls：是否显示默认控件（播放/暂停按钮等）
• autoplay：是否自动播放（部分平台需用户交互后生效）

自定义视频控件

通过绑定事件和状态可实现自定义控件：

<template>
  <video 
    ref="videoRef" 
    :src="videoUrl" 
    @play="onPlay" 
    @pause="onPause"
  ></video>
  <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: 'https://example.com/video.mp4',
      isPlaying: false
    }
  },
  methods: {
    togglePlay() {
      const video = this.$refs.videoRef
      this.isPlaying ? video.pause() : video.play()
    },
    onPlay() { this.isPlaying = true },
    onPause() { this.isPlaying = false }
  }
}
</script>

多端兼容注意事项

1. 自动播放限制：

   • iOS微信小程序禁止自动播放
   • 部分安卓设备需用户触摸事件后触发播放

2. 视频格式差异：

   

   • H5端支持MP4/WebM等通用格式
   • 微信小程序推荐使用MP4格式

3. 全屏处理：

   • App端可通过x5-video-player-fullscreen属性启用强制全屏
   • 小程序需使用官方API uni.createVideoContext控制全屏

视频封面与加载优化

通过poster属性设置封面图，提升用户体验：

<video 
  src="https://example.com/video.mp4" 
  poster="/static/cover.jpg"
></video>

性能优化建议：

• 大视频文件建议使用分片加载或CDN加速
• 长视频可考虑使用uni.downloadFile提前缓存

高级功能实现

视频弹幕功能示例：

// 通过Canvas叠加弹幕
const ctx = uni.createCanvasContext('danmuCanvas')
ctx.setFillStyle('rgba(255,0,0,0.7)')
ctx.fillText('弹幕内容', x, y)
ctx.draw()

视频录制方案：

• App端可使用plus.camera或原生插件
• 微信小程序需使用wx.chooseMedia API

常见问题解决

视频无法播放排查步骤：

1. 检查控制台是否有跨域错误（H5端）
2. 验证视频格式是否被当前平台支持
3. 真机调试确认是否存在权限问题

全屏兼容性处理：

// 强制横屏示例
uni.setScreenOrientation({
  orientation: 'landscape'
})