uniapp 原生视频

uniapp 原生视频组件

在 uniapp 中，原生视频播放通常使用 <video> 组件或通过原生插件实现。以下是两种主要方法：

使用 <video> 组件

uniapp 内置的 <video> 组件支持跨平台视频播放，基本用法如下：

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

关键属性说明

• src: 视频资源地址（支持网络链接或本地路径）
• controls: 是否显示默认播放控件
• autoplay: 是否自动播放（部分平台可能限制）
• loop: 是否循环播放
• muted: 是否静音播放（部分平台要求静音才能自动播放）

平台差异注意事项

• iOS 限制自动播放需用户交互触发
• 微信小程序要求域名加入合法名单
• Android 可能需处理全屏适配问题

原生插件扩展功能

对于需要更复杂功能（如直播、自定义控件等），可通过原生插件实现：

Android 原生集成

1. 创建原生模块继承 UniModule
2. 实现 SurfaceView 或 ExoPlayer 集成
3. 通过 uni.requireNativePlugin 调用

iOS 原生集成

1. 创建 UIView 子类封装 AVPlayer
2. 导出方法到 uni 环境
3. 使用 uni.requireNativePlugin 加载

性能优化建议

• 使用 HLS 格式适配多分辨率
• 预加载视频资源减少延迟
• 列表视频采用懒加载
• 适当降低非活跃标签页的播放质量

常见问题处理

全屏适配问题 通过监听 fullscreenchange 事件处理横竖屏切换：

videoContext.on('fullscreenchange', (res) => {
  console.log(res.fullScreen);
});

缓存策略 App端可通过<video>的cache属性控制缓存，小程序端需自行实现下载缓存机制。

直播流支持 RTMP 协议需各平台单独适配，推荐使用 FLV/HLS 格式：

<video src="http://example.com/live.m3u8" live></video>