如何不间断地循环播放 webm 视频?



大家好,我想从桌面(从 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");

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

在 HTML5 视频中设置当前时间时出现问题

但它在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-set 显示 video.play(); 不是一个函数,在 addeventlistener 也是如此。

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

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

提前感谢!

问候

你需要做的是跟踪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>

最新更新