HTML5 видео переопределение полноэкранного управления

Question

Возможно ли перехватить и переопределить функциональность, когда пользователь нажимает кнопку полноэкранного просмотра, встроенную в видеоплеер HTML5 по умолчанию?

Фон - у меня есть видеоплеер с пользовательским оверлеем (но не с настраиваемыми элементами управления), и мне нужно отобразить этот оверлей в полноэкранном режиме. Я могу добавить свою собственную кнопку на экран, что делает плеер полноэкранным и все еще отображает мой оверлей, но я хотел бы каким-то образом привязать эту функцию к встроенной полноэкранной кнопке в элементах управления проигрывателем, чтобы я мог использовать эти элементы управления и предоставлять полноэкранный режим поддержка. Благодаря!

Answer 1

я не был в состоянии проверить это без примера видео или аудио файл, но следующие должен позволить отслеживать fullscreenchange события и связанные с document.fullscreenElement во всех браузерах (they are all behind vendor prefixes в этой точке).

var fullscreen = getFullscreenProps(), 
 
    video = document.querySelector('video') 
 

 
console.log(fullscreen) 
 

 
document.addEventListener(fullscreen.fullscreenchange, function (event) { 
 
    var isVideoFullscreen = document[fullscreen.fullscreenElement] === video 
 
    console.log(isVideoFullscreen) 
 
}) 
 

 

 
function getFullscreenProps() { 
 
    var keys = 'fullscreenElement mozFullScreenElement msFullscreenElement webkitFullscreenElement'.split(' '), 
 
     prefixes = ' moz ms webkit'.split(' ') 
 
    for (var i = 0; i < keys.length; i++) { 
 
     if (keys[i] in document) { 
 
      return { 
 
       fullscreenElement: keys[i], 
 
       fullscreenchange: prefixes[i] + 'fullscreenchange' 
 
      } 
 
     } 
 
    } 
 
    return { 
 
     fullscreenElement: keys[0], 
 
     fullscreenchange: 'fullscreenchange' 
 
    } 
 
}

<video src="http://example.com/video.mp4" type="video/mp4" width="100" height="100"/>