uni-app h5端video组件安卓浏览器播放黑屏；苹果safari无法调用requestFullScreen

HbuilderX 3.2.12 苹果safari、苹果微信、苹果Chrome调用requestFullScreen 报 The object is in an invalid state

针对你遇到的这两个问题，这里提供具体的分析和解决方案。

问题一：H5端安卓浏览器Video组件播放黑屏

这是一个在安卓WebView和部分浏览器中常见的兼容性问题。核心原因通常是视频编码格式不被支持，或者自动播放策略的限制。

主要原因与解决方案：

1. 视频编码格式问题（最常见）

   • 问题根源：安卓系统浏览器和WebView对视频格式的支持不如PC浏览器广泛。最普遍兼容的格式是 MP4 + H.264编码 + AAC音频编码。
   • 解决方案：
     • 检查并转换视频格式：确保你的视频文件是标准的 MP4 格式，视频编码为 H.264，音频编码为 AAC。你可以使用格式工厂、FFmpeg等工具进行转换。
     • 提供多格式源：在 video 组件的 source 中提供多个格式的源，浏览器会选择它支持的第一个。

     <video controls>
       <source src="your-video.mp4" type="video/mp4">
       <!-- 可以额外提供WebM等格式作为备选 -->
       <source src="your-video.webm" type="video/webm">
       您的浏览器不支持 video 标签。
     </video>
     

2. 自动播放策略限制

   • 问题根源：现代浏览器（包括安卓）禁止音视频在没有用户交互的情况下自动播放（autoplay），尤其是带声音的视频。
   • 解决方案：
     • 移除或慎用 autoplay 属性：确保视频播放是由用户的点击等手势触发的。
     • 设置 muted 属性：如果必须自动播放，可以添加 muted 属性（静音），这通常被允许。

     <video controls muted autoplay>
     

3. CORS（跨域资源共享）问题

   • 问题根源：如果视频资源存放在与页面不同的域名下，且服务器没有正确配置CORS响应头，可能会导致视频加载失败。
   • 解决方案：确保视频资源服务器返回正确的CORS头，例如 Access-Control-Allow-Origin: * 或你的域名。

问题二：H5端苹果Safari无法调用requestFullScreen

这个问题是由于 Safari对全屏API的实现与其他浏览器不同 导致的。Safari使用的是自己的 WebKit前缀方法。

解决方案：

在调用全屏方法时，需要进行兼容性处理，优先尝试调用Safari特有的方法。

在你的全屏触发函数中（例如一个按钮的点击事件），使用如下代码：

// 获取video元素，假设你的video组件的ref为'myVideo'
// 在uni-app中，你可能需要通过this.$refs.myVideo来获取
let videoElement = this.$refs.myVideo; // 请根据你的实际获取方式调整

if (videoElement.requestFullscreen) {
    // 标准方法（用于Chrome, Firefox, Edge等）
    videoElement.requestFullscreen().catch(err => {
        console.log(`全屏请求失败: ${err.message}`);
    });
} else if (videoElement.webkitRequestFullscreen) {
    // WebKit前缀方法（用于Safari，包括iOS Safari）
    videoElement.webkitRequestFullscreen();
} else if (videoElement.msRequestFullscreen) {
    // MS前缀方法（用于旧版IE/Edge）
    videoElement.msRequestFullscreen();
}