返回

视频载入多级火箭

Android

修复视频.js 在 iOS 上播放视频时卡住和转圈圈的问题

当你使用 video.js 播放视频时，你是否遇到过这种情况：视频播放一段时间后会停止，然后开始转圈圈，一直转到报错？这种情况在 iOS 设备上尤为常见。

问题原因

iOS 在拿到视频流前需要预加载视频。如果当前视频流还没有打开过，iOS 就无法获取视频流的缓存，这时候 iOS 会一直转圈直到报错。

解决思路

  1. 先打开一个播放窗口，提前加载视频流。
  2. 判断当前 video 的 readyState 属性。
  3. 当 readyState 的状态码不等于 0 时，创建当前预览的 video。

具体步骤

  1. 在页面中添加一个隐藏的 video 标签，并设置其 src 属性为要播放的视频的 URL。

  2. 在 video 标签中添加一个 onloadedmetadata 事件监听器，并在事件处理函数中判断 video 的 readyState 属性。

  3. 如果 readyState 的状态码不等于 0，则创建当前预览的 video，并将其添加到页面中。

代码示例

<video id="hiddenVideo" style="display: none;" src="video.mp4" onloadedmetadata="onLoadedMetadata()"></video>

<script>
function onLoadedMetadata() {
  const video = document.getElementById("hiddenVideo");
  if (video.readyState !== 0) {
    const previewVideo = document.createElement("video");
    previewVideo.src = video.src;
    previewVideo.controls = true;
    document.body.appendChild(previewVideo);
  }
}
</script>

这样，就能解决 video.js 在 iOS 上播放视频时播放一段时间后停止播放的问题了。

注意事项

  1. 隐藏的 video 标签一定要设置好样式，使其不影响页面的布局。
  2. 在判断 readyState 的状态码时，需要使用 !== 而不是 !=。
  3. 在创建当前预览的 video 时，一定要设置好 src 属性和 controls 属性。

常见问题解答

  1. 为什么 iOS 设备容易出现这个问题？

iOS 在获取视频流之前需要预加载视频。如果视频流还没有被打开，iOS 就无法获取它的缓存，导致视频卡住和转圈圈。

  1. 如何判断 readyState 的状态码？

readyState 属性是一个只读属性，它表示视频的加载状态。它的值可以是以下几种：

  • 0：未初始化
  • 1：加载中
  • 2：加载完成
  • 3：解码中
  • 4：播放中
  1. 为什么要使用隐藏的 video 标签？

隐藏的 video 标签用于提前加载视频流，而不会显示在页面上。这样可以避免视频加载时出现闪烁或延迟。

  1. 为什么需要判断 readyState 的状态码不等于 0？

只有当 readyState 的状态码不等于 0 时，视频流才加载完成，可以创建当前预览的 video。

  1. 如何设置预览 video 的 src 和 controls 属性？

预览 video 的 src 属性应该设置为隐藏 video 的 src 属性。controls 属性应该设置为 true，以便显示视频控件。