javascript - 在 Hulu 视频播放器中设置 videoElement.currentTime 不起作用，并且会破坏播放器

Question

我有一个 Chrome 扩展程序，我试图通过设置视频对象的 currentTime 属性向前或向后跳转(基于用户命令)到视频中的特定时间。在尝试设置 currentTime 之前，各种操作工作正常。例如:

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

但是一旦我尝试通过执行以下操作跳转到视频中的特定点:

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

不会抛出任何错误，视频会暂停，并且在此之后尝试的任何操作都不会执行任何操作。因此，在尝试设置 currentTime 后，上面显示的项目(播放/暂停/静音/取消静音)不再起作用。如果我在设置后读取 currentTime 的值，它会正确显示我刚刚设置的新时间。然而，我做的任何事情都无法让它播放，事实上，甚至试图通过单击内置工具栏来播放视频也不再有效。因此，显然设置 currentTime 会对视频播放器造成各种破坏。然而，如果我重新加载视频，只要我不尝试设置 currentTime，一切都会像以前一样工作。

我可以通过滑动工具栏上的 slider 轻松跳到不同的时间(向后或向前)，因此内部必须有某种方法可以做到这一点。有什么方法可以发现成功的时间跳跃是什么代码？因为它是一个 Chrome 扩展程序，所以我可以将自定义 js 注入(inject)正在执行的 Hulu js，但我不知道我会发送什么命令。

有什么想法吗？

Answer 1

好吧，我摆弄了一会儿，看看如何在播放器上重现点击事件，并提出了以下解决方案:

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

初始化该代码后，您可以执行以下操作:

handleViewer.goToTime(500);

或者

handleViewer.jumpToPercentage(50);

我已经在 MacBook pro 上用 chrome 测试过这个。如果您遇到任何问题，请告诉我。