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，一切都和以前一样。

我可以通过滑动工具栏上的滑块轻松跳转到不同的时间（向后或向前），因此内部必须有某种方式来做到这一点。有什么方法可以让我发现什么代码成功的时间跳跃？因为它是Chrome扩展，我可以将自定义js注入执行的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测试了这个。如果您遇到任何问题，请告诉我。

Answer 2

为什么不尝试模拟导致时间变化的用户事件，而不是试图找到负责更改时间的javascript？

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

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

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

Answer 3

在设置currentTime之前，视频应该可以播放了。

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

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

Answer 4

如果您先暂停，然后设置currentTime，然后再次播放，它看起来是有效的。

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

可能需要挂钩一些像onseeked这样的事件来放入play命令以使其更强大。

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

4 个答案: