观看Netflix网站上的视频时，我的目标是使用用户脚本以编程方式调用播放控件。具体而言，视频的音量，级别，播放/暂停状态以及时间位置。
我已经能够操作html5视频元素本身，但是直接控制它不会提供所需的Netflix控件条反馈给用户（即，视频被暂停，但控件条仍然显示正在播放）。
到目前为止，我的方法一直是尝试找到代表正常控件使用时点击的“按钮”的元素，并通过用户脚本触发它们的单击事件。但我似乎无法隔离出正确的元素。此外，Netflix使用了JavaScript压缩器/混淆器，这增加了查找控制条上的按钮的正确元素的难度。
在像这样的网站上，如何确定正在接收元素的点击事件并创建一个用户脚本通过tampermonkey和/或greasemonkey来调用它？
在下面的示例代码中，我添加了一个按钮进行测试。
我已经能够操作html5视频元素本身，但是直接控制它不会提供所需的Netflix控件条反馈给用户（即，视频被暂停，但控件条仍然显示正在播放）。
到目前为止，我的方法一直是尝试找到代表正常控件使用时点击的“按钮”的元素，并通过用户脚本触发它们的单击事件。但我似乎无法隔离出正确的元素。此外，Netflix使用了JavaScript压缩器/混淆器，这增加了查找控制条上的按钮的正确元素的难度。
在像这样的网站上，如何确定正在接收元素的点击事件并创建一个用户脚本通过tampermonkey和/或greasemonkey来调用它？
在下面的示例代码中，我添加了一个按钮进行测试。
// ==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压缩器使得我难以跟踪代码）。