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

Posted 2023-05-07

【中文标题】捕获和处理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");
;

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

【参考方案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]