在 Hulu 视频播放器中设置 videoElement.currentTime 不起作用，并破坏了播放器答案

【问题标题】：Set videoElement.currentTime in Hulu video player doesn't work, and breaks the player在 Hulu 视频播放器中设置 videoElement.currentTime 不起作用，并破坏了播放器
【发布时间】：2017-04-23 05:37:00
【问题描述】：

我有一个 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，一切都会像以前一样工作。

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

有什么想法吗？

【问题讨论】：

document.getElementsByTagName("video")[1] 建议您有多个视频元素？
是的。我相信其他元素是用于广告的。我已经确认视频元素 [1] 是正确的，因为我可以播放/暂停/静音/取消静音，这是真正的电视节目视频。
当您尝试currentTime = 2500 时会发生什么？
如原始帖子中所述，不会引发任何错误，但视频不会移动到该位置，并且此后与播放器交互的任何尝试均无效。我尝试设置它的时间无关紧要，它可以是 500、2500、20 等等。都是一样的结果。我尝试了各种不同的时间。
你有机会在你的 javascript 中使用 JQuery 吗？

标签： javascript google-chrome-extension html5-video

【解决方案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 测试了这个。如果您遇到任何问题，请告诉我。

【讨论】：

【解决方案2】：

与其尝试寻找负责改变时间的javascript，不如尝试模拟导致时间改变的用户事件？

找出触发时间变化的鼠标事件的确切顺序。这可能是 mouseover、mousedown、mouseup 和 click 的某种组合。

然后综合地重新创建这些事件并将它们分派给适当的元素。

这是Stream Keys 和Vimium 等扩展所采用的方法。

【讨论】：

Eejdoowad，这是一个很好的方法，我已经尝试过调查，但无法发现这些用户事件是什么。如果您提供有效的代码示例，我会接受您的回答。任何人都可以在 Hulu 上免费获得 1 个月，即使他们让您输入信用卡或贝宝帐户 - 但在不到一个月的时间内取消并且您无需支付任何费用。

【解决方案3】：

视频应该在设置 currentTime 之前准备好播放。

尝试在设置 currentTime 之前添加此行？

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

【讨论】：

【解决方案4】：

如果您先暂停，然后设置 currentTime，然后再次播放，看起来它会起作用。

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

可能需要挂钩一些事件，如 onseeked 以放入播放命令以使其更健壮。

【讨论】：