限制HTML5视频循环的数量

Question

:) I am trying to loop a HTML5 video for 3 times only. I've found this code snippet which would basically do what I want. The strange thing is, I can't get it to work. If I run the demo here on stackoverflow it works. If I copy and paste it into a blank html document, it doesn't. Any advice?

thanks!

Answer 1

Do you add JS script at the end of body section? Script should be added at the end of body section (when document was loaded).

Answer 2

Try copy + pasting this. This should work.

<div>Iteration: <span id="iteration"></span></div>

<video width="320" height="240" id="myVideo" controls>
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
    Your browser does not support the video tag.
</video>

<script>
    var iterations = 1;

    document.getElementById('iteration').innerText = iterations;

    myVideo.addEventListener('ended', function () {    

        if (iterations < 2) {
            this.currentTime = 0;
            this.play();
            iterations ++;          
            document.getElementById('iteration').innerText = iterations;
        }   

    }, false);
</script>