捕获和处理videojs的'bigplaybutton'的'click'事件不起作用答案

【问题标题】：Capturing and handling the 'click' event of 'bigplaybutton' of videojs is not working捕获和处理videojs的'bigplaybutton'的'click'事件不起作用
【发布时间】：2019-03-26 16:09:22
【问题描述】：

我正在使用来自 https://vjs.zencdn.net/5.16.0/video.min.js 的 videojs 在我的页面中嵌入视频。单击“bigplaybutton”时，我有一个要执行的操作。

我尝试通过类名 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");
};

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

【问题讨论】：

标签： javascript video html5-video dom-events video.js

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

如果您想在 Big Play Button 上添加事件，您可以使用以下代码：

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

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

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

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

【讨论】：

player.on('play', ()=> {console.log('play~')})

【解决方案3】：

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

【讨论】：