javascript - Set videoElement.currentTime in Hulu video player doesn't work, and breaks the player - Stack Overflow

admin管理员组

文章数量:1419233

I have a Chrome extension in which I'm trying to jump forward or backward (based on a user mand) to a specific time in the video by setting the currentTime property of the video object. Before trying to set currentTime, a variety of operations work just fine. For example:

document.getElementsByTagName("video")[1].play(); // works fine
document.getElementsByTagName("video")[1].pause(); // works fine
document.getElementsByTagName("video")[1].muted = true; // works fine
document.getElementsByTagName("video")[1].muted = false; // works fine

BUT as soon as I try to jump to a specific point in the video by doing something like this:

document.getElementsByTagName("video")[1].currentTime = 500; // doesn't work

No errors are thrown, the video pauses, and any attempted actions after this point do nothing. So the items shown above (play/pause/mute/unmute) no longer work after attempting to set currentTime. If I read the value of currentTime after setting it, it correctly displays the new time that I just set it to. Yet nothing I do will make it play, and in fact even trying to make the video play by clicking the built-in toolbar no longer works. So, apparently setting currentTime wreaks all kinds of havoc in the video player. Yet if I reload the video, all works as before as long as I don't try to set currentTime.

I can easily jump to various times (backward or forward) by sliding the slider on the toolbar, so there must be some way internally to do that. Is there some way I can discover what code does a successful time jump? Because it's a Chrome extension I can inject custom js into the executing Hulu js, but I don't know what mand I would send.

Any ideas?

I have a Chrome extension in which I'm trying to jump forward or backward (based on a user mand) to a specific time in the video by setting the currentTime property of the video object. Before trying to set currentTime, a variety of operations work just fine. For example:

document.getElementsByTagName("video")[1].play(); // works fine
document.getElementsByTagName("video")[1].pause(); // works fine
document.getElementsByTagName("video")[1].muted = true; // works fine
document.getElementsByTagName("video")[1].muted = false; // works fine

BUT as soon as I try to jump to a specific point in the video by doing something like this:

document.getElementsByTagName("video")[1].currentTime = 500; // doesn't work

No errors are thrown, the video pauses, and any attempted actions after this point do nothing. So the items shown above (play/pause/mute/unmute) no longer work after attempting to set currentTime. If I read the value of currentTime after setting it, it correctly displays the new time that I just set it to. Yet nothing I do will make it play, and in fact even trying to make the video play by clicking the built-in toolbar no longer works. So, apparently setting currentTime wreaks all kinds of havoc in the video player. Yet if I reload the video, all works as before as long as I don't try to set currentTime.

I can easily jump to various times (backward or forward) by sliding the slider on the toolbar, so there must be some way internally to do that. Is there some way I can discover what code does a successful time jump? Because it's a Chrome extension I can inject custom js into the executing Hulu js, but I don't know what mand I would send.

Any ideas?

• javascript
• google-chrome-extension
• html5-video

Share Improve this question Follow asked Apr 23, 2017 at 5:37 HerrimanCoderHerrimanCoder 7,2643030 gold badges9595 silver badges170170 bronze badges 16

• 1 document.getElementsByTagName("video")[1] suggests you have more than 1 video element ? – Koby Douek Commented Apr 23, 2017 at 5:43
• Yes. I believe the other elements are for mercials. I have confirmed that video element [1] is the correct one because I can play/pause/mute/unmute that one, and it's the real TV show video. – HerrimanCoder Commented Apr 24, 2017 at 12:05
• What happens when you try currentTime = 2500 ? – Koby Douek Commented Apr 24, 2017 at 12:14
• As mentioned in original post, no errors are thrown, but the video doesn't move to that spot, and any attempts interact with the player after that doesn't work. The time I try to set it to doesn't matter, it can be 500, 2500, 20, whatever. All same result. I have tried various different times. – HerrimanCoder Commented Apr 24, 2017 at 13:11
• Any chance you can use JQuery in your javascript? – Koby Douek Commented Apr 24, 2017 at 13:12

 |  Show 11 more ments

