引用自Google Drive的HTML5 video标签视频播放一段时间后自动停止问题

问题根因 #

1. Google Drive的核心功能是文件存储与分享，并未对外提供静态视频资源托管的CDN服务，你使用的下载链接自带会话有效期与访问频次限制，播放一段时间后链接失效就会触发视频加载中断，导致自动暂停。
2. 你现有代码中autoplay属性拼写错误，拆分写成了auto play，不符合HTML标准属性规范。

修复方案 #

临时适配方案（仍使用Google Drive存储） #

修正属性写法的同时，添加JS事件监听，触发异常暂停/加载错误时自动重新加载视频资源，代码示例如下：

<video autoplay muted loop id="video" type="video/mp4"></video>
<script>
const videoEl = document.getElementById('video')
const videoSource = 'https://drive.google.com/uc?export=download&id=1qSC6ySf6ZZldFRpuBx9EXvDsD-mfve1Z'
// 初始化赋值视频地址
videoEl.src = videoSource

// 监听异常暂停事件，自动重启播放
videoEl.addEventListener('pause', () => {
  // 过滤循环播放触发的正常结束暂停
  if (videoEl.currentTime !== videoEl.duration) {
    videoEl.load()
    videoEl.play()
  }
})

// 监听资源加载错误，自动重新拉取资源
videoEl.addEventListener('error', () => {
  videoEl.src = videoSource
  videoEl.load()
  videoEl.play()
})
</script>

长期稳定方案 #

如果要彻底避免这类问题，建议将视频资源迁移到专门的云存储CDN、视频托管平台或者自有服务器上，这类服务本身就是为网页资源分发设计，不会存在会话时效、访问频次限制的问题，播放稳定性更高。

内容的提问来源于stack exchange，提问作者salman m