Как я могу определить, является ли видео полноэкранным, используя JS / JQuery? - PullRequest
Новая
       31

Как я могу определить, является ли видео полноэкранным, используя JS / JQuery?

1 голос
/ 19 марта 2020

Я искал повсюду, и я еще не нашел что-то достаточно ясное.

(Обратите внимание, что большинство ответов там настолько устарели, что я считаю, что должен быть лучший способ. )

Я пытаюсь сделать следующее:

  1. При входе в полноэкранный режим теги <video> не включаются.
  2. При выходе из полноэкранного режима , <video> теги отключены.

Пожалуйста, поймите, у меня есть несколько тегов <video> на одной странице, и они генерируются динамически.

Что было бы идеально, так это JS / JQuery событие , которое прослушивает все теги <video> для событий, и если режим экрана изменяется, он переключает режим отключения звука .

Представьте, что мои видео-теги: 

<video class="img-fluid mx-auto d-block rounded " src="something.mp4" controls muted loop alt="Article Video">
<video class="img-fluid mx-auto d-block rounded " src="something-else.mp4" controls muted loop alt="Article Video">

JQuery для переключения Я считаю, что-то вроде этого: 

var video = $('.some-video-class');
video.muted = !video.muted;

Но я нигде не могу найти, как для прослушивания событий на весь экран, я полагаю, это было бы что-то вроде этого: 

video.addEventListener('webkitfullscreenchange', function(video){
    var video = $('.some-video-class');
    video.muted = !video.muted;
});

Если бы кто-то мог мне помочь и выяснить, что я делаю неправильно, это было бы очень признательно.

Обратите внимание, что я использую Bootstrap 4.3.1 и JQuery 3.4.1

1 Ответ

1 голос
/ 19 марта 2020

Чтобы это работало, вам нужно прослушать событие fullscreenchange (включая указанные * поставщика версии c). Затем вы можете использовать свойство document.fullscreenElement, чтобы определить, какое видео в данный момент является полноэкранным, и соответствующим образом изменить свойство muted. Попробуйте это: 

$('video').on('fullscreenchange webkitfullscreenchange mozfullscreenchange', function() {
  this.muted = document.fullscreenElement !== this;
});

Это будет работать для любого элемента video, который есть на вашей странице.

Вот рабочий пример jsFiddle , который требуется поскольку ТАК фрагменты запрещают полноэкранное видео.

...