使用 html 视频标签循环视频在 Firefox 上不起作用答案

【问题标题】：Using html video tag to loop video not working on firefox使用 html 视频标签循环视频在 Firefox 上不起作用
【发布时间】：2022-10-12 21:45:37
【问题描述】：

在所有示例中，我发现在线向视频标签添加自动播放静音循环是如何使用 html 循环视频？但是为什么我的视频只播放一次？

它确实适用于铬

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video width="320" height="240" autoplay muted loop>
        <source src="1.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>
      
</body>
</html>

【问题讨论】：

您使用的是哪个浏览器？
这回答了你的问题了吗？ HTML5 video will not loop
我正在使用火狐
不，它不适用于示例 document.getElementsByTagName('video')[0].onended = function () { this.load(); this.play(); };

标签： html firefox

【解决方案1】：

根据我的阅读和以前的经验，并非所有浏览器都支持循环属性。也许您可以使用一些 JavaScript 来强制视频循环播放。这是我在另一个问题上找到的一个 sn-p：所以这基本上是听“结束”的媒体事件，然后将视频重置为 0 并再次强制播放。您必须对其进行测试，因为这可能只会在视频结束后循环一次。但是让您了解它如何与 JavaScript 一起工作

编辑：为此，您需要删除要触发的“结束”事件的“循环”属性。

在此感谢@asmmahmud：Play infinitely looping video on-load in HTML5

    window.addEventListener('load', function(){
    var newVideo = document.getElementById('videoElementId');
    newVideo.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
    }, false);

    newVideo.play();

});

【讨论】：

你试过了吗？它不工作
是的，它对我有用，因此您需要删除“循环”属性才能使其工作。否则“结束”事件将不会被触发。让我知道事情的后续。
另外，不要忘记在视频元素上添加 id="videoElementId"。