1

I want to let the user click a button to loop a HTML5 video at a specified start time, which is not 0, and a specified end time, which is not the end of the whole video.

I don't want to force the video to be a certain length permanently. I want to eventually give the user multiple buttons to let them loop over different intervals of the video.

It works in Firefox, but not in Chrome. No errors are thrown but it seems that Chrome doesn't register my currentTime assignments. It will begin at 0, not the specified start time, but it will end at the specified end time. It loops. The problem is just the start time.

SSCCE:

HTML:

<body>
    <video src="./example.mp4" width="480" controls></video>
    <div><button id="storyText">Loop</button></div>
</body>

JS: 

$(document).ready(function() {
    var video = document.getElementsByTagName('video')[0];
    var timeStamp = [7, 11];

    $('button').click(function() {
        playVideoInterval(timeStamp[0], timeStamp[1]);
    });

    function playVideoInterval(start, end) {
        video.addEventListener('timeupdate', loop);
        video.currentTime = start;
        document.body.addEventListener('click', endLoop, true);
        video.play();

        function loop() {
            if (this.currentTime >= end) {
                video.currentTime = start;
                video.play();
            }
        }

        function endLoop() {
            video.pause();
            document.body.removeEventListener('click', endLoop);
            video.removeEventListener('timeupdate', loop);
        }
    }    
});

EDIT: I have also attempted to enclose the code in my document.ready function in an event listener that listens for canplay event or loadedmetadata event. Neither help.

JS: 

$(document).ready(function() {
    var video = document.getElementsByTagName('video')[0];
    var timeStamp = [7, 11];

    video.addEventListener('canplay', execute);
    function execute() {
        video.removeEventListener('canplay', execute);
        $('button').click(function() {
            playVideoInterval(timeStamp[0], timeStamp[1]);
        });

        function playVideoInterval(start, end) {
            video.addEventListener('timeupdate', loop);
            video.currentTime = start;
            document.body.addEventListener('click', endLoop, true);
            video.play();

            function loop() {
                if (this.currentTime >= end) {
                    video.currentTime = start;
                    video.play();
                }
            }

            function endLoop() {
                video.pause();
                document.body.removeEventListener('click', endLoop);
                video.removeEventListener('timeupdate', loop);
            }
        }    
    }
});

EDIT: I'm using a server to serve it at localhost and this is where it is having problems. If I open the static page direct in the web browser, it is fine.

brienna
  • 1,415
  • 1
  • 18
  • 45
  • If you want to loop a part of the video from start time to end time, i tried your code and it's working in chrome v69.0.3497.100. Which version are you using ? – ElJackiste Oct 03 '18 at 06:05
  • 69.0.3497.100 too -- i don't want to loop from 0 -- did yours loop from the specified time of 7 seconds and end at 11 seconds? @ElJackiste – brienna Oct 03 '18 at 06:06
  • Yes i'm looping from anytime : http://jsfiddle.net/zpsho125 Your video end time is less or equal than the total time of the video ? – ElJackiste Oct 03 '18 at 06:10
  • less than, your video is shorter than mine, but i can see that it works if i change the end time on your jsfiddle. wonder if its because of jsfiddle, or because the video is served on the internet... idk :/ – brienna Oct 03 '18 at 06:12
  • interesting. i just used your video file link in my local environment and it worked. seems like it is a problem with uploading the html5 video. maybe chrome needs it all in the browser before it'll let me set currentTime? so weird. my event listeners should have worked? – brienna Oct 03 '18 at 06:15
  • I just tried in my local environment with a a local video (of 30 minutes) and it works too. – ElJackiste Oct 03 '18 at 06:21
  • Exact same code? – brienna Oct 03 '18 at 06:22
  • Yeah, same code. Your video is stored on internet or your local environment ? – ElJackiste Oct 03 '18 at 06:23
  • My local environment. I’m using python httpserver to serve cuz I have ajax requests in other parts of my site. Just tried my sscce and it works locally with no server. Maybe it is the server. – brienna Oct 03 '18 at 06:25
  • 1
    In fact doesn't seems to change anything to me. I just tried with few long video stored on internet or on my local computer and it works. – ElJackiste Oct 03 '18 at 06:25
  • Try to create an index.html on your desktop and to copy paste the jsfiddle code ? – ElJackiste Oct 03 '18 at 06:26
  • Yeah it works completely locally but if i serve on localhost it doesn’t listen to currentTime – brienna Oct 03 '18 at 06:30
  • 1
    this answers my problem: https://stackoverflow.com/questions/35751736/seeking-in-html5-video-with-chrome thanks for your time and help in narrowing this down! – brienna Oct 03 '18 at 06:37
  • I was going to say, i tried with wamp and then with a node.js server and it works too :p Glad you find out. – ElJackiste Oct 03 '18 at 06:46

0 Answers0