一段时间后自动播放停止从谷歌驱动器拍摄的 html5 视频

Question

我在 html 视频标签中有一个 mp4 视频。 SRC= 用于 google drive 视频。 请参阅下面的代码

<video auto play muted loop id="video" class="" src="https://drive.google.com/uc?export=download&id=1qSC6ySf6ZZldFRpuBx9EXvDsD-mfve1Z" type="video/mp4">  </video>

注意：当我从我的服务器直接调用 mp4 视频时，它不会暂停，但是当从谷歌驱动器调用视频时，它会在几分钟后暂停。因为我没有显示任何控件。我需要连续播放视频。

我遇到的问题是 Codepen 链接：https://codepen.io/5salman/pen/bGRMyKj

Answer 1

Google Drive 中没有任何继承（我能想到的） 会取消自动播放。您更有可能遇到error 事件。视频将通过“206 Partial Content”字节范围请求加载。如果它最终没有被本地缓存，那么它可能比在不支持字节范围请求的服务器上更容易受到网络问题的影响。还可以考虑查看网络 Devtools 是否有任何网络错误。

缓解选项：

• 缩小视频大小！ 20 秒的视频大小为 14mb。使用Handbrake 或其他东西将视频重新编码为更小的比特率/大小。这将减少网络流量并减少阻塞查看设备的可能性。
• 在<video> 标记上添加error 事件处理程序 - 这可以帮助您进行诊断，您还可以触发视频（尝试）再次播放。

function reloadVideo(vidElement, preserveTime = true) {
  if (preserveTime) {
    // wait to set the current time again until after playable
    const position = vidElement.currentTime;
    var cb = vidElement.addEventListener('canplay', () => {
      if (!isNaN(position) && position < vidElement.duration) {
        // I recommend seeking just a frame or so ahead, just in case there was a decode error on the video
        vidElement.currentTime = position + 1/30;
      }
      vidElement.removeEventListener('canplay', cb);
    });
  }
  
  const src = vidElement.currentSrc;
  vidElement.src = "";
  vidElement.src = src;
  
}

var vidElement = document.querySelector('#video');

// retry on error
var retryErrorCodes = [MediaError.MEDIA_ERR_NETWORK, MediaError.MEDIA_ERR_DECODE];
var SECONDS_BEFORE_RETRY = 5;
vidElement.addEventListener('error', evt => {
  if (retryErrorCodes.includes(vidElement.error.code)) {
    setTimeout(reloadVideo, SECONDS_BEFORE_RETRY * 1000, vidElement);
  }
}

• （不推荐）如果您需要让它继续运行，您可以添加一个setInterval 函数，在视频暂停时重新启动它。请记住，如果您不小心管理这些“僵尸”功能，它们可能会很烦人。

// use setInterval to keep retrying the playback
var SECONDS_BETWEEN_PLAYING_CHECKS = 10;
var keepPlayingTimer = setInterval(function () {
  var vidElement = document.querySelector('#video');

  // make sure the element is still there
  if (vidElement && typeof vidElement.play === 'function') {
    // if it's not playing start it playing again
    if (vidElement.paused) {
      vidElement.play();
    }
  } else {
    // don't call this function again if video element is gone
    clearInterval(keepPlayingTimer);
  }
}, SECONDS_BETWEEN_PLAYING_CHECKS * 1000);