我怎样才能无延迟地循环 webm 视频？答案

【问题标题】：How can i loop webm videos without delay?我怎样才能无延迟地循环 webm 视频？
【发布时间】：2017-07-05 16:25:08
【问题描述】：

大家好，我想从桌面（从电脑）在浏览器中运行 webm-video。现在我用我找到的这个 .js 文件循环了 webm：

// ==UserScript==
// @name        Webm Looper
// @namespace   com.whatisthisimnotgoodwithcomputers.webmlooper
// @author      WhatIsThisImNotGoodWithComputers
// @description A userscript which automatically enables looping on Webm videos in your browser.
// @include       *.webm
// @run-at      document-start
// @version     1.0
// @grant       none
// ==/UserScript==

var vids = document.getElementsByTagName("video");
for (i = 0; i < vids.length; i++) 
 vids[i].setAttribute("loop", "true");

在 Greasemonkey 中。它可以工作，但重复/循环中有一个小的延迟。如果我运行一个 gif，它会看起来像在浏览器中。现在我在寻找解决方案并在论坛中找到了一些东西：

Issue setting currentTime in HTML5 video

但它在 Greasemonkey 中不起作用。这是我在 Greasemonkey 中的代码：

// ==UserScript==
// @name        Loop
// @namespace   Loop
// @version     1
// @include *.webm
// @run-at      document-start
// @grant       none
// ==/UserScript==

var vids = document.getElementsByTagName("video");
vids.play();
vids.addEventListener('canplay', function() {
 this.currentTime = 5;
});

webm 在第一次运行后停止。

javascript 设置显示 video.play();不是一个函数，在 addeventlistener 处也一样。

也许你可以帮我解决这个问题。我可以改进什么？我必须安装其他东西或改变吗？

不幸的是，我只是编程的新手。

提前致谢！

问候

【问题讨论】：

有什么理由不在<video> 标签本身上使用loop 属性？
原因是延迟。如果视频以循环属性重新开始，会有一点延迟

标签： javascript html loops video webm

【解决方案1】：

您需要做的是跟踪currentTime 属性（您可以为此使用timeupdate 事件），当它接近尾声时（duration 属性）您可以将其重置回开始

在下面的示例中，它使用loadedmetadata 事件来了解脚本的持续时间，并开始播放视频并将侦听器附加到timeupdate，然后跟踪currentTime

<html>
<head>
<title>Video Looper Page</title>
</head>
<body>

<video id="video" muted preload="metadata" controls>
    <source src="video.mp4" type="video/mp4" />
</video>

<script>
video = document.getElementById("video")
video.addEventListener("loadedmetadata",init)

function init() {
    video.removeEventListener("loadedmetadata",init)
    video.play()
    video.addEventListener('timeupdate', 
        funcloop=function(){
            if (video.currentTime >= (video.duration - 1)) {
                video.currentTime = 1;
                video.play()
            }
        }, false);
    }
</script> 

</body>
</html>

演示使用 setInterval 控制循环的第二个版本。允许更小的测试间隔

<html>
<head>
<title>Video Looper Page</title>
</head>
<body>

<video id="video" muted preload="metadata" controls>
    <source src="video.mp4" type="video/mp4" />
</video>

<script>
video = document.getElementById("video")
video.addEventListener("loadedmetadata",init)

function init() {
    video.removeEventListener("loadedmetadata",init)
    video.play()
    t = setInterval(looper, 100);
}

function looper() {
    console.log(video.currentTime);
    if (video.currentTime >= (video.duration - 0.1)) {
        video.currentTime = 0.2;
        video.play()
    }
}

</script> 
</body>
</html>

【讨论】：

感谢您的代码，但它不起作用。代码看起来很合理。 :D 我已经复制了greasemonkey 中的代码，启用了greasemonkey 并且正确的脚本处于活动状态。我必须激活一些东西吗？
它在 Chrome 中确实有效 - 请参阅 jsfiddle.net/ps3yuj7f - 为什么您尝试在 Greasemonkey 中运行它而不是将其保存为网页并在浏览器中打开它？如果我这样做，它也可以在 Firefox/Safari 中使用（由于某种原因，它们不能在 Fiddle 中使用）
在示例中，视频被命名为显式。我可以运行这个吗
在示例中，视频被命名为显式。 source src="media.w3.org/2010/05/sintel/trailer.mp4" 我可以用任何视频运行它还是每次都必须更改源？然后浏览器仅打开视频文件而不打开代码中的其他内容是否正确。我只想在浏览器中看到视频。对不起，“初学者”的问题。我希望你继续帮助我。 :D
如何将它保存为网页，这样我只需双击桌面上的视频即可打开它然后运行？我很高兴再次得到答复。 :D