我怎样才能毫不拖延地循环播放 webm 视频？

Question

大家好，我想运行从桌面（从 pc）浏览器中的 webm 视频。现在我用我发现的这个 .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 中。它有效，但 repeat/loop 中有一个小的延迟。它应该看起来像我运行一个 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 中是相同的。

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

很遗憾，我只是编程的新手。

提前致谢！

此致

Answer 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>

我怎样才能毫不拖延地循环播放 webm 视频？

How can i loop webm videos without delay?

javascript

html

loops

video

webm