Javascript Create Custom Event

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

Эти события уже существуют - вам не нужно создавать свою собственную логику для достижения этой цели, и, конечно же, не запускать свой код каждые 3 мс.

Вы можете использовать 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 и Мос вариации события для полной совместимости.

Answer 2

Вы можете использовать полноэкранное событие изменения для обнаружения в полноэкранном режиме:

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

и использовать размер EVET обнаружить изменение ширины

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

    }); 

EDIT

Resize событие МОЖЕТ быть применены на элементах, отличных от окна, используя jquery, проверьте это example.