uniapp视频
uniapp视频开发指南
uniapp支持多种视频播放方式，包括内置组件、第三方插件和原生能力调用。以下为常用实现方法：
内置video组件
使用uniapp内置的<video>组件可快速实现基础视频播放功能：
<video
src="https://example.com/video.mp4"
controls
autoplay
style="width: 100%">
</video>支持属性包括：
poster：封面图地址loop：循环播放muted：静音播放objectFit：填充模式（cover/contain）
全屏API控制
通过createVideoContext获取实例后控制播放：
const videoContext = uni.createVideoContext('myVideo')
// 暂停/播放控制
videoContext.pause()
videoContext.play()
// 跳转到指定位置
videoContext.seek(120)直播流支持
使用live-player组件实现RTMP/FLV直播：
<live-player
src="rtmp://example.com/live/stream"
mode="live"
autoplay>
</live-player>自定义播放器
通过结合<video>与CSS实现UI定制：
- 隐藏原生controls
- 自定义控制栏布局
- 使用绝对定位叠加按钮
- 通过事件绑定实现交互逻辑
插件市场扩展
在uni插件市场可获取：
- 腾讯云播放器插件
- 阿里云视频点播SDK
- 美颜滤镜插件
- 弹幕功能组件
注意事项
- iOS平台需配置
playsinline属性实现内联播放 - Android部分机型需开启硬件加速
- 微信小程序域名需加入合法名单
- H5端注意跨域问题
性能优化方案
预加载策略
使用uni.preloadVideo提前加载视频资源：
uni.preloadVideo({
src: 'video.mp4',
success: () => console.log('预加载完成')
})分片加载
大视频文件可采用HTTP范围请求：
<video src="video.mp4#t=0,60"></video>解码优化
- H.264编码兼容性最佳
- 分辨率适配设备尺寸
- 关键帧间隔建议2秒
常见问题处理
黑屏问题排查
- 检查视频格式（MP4/H.264编码）
- 验证文件完整性
- 测试不同网络环境
- 查看控制台错误日志
自动播放限制
解决方案：
- 用户交互后触发播放
- 微信小程序需配置
autoplay属性 - iOS Safari需添加
playsinline属性
跨平台差异
统一处理方案：
// #ifdef MP-WEIXIN
wx.loadVideo({...})
// #endif
// #ifdef H5
const video = document.getElementById('video')
// #endif以上方法可根据具体需求组合使用，建议通过真机测试验证各平台表现。
