html - VideoJS - 无缝循环视频

标签 html video html5-video video.js

这里是新功能,请问任何有 HTML5 视频和/或 VideoJS 播放器经验的人(如有必要,我也愿意使用其他播放器)。

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

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

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

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

如有任何帮助,我们将不胜感激!

亚历克斯

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

视频现在将直接转到我需要的 36 秒标记,但问题是它仍然将视频注册为已结束并在 36 秒标记处再次播放之前停止,从而造成轻微的延迟循环。我正在尝试弄清楚如何让它监听视频即将结束并触发搜索 (currentTime) 函数,而不是“结束”事件监听器。

最佳答案

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

只要您有preload,让两个视频一起无缝播放应该没有问题。至少循环视频的属性。

如果这不起作用,请尝试使用相同的循环视频制作两个视频元素。当一个正在播放时,您可以隐藏另一个并设置其 currentTime回到零,所以任何寻找延迟都会在没有人看的时候发生。 (希望浏览器足够智能,可以缓存视频文件并只从网络加载一次,但您可能需要试验一下。)

(不幸的是,这些都不适用于 ipad,因为移动 safari 不支持一个网页上的多个媒体元素。)

关于html - VideoJS - 无缝循环视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13942425/

相关文章:

css - 如果覆盖嵌入视频 [Firefox],则覆盖不起作用

javascript - 通过 JS 悬停到整个 div

php - 有什么技术可以在不刷新页面的情况下,用更新的内容来更新网页呢?

javascript - 使用 jQuery 将表情符号插入 div 中

audio - FFmpeg concat 视频和音频不同步

android - 从youtube播放列表中获取视频ID并下载它们

c++ - Live555 TSX 文件索引

javascript - Firefox 的 MediaRecorder 接口(interface)每两秒只提供一次新的视频数据

video - 使用 ffmpeg 进行桌面录制只能在 VLC 中播放

javascript - 使用 jQuery 设置点击后的默认图像