javascript - 在 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