VideoJS - 无缝循环视频

Posted 2023-05-08

【中文标题】VideoJS - 无缝循环视频

【英文标题】：VideoJS - Seamless Looping Video

【发布时间】：2012-12-06 05:12:55

【问题描述】：

这里是新人，对任何有 html5 视频和/或 VideoJS 播放器经验的人有疑问（如有必要，我也愿意使用其他播放器）。

我有一个视频，其中包括一个介绍部分和一个我想循环播放的部分。我这样做是为了防止在加载第二部分时出现“黑点”。

所以我的问题是，我想让第二部分无缝循环，但似乎无法完全正确地完成。在它再次开始播放之前似乎有一秒钟左右的延迟。我让我的视频编辑器将循环点设置为正好 36 秒，并使用以下代码寻找 36 秒并在结束后播放。

myPlayer.addEvent("ended", function () 
  myPlayer.currentTime(36);
  myPlayer.play();
);

这最终将视频摆动回第一帧，然后跳到 36 秒，然后播放。我将尝试为视频的最后一秒设置监听器并执行搜索，但我仍然担心搜索后的瞬间延迟。

任何帮助将不胜感激！

亚历克斯

更新：我已经设法通过编辑 video.js 的源来消除它回到第一帧的位，以删除触发“结束”事件时运行的默认函数（基本上是这样的：“暂停（）；当前时间（0）；暂停（）；“）

视频现在将直接进入我需要的 36 秒标记，但问题是它仍然将视频注册为已结束并在 36 秒标记处再次播放之前将其停止，从而在循环。我试图弄清楚如何让它监听视频即将结束的第二秒并触发 seek (currentTime) 函数，而不是“结束”事件监听器。

【参考方案1】：

尝试将视频分成两部分：介绍部分和循环部分。为每个视频制作一个<video> 元素并将它们放置在同一个位置，隐藏第二个视频。在介绍中设置"ended" 事件以换出显示并开始第二个视频。然后，您可以在第二个视频元素上设置loop 属性。

只要您至少在循环视频上具有preload 属性，就可以让两个视频无缝地一起播放。

如果这不起作用，请尝试使用相同的循环视频制作两个视频元素。当一个正在播放时，您可以隐藏另一个并将其currentTime 设置为零，因此当没有人在看时，任何搜索延迟都会发生。 （希望浏览器足够智能，可以缓存视频文件，并且只从网络加载一次，但您可能想尝试一下。）

（不幸的是，这些都不适用于 ipad，因为移动 safari 不支持在一个网页上显示多个媒体元素。）

【讨论】：

感谢您的回复。我最终对其进行了重新设计，以便它不使用“结束”事件，而是收听视频的最后一秒（> = 81），它绕过了 pause() seek() play() 函数并寻找到适当的时间因此。我本来打算走你的路线，但 iPad 需要这件作品。但是，我将批准您的回答，因为这是在其他情况下处理它的合法方式。再次感谢。

感谢您的批准并分享您的解决方案。这是一个很好的。

@PSDoff 最后一秒你是怎么听的？

@catalinux 我不确定我的工作文件到哪里去了，所以我不经意间就这么做了，但我相信这是一个简单的硬编码解决方案视频中的秒数减去 1（使用小于以防它没有捕捉到提供的实际秒数）。但是，如果我记得，您可以使用 videoJS API 将视频的持续时间注入一个变量并引用它......就像这样：var lengthOfVideo = myPlayer.duration();