Создание html5 видео в полноэкранном режиме

Question

У меня есть custome HTML5 Video player, где на HTML-странице есть видео-тег и другой тег DIV, где я поставил элементы управления. В Control DIV есть кнопка воспроизведения, кнопка «Пауза», полноэкранная кнопка и т. Д. Теперь я пытаюсь сделать полноэкранный видеоролик нажатием кнопки полного экрана. Я написал код, использующий requestFullscreen(). Этот код не вызывает ошибок, но не работает. Может кто-нибудь, пожалуйста, скажите мне, где я иду не так?

var controls = { 
video: $("#player"), //this is the video element 
fullscreen: $("#fullscreen") //This is the fullscreen button. 
}; 

controls.fullscreen.click(function(){ 
var elem = controls.fullscreen; 
if (elem.requestFullscreen) { 
    controls.video.requestFullscreen(); 
} else if (elem.mozRequestFullScreen) { 
    controls.video.mozRequestFullScreen(); 
} else if (elem.webkitRequestFullscreen) { 
    controls.video.webkitRequestFullscreen(); 
} 
}); 

Answer 1

controls.fullscreen и controls.video как объекты JQuery, а не DOM элементы. Вы хотите, чтобы элементы внутри объектов JQuery, которые вы можете получить с .get: объекты

var controls = { 
    video: $("#player").get(0), //this is the video element 
    fullscreen: $("#fullscreen").get(0) //This is the fullscreen button. 
}; 

JQuery не имеют requestFullscreen свойство, так что никто из вашей if заявления не были запущены (и если бы они работать, video.requestFullscreen Волд провалился).