HLS 流 HTML5 视频 - 缓冲 X 时间后刷新

Posted 2023-05-07

【中文标题】HLS 流 HTML5 视频 - 缓冲 X 时间后刷新

【英文标题】：HLS stream HTML5 video - refresh after buffering for X time

【发布时间】：2022-01-21 03:26:24

【问题描述】：

我有一个简单的网站，其中包含来自自动播放视频标签中 m3u8 播放列表的 HLS 流。如果流停止超过 10 秒左右，它不会“赶上”并在重新启动流时重新开始 - 我需要手动刷新页面以使其再次播放。

有没有办法用js（或其他东西）在视频缓冲X时间后自动刷新页面？ （比如 5 秒）

【问题讨论】：

(1) 是的，reload a page 是可能的，所以现在您需要一个 IF 语句来决定何时重新加载。 (2) 找到获取video events 的方法（您必须检测“缓冲”状态并启动计时器）。 (3) 也许您可以编写一个 javascript 函数来重新设置视频标签的 src，然后重新加载标签（以应用新设置，而不是刷新整个页面） ）。示例myVid.src = your_path_here; myVid.load();

感谢@VC.One 的回复，我会看看检测视频事件，这看起来像是我可以使用的东西！非常感谢您让我朝着正确的方向前进，这是我缺少的部分。重置src 的好主意，我试试看。

【参考方案1】：

我在 VC.One 的回答中得到了一些帮助。如果视频之前正在播放，这将在视频缓冲 5 秒后重新加载。否则，如果它从不开始播放，它将卡在重新加载循环中。我仍在寻找一种方法来检查流是否实时而不实际重新加载页面。 video.load() 和 video.play() 给了我错误，但是当我弄清楚时我会更新这篇文章。

var reloadCheck;
var reloadThisTime;
var video = document.getElementById("videotag");
var sourcetag = document.getElementById("sourcetag");
video.addEventListener('waiting', (event) => 
  console.log("No connection");
  reloadCheck = setTimeout(function()
    if(reloadThisTime)
      location = '';
    ;
  ,5000);
);

video.addEventListener('playing', (event) => 
  console.log("Connected");
  clearTimeout(reloadCheck);
  reloadThisTime = true;
);