如何在 Chrome、Android 上的 Video.js 中设置 HLS (m3u8) 的初始时间

问题描述

我正在尝试在页面加载后的某个时间开始播放 HLS 视频。在大多数浏览器上，这种方法效果很好：

var player = videojs("video");
player.on('canplaythrough',setinitialTime());

function setinitialTime() {
  player.currentTime(300);
}

CodePen example

但是在 Chrome for Android 上视频总是从 0 秒开始。

我尝试在 play 而不是 canplaythrough 上触发事件，但这不是理想的解决方案，因为用户在点击播放按钮后必须等待预加载。

在 Android 11、Chrome 89.0.4389 上测试

解决方法

视频正在使用 Android 的原生 HLS 支持播放，这可能是一个问题，因为 Android 的 HLS 支持非常有问题，并且在您有机会设置侦听器之前事件可能已触发。

首先，更新 V​​ideo.js。 5.x 现在已经很老了。最新的是 7.11.8。同时删除已过时的 videojs-contrib-hls。旧版本默认使用浏览器的 HLS 支持（如果可用），新版本优先使用 Video.js 的 HTTP 流，而不是浏览器（Safari 除外）。

其次，即使使用最新的 Video.js，如果视频元素在播放器初始化时已经加载了 HLS 视频，则它不会再次重新加载源。为避免这种情况，请使用 <video-js> 元素而不是 <video>，或者删除 source 元素并使用 player.src({src: 'https...',type: 'application/x-mpegURL'}) 加载。