Question

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

CoinArray = [];
CoinArray['123'] = new Coin.createGame(123);
CoinArray['333'] = new Coin.createGame(333);
CoinArray['333'].start

在Greasemonkey。它有效，但重复/循环有一个小延迟。如果我运行一个gif，它应该看起来像在浏览器中。现在我已经找到了解决方案，并在论坛中找到了一些东西：

Issue setting currentTime in HTML5 video

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

// ==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");

首次运行后，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视频？

1 个答案: