Using html video tag to loop video not working on firefox-CodePudding

In all examples i find online adding autoplay muted loop to the video tag is how you loop a video with html? But why does my video only play once?

It does work on chrome

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

CodePudding user response：

From what I've read and previous experience, the loop attribute is not supported across all browsers. Maybe you could use a bit of JavaScript to force the video to loop. Here is a snippet I found on another question: So this basically listens to the "ended" media event and then resets the video to 0 and forces play again.

Edit: For this to work, you will need to remove the "loop" attribute for the "ended" event to be fired.

Credits to @asmmahmud here: 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();

});