uniapp视频

uniapp 视频功能实现

在 uniapp 中实现视频功能可以通过内置组件或第三方插件完成，适用于多端开发（H5、小程序、App等）。

使用 <video> 组件 uniapp 提供了 <video> 组件，支持基础视频播放功能：

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

属性说明：

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

视频全屏与自定义控件 通过 @fullscreenchange 事件监听全屏状态，结合 requestFullScreen 方法实现控制：

methods: {
  toggleFullScreen() {
    this.$refs.video.requestFullScreen({ direction: 90 });
  }
}

多端兼容注意事项

平台差异处理

• 微信小程序：需配置 download 域名白名单
• App端：Android 可能需调整硬件加速，iOS 需注意自动播放策略
• H5：部分浏览器限制自动播放，需添加 muted 属性

性能优化建议

• 使用 poster 属性设置视频封面
• 长视频建议分段加载（如 HLS 格式）
• 避免同时加载多个视频

高级功能实现

视频录制 通过 uni.chooseVideo 调用设备相机：

uni.chooseVideo({
  sourceType: ['camera'],
  success(res) {
    console.log(res.tempFilePath);
  }
});

直播流播放 使用 <live-player> 组件支持 RTMP/FLV 等协议：

<live-player src="rtmp://example.com/live/stream" mode="live"></live-player>

插件扩展

• ijkplayer 插件：增强格式兼容性
• 腾讯云播放器 SDK：实现 DRM 加密播放
• 七牛云插件：集成存储与 CDN 加速

常见问题解决方案

视频卡顿处理

• 检查编码格式（推荐 H.264）
• 降低分辨率（720p 以下更适合移动端）
• 启用预加载（preload="auto"）

兼容性报错排查

• iOS 上 playsinline 属性确保内联播放
• Android 添加 hardwareAccelerated="true" 声明
• H5 使用跨域头 Access-Control-Allow-Origin

以上方案可根据具体项目需求组合使用，测试时需覆盖目标平台真机环境。