捕获并处理 videojs 'bigplaybutton' 的 'click' 事件不起作用

Question

我正在使用 https://vjs.zencdn.net/5.16.0/video.min.js 的 videojs 在我的页面中嵌入视频。单击 'bigplaybutton'.

我有一个要执行的操作

我试图通过 class 名称 vjs-big-play-button 获取元素（我没有明确创建按钮...只是使用来自 videojs 的按钮）并添加一个事件监听器它。

document.getElementsByClassName("vjs-big-play-button").addEventListener('click', somefunction);

(或)

document.getElementsByClassName("vjs-big-play-button").onclick = function(){
    console.log("play");
};

它们都不起作用。我不确定我的方法是否正确。请提出实现此目的的解决方案。

Answer 1

所以我做了进一步的研究并找到了一个有效的解决方案。但仍然不确定为什么通过 class 名称获取元素不起作用。所以这是对我有用的解决方案。

var player = videojs("videoElementId");
player.bigPlayButton.on('click', function(){
    // do the action
});

Answer 2

getElementsByClassName 将按 class 名称 return 元素数组。所以如果你只有一个，那么它可以被调用 document.getElementsByClassName("vjs-big-play-button")[0]

Answer 3

如果你想在大播放按钮上添加事件，你可以使用下面的代码：

 var previewPlayer = videojs(document.querySelector('.video-js-preview'));

  previewPlayer.bigPlayButton.on('click', function () {
               // your action here.
            });

如果您想在视频播放中添加事件，您可以使用以下方法：

previewPlayer.on('play', () => {  // your action here. });

捕获并处理 videojs 'bigplaybutton' 的 'click' 事件不起作用

Capturing and handling the 'click' event of 'bigplaybutton' of videojs is not working

javascript

video

html5-video

dom-events

video.js