使用Tampermonkey / javascript控制Netflix（HTML5）播放 [英] Controlling Netflix (HTML5) playback with Tampermonkey/javascript

问题描述

在Netflix网站上观看netflix视频时，我的目标是让用户脚本以编程方式调用播放控件。具体来说，视频的音量，音量，播放/暂停状态和时间位置。

While watching a netflix video on a Netflix site, my goal is to have a userscript invoke the playback controls programmatically. Specifically, the volume, level, play/pause state, and time position of the video.

我已经能够操纵html5视频元素本身，但是控制它直接不向用户提供所需的netflix控制条反馈。 （即视频暂停，但控制栏仍显示为正在播放）。

I've been able to manipulate the html5 video element itself, but controlling that directly does not provide the needed netflix control bar feedback to the user. (i.e. video is paused, but the control bar still shows it as playing).

到目前为止，我的方法是尝试找到代表按钮的元素在使用普通控件时单击，并通过用户脚本触发其单击事件。但我似乎无法隔离适当的元素。另外netflix正在使用javascript压缩器/混淆器，这增加了找到代表控制栏上按钮的正确元素的难度。

My approach thus far has been to try and locate the elements that represent the "buttons" you click when using the normal controls, and trigger their click events through the userscript. But I can't seem to isolate the proper elements. Additionally netflix is using a javascript compressor/obfuscator which increases the difficulty of finding the proper elements that represent the buttons on the control bar.

在这样的网站上，怎么能一个标识正在接收元素的click事件的元素，然后创建一个用户脚本通过tampermonkey和/或greasemonkey来调用它？

On a site like this, how can one identify the element that is receiving the click event of an element and then create a userscript to invoke it through tampermonkey and/or greasemonkey?

在下面的示例代码中，我为了测试目的，我在视图上添加了一个按钮。

In the sample code below, I've added a button on the view for testing purposes.

// ==UserScript==
// @name       Jump a minute ahead in netflix
// @version    0.1
// @description  A Test by trying to jump a minute or so ahead into a netflix movie
// @match        *://www.netflix.com/*
// @grant       GM_addStyle
// @require http://code.jquery.com/jquery-latest.js
// ==/UserScript==

var zNode       = document.createElement ('div');
zNode.innerHTML = '<button id="myButton" type="button">Try It</button>';
zNode.setAttribute ('id', 'myContainer');
document.body.appendChild (zNode);

//--- Activate the newly added button.
document.getElementById ("myButton").addEventListener (
    "click", ButtonClickAction, false
);

function ButtonClickAction (zEvent) {
    /*--- For our dummy action, we'll just add a line of text to the top of the screen.*/
    var zNode       = document.createElement ('p');
    var video = $("video:first-of-type");
    var playerSlider = document.getElementsByClassName("player-slider")[0];

    console.log(netflix);
    console.log(playerSlider);
    console.log(netflix.player);
    console.log(netflix.cadmium);
    console.log(netflix.cadmium.ui);
    console.log(netflix.cadmium.ui.playback);

    //video.get(0).pause();
    //video.get(0).currentTime = 2000.0;
    console.log(video.get(0).currentTime);
    console.log(netflix.cadmium.ui.volume);
    zNode.innerHTML = 'The button was clicked.';
    document.getElementById ("myContainer").appendChild (zNode);
}

//--- Style our newly added elements using CSS.
GM_addStyle ( multilineStr ( function () {/*!
    #myContainer {
        position:               absolute;
        top:                    0;
        left:                   0;
        font-size:              20px;
        background:             orange;
        border:                 3px outset black;
        margin:                 5px;
        opacity:                0.9;
        z-index:                222;
        padding:                5px 20px;
    }
    #myButton {
        cursor:                 pointer;
    }
    #myContainer p {
        color:                  red;
        background:             white;
    }
*/} ) );

function multilineStr (dummyFunc) {
    var str = dummyFunc.toString ();
    str     = str.replace (/^[^\/]+\/\*!?/, '') // Strip function () { /*!
    .replace (/\s*\*\/\s*\}\s*$/, '')   // Strip */ }
    .replace (/\/\/.+$/gm, '') // Double-slash comments wreck CSS. Strip them.
    ;
    return str;
}

console.log语句显示了我发现的一些内容远。但是我还没有弄清楚如何从它们中调用函数，或者它们中的哪些可能具有我正在寻找的东西（我认为很大程度上是由于javascript压缩器使我难以遵循代码）。

The console.log statements are showing some of the things I've found so far. But I haven't figured out how to invoke functions off them, or which of them might have what I'm looking for (I think largely due to the javascript compressor making it difficult for me to follow the code).

推荐答案

我认为这是我对这个问题过于认真思考的一个例子。一旦我退后一步，我意识到我一直在寻找正确的方向，但没有正确触发点击事件。

I think this was a case of my thinking too hard about the problem. Once I stepped back, I realized that I had been looking in the right direction, but wasn't triggering the click event properly.

因此，例如，要获得控制播放和暂停的按钮，您可以使用： document.getElementsByClassName（player-control -button player-play-pause）[0] 。然后在tampermonkey中以编程方式单击它，您只需使用以下命令调用click事件：

So, for example, to get the "button" that controls play and pause, you could use: document.getElementsByClassName("player-control-button player-play-pause")[0]. Then to click it programmatically in tampermonkey, you simply invoke the click event using:

document.getElementsByClassName("player-control-button player-play-pause")[0].click();

栏中的音量和其他控件类似。回放位置看起来有点棘手，但是一旦我搞清楚，我会再做一些挖掘并为这个答案添加评论。

Volume and other controls in the bar are similar. The playback position is looking to be a bit trickier, but I'll do some more digging and add a comment to this answer once I figure it out.

这篇关于使用Tampermonkey / javascript控制Netflix（HTML5）播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！