uniapp苹果不能播放video怎么办

问题描述

uniapp（基于Vue.js开发的跨平台应用开发框架）开发的iOS应用在播放video时，无法在苹果设备上正常播放。

问题排查

为了解决该问题，我们需要考虑到以下几点进行排查：

浏览器兼容性

首先需要确认是不是浏览器的兼容性问题导致的播放异常。iOS设备上默认的浏览器是Safari。可以在其它支持video标签的浏览器上进行测试，以确保是否是浏览器的兼容性问题导致的播放异常。

视频编码格式

视频编码格式与播放器的兼容性也是影响视频播放的关键因素。常见的视频编码格式包括H.264、VP9等。针对iOS设备的特殊限制，建议使用本机（iOS系统）支持的H.264编码格式进行视频的编码。

视频大小及分辨率

视频大小及分辨率也可会对视频在iOS设备上的播放产生影响。iOS设备对视频大小及分辨率的限制相对较小，但建议在视频上传前 压缩至较小的文件体积和较低的分辨率，以节省用户的网络流量和保证用户的流畅观看。

解决方案

鉴于以上排查方式所得到的结论，我们可以尝试以下解决方案：

检查编码方式

首先检查视频的编码方式，确保是基于本机（iOS系统）支持的H.264编码格式进行的编码。我们可以使用FFmpeg这个工具查看视频的编码方式，也可以使用uni-app提供的video组件封装后的loadedmetadata事件检查视频的元数据，确定是否是H.264格式。

videoOnLoadeddata (e) {

  const video = e.target
  console.log(video.videoWidth, video.videoHeight)
  console.log(video.videoWidth * video.videoHeight)
  console.log(video.duration)
  console.log(video.videoTracks[0].codec)
}

注意：使用uni-app的video组件时，需要将iOS平台的playsinline属性设置为true，否则会在进入全屏模式后出现黑屏的情况。

  @loadeddata="videoOnLoadeddata"
  playsinline="true"
  webkit-playsinline="true"
  x5-playsinline="true"
>

利用Hls.js库处理视频

如果视频的编码方式检查正常，可以使用Hls.js库来处理视频。Hls.js是一个JavaScript库，用于在Web上使用HTTP Live Streaming（HLS）协议。通过解码HLS流并将其转换为HTML5 video标签可以播放的格式，Hls.js使得在Web上实现视频直播成为可能。具体实现方式如下：

在uni-app项目中安装Hls.js库：npm install hls.js --save

在相关模块中引入Hls.js库，并使用它完成视频的处理：

import Hls from 'hls.js'

let video = document.getElementsByTagName('video')[0]
if (Hls.isSupported()) {
  let hls = new Hls()
  hls.loadSource('path/to/your/hls/index.m3u8')
  hls.attachMedia(video)
  hls.on(Hls.Events.MANIFEST_PARSED, () => {
    video.play()
  })
}

需要注意的是，在引入Hls.js库时需要配置对应的import配置。

总结

通过以上方法，我们可以尝试解决uniapp苹果不能播放video的问题。但无论哪种解决方法，都需要有足够的耐心和技术支持的保障。总而言之，只有在不同的场景调试了多次之后，才有可能真正的解决掉这类问题。