在 videojs 中重写全屏

Question

我有 HTML5 个玩家使用 Videojs。我想重写全屏按钮事件来做不同的事情。

我已经尝试用 JQuery 重写点击事件并按如下所示的方式使用 preventDefault：

$('.ico.fullsc').on('click', function(event){
    event.preventDefault();
    event.stopPropagation();
    // My stuff
});

但是，除了执行我的代码外，它仍然执行全屏事件。可以吗？

非常感谢您

Answer 1

忘了 video.js 不使用 jQuery 来设置事件。我的错！

要按照您想要的方式执行此操作，您将不得不变得有点傻，将元素替换为自身的克隆。

var fullscreenButton = $('.ico.fullsc').clone();
$('.ico.fullsc').replaceWith(fullscreenButton);
fullscreenButton.on('click', //etc

.clone() 不会获取事件处理程序，但它会保留属性和内容，因此您会得到一个风格上等效的节点，但没有您不想要的事件处理程序。

还值得注意的是，您可以通过 video.js 添加和删除具有您自己的功能的 UI 元素：https://github.com/videojs/video.js/blob/stable/docs/index.md#customizing

Rewriting fullscreen in videojs