Question

所以我正在制作一个tampermonkey脚本，我想创建一个事件监听器来监听视频宽度的变化，特别是当视频全屏制作时。这就是我现在所拥有的：

var htmlVideos = document.getElementsByTagName('video');
function checkVidWidth() {
    for (i = 0; i < htmlVideos.length; i++) {
        if ($(htmlVideos[i]).width() != vidWidths[i]) {
            vidWidths[i] = $(htmlVideos[i]).width();
            checkVidChange(true);
            return;
        }
    }
}
setInterval(checkVidWidth, 3);

vidWidths是在视频的先前宽度的其他地方定义的数组。但我不想使用setInterval我想在$（htmlVideos [i]）。width（）发生变化时发生一个事件。谢谢你的帮助！

Answer 1

这些事件已经存在 - 没有必要建立自己的逻辑来实现这一点，当然也不是每3ms运行一次代码。

您可以使用fullscreenchange事件，使用jQuery：

$('video').on('fullscreenchange webkitfullscreenchange mozfullscreenchange', function(e) {
    var videoIsFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
    if (videoIsFullScreen) {
        // video is full screen, do something...    
    }
    else {
        // video was full screen, has now been restored to default size
    }
});

请注意，为了完全兼容，我还绑定了事件的webkit和moz变体。

Answer 2

您可以使用全屏更改事件来检测全屏：

$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange',

并使用调整大小来检测宽度变化

  $('#video').resize(function() {

   });

修改

调整事件 CAN 使用jquery应用于窗口以外的元素，请检查此example。

Javascript创建自定义事件

2 个答案: