Using html video tag to loop video not working on firefox

Question

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>

Does this answer your question? [HTML5 video will not loop](https://stackoverflow.com/questions/8088364/html5-video-will-not-loop) — LS_, Oct 12 '22 at 12:34
and no it not working with the example document.getElementsByTagName('video')[0].onended = function () { this.load(); this.play(); }; — Soma Juice, Oct 12 '22 at 12:42
I was referring to [this answer](https://stackoverflow.com/a/9549404/3789527), try uploading the video in a generic hosting platform and use that url instead, if it works it means that the server you're using isn't returning the expected headers — LS_, Oct 12 '22 at 14:16

Shaun Williams · Accepted Answer · 2022-10-12T13:48:06.147

1

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();

});

edited Oct 12 '22 at 13:48

answered Oct 12 '22 at 12:59

Shaun Williams

26
3

Have you tried it? it is not working – Soma Juice Oct 12 '22 at 13:07
Yes it works for me, so you'll need to remove the "loop" attribute for it to work. Otherwise the "ended" event will not be fired. Let me know how it goes. – Shaun Williams Oct 12 '22 at 13:36
Also, don't forget to add the id="videoElementId" on the video element. – Shaun Williams Oct 12 '22 at 13:37

Using html video tag to loop video not working on firefox

1 Answers1