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