5 Answers 5

Sorted by: Reset to default 3 +50

Okay I fiddled around with it for a little while to see how I could reproduce the click event on the player and came up with the following solution:

handleViewer = function(){
    var thumbnailMarker = $('.thumbnail-marker'),
        progressBarTotal = thumbnailMarker.parent(),
        controlsBar = $('.controls-bar'),
        videoPlayer = $('#content-video-player');

    var init = function(){
            thumbnailMarker = $('.thumbnail-marker');
            progressBarTotal = thumbnailMarker.parent();
            controlsBar = $('.controls-bar');
            videoPlayer = $('#content-video-player');
    },
    check = function(){
        if(!thumbnailMarker || !thumbnailMarker.length){
            init();
        }
    },
    show = function(){
            thumbnailMarker.show();
            progressBarTotal.show();
            controlsBar.show();
    },
    hide = function(){
        controlsBar.hide();
    },
    getProgressBarWidth = function(){
        return progressBarTotal[0].offsetWidth;
    };

    return {
        goToTime: function(time){
            var seekPercentage, 
            duration;
            check();
            duration = videoPlayer[0].duration;
            if(time > 0 && time < duration){
                seekPercentage = time/duration;
                this.jumpToPercentage(seekPercentage);
            }

        },
        jumpToPercentage: function(percentage){
            check();
            if(percentage >= 1 && percentage <= 100){
                percentage = percentage/100;
            }
            if(percentage >= 0 && percentage < 1){
                show();
                thumbnailMarker[0].style.left = (getProgressBarWidth()*percentage)+"px";
                thumbnailMarker[0].click();
                hide();
            }
        }
    }
}();

Once that code is initialized you can do the following:

handleViewer.goToTime(500);

Alternatively

handleViewer.jumpToPercentage(50);

I've tested this in chrome on a MacBook pro. Let me know if you run into any issues.

Rather than try to find the javascript responsible for changing the time, why not try to simulate the user events that cause the time to change?

Figure out the exact sequence of mouse events that trigger the time change. This is probably some bination of mouseover, mousedown, mouseup, and click.

Then recreate those events synthetically and dispatch them to the appropriate elements.

This is the approach taken by extensions like Stream Keys and Vimium.

The video should be ready to play before setting the currentTime.

Try adding this line before setting currentTime?

document.getElementsByTagName("video")[1].play(); document.getElementsByTagName("video")[1].currentTime = 500;

Looks like it works if you first pause, then set currentTime, then play again.

document.getElementsByTagName("video")[1].pause()
document.getElementsByTagName("video")[1].currentTime = 800.000000
document.getElementsByTagName("video")[1].play()

Probably would need to hook into some event like onseeked to put in the play mand to make it more robust.

you can try it, i tried it and it works fine

                var sliderContainer = document.querySelector('.Timeline__slider');
                var maxTime = parseInt(sliderContainer.getAttribute('aria-valuemax'));
                var targetTime = " + value + ";
                var targetPosition = (targetTime / maxTime) * 100;
                var sliderWidth = sliderContainer.offsetWidth;
                var sliderLeft = sliderContainer.getBoundingClientRect().left;
                var mouseX = sliderLeft + (sliderWidth * targetPosition / 100);
                var pointerDownEvent = new MouseEvent('pointerdown', {
                  bubbles: true,
                  cancelable: true,
                  view: window,
                  clientX: mouseX
                });
                sliderContainer.dispatchEvent(pointerDownEvent);
                var pointerUpEvent = new MouseEvent('pointerup', {
                  bubbles: true,
                  cancelable: true,
                  view: window,
                  clientX: mouseX
                });
                sliderContainer.dispatchEvent(pointerUpEvent);

本文标签：