Question

我使用VideoJS框架，我想知道用户何时暂停视频。当我点击“播放按钮”和视频时，视频会暂停：

var vjs = document.getElementById("really-cool-video_html5_api"); // on video
var vjs = document.getElementById("really-cool-video").getElementsByClassName("vjs-play-control")[0]; // click button play

我使用Listener，看看用户是否点击了这个“div”：

vjs.addEventListener("click", checkPause, false);

但只有当我点击document.getElementById("really-cool-video").getElementsByClassName("vjs-play-control")[0]我想要的时候它才能控制，我的听众中都有2个div ...我无法更改HTML并告诉div同名...我怎么做两个元素的倾听者？

Answer 1

您可能最好使用video.js的api来监听暂停事件。有些方法可以在不点击（键盘控制）的情况下暂停视频，也可以点击不暂停视频（播放）的点击。

videojs('really-cool-video').on('pause', checkPause)

Answer 2

您的附加侦听器具有相同的命名变量。尝试将第二个vjs更改为vjsBtn，如此...

var vjsInnerBtn = document.getElementById("really-cool-video_html5_api"); // on video
var vjsPlayerBtn = document.getElementById("really-cool-video").getElementsByClassName("vjs-play-control")[0]; // click button play

现在你可以自由地完成这项工作。

vjsInnerBtn.addEventListener("click", checkPause, false);
vjsPlayerBtn.addEventListener("click", checkPause, false);

Answer 3

我假设您可以使用jQuery，因为您已对其进行了标记。这使得事情变得更加容易，因为您只需要使用您希望附加事件处理程序的元素填充选择器：

$('#really-cool-video_html5_api, #really-cool-video .vjs-play-control').on('click', checkPause);

请注意，此仍然添加了多个事件处理程序，如果您希望通过点击两个不同的元素触发相同的功能，则必须执行此操作。

Answer 4

你认为将它们存储在一个数组中吗？像

var controls['video']  = document.getElementById("really-cool-video_html5_api"); // on video
controls['pause_btn'] = document.getElementById("really-cool-video").getElementsByClassName("vjs-play-control")[0];
//Here you add the addEvenListener with the array elements.

与使用不同变量的方法相同，但如果要将相同的事件侦听器附加到它们或使用函数

，则可以迭代它们

GetElementby更多项目

4 个答案: