Я хочу, чтобы мое видео вышло в полноэкранном режиме, когда пользователь дважды щелкает по области видео, а не только когда они нажимают на маленький значок в элементах управления. Есть ли способ добавить событие или что-то, чтобы управлять тем, что происходит, когда пользователь нажимает на видео?HTML5 Video - двойной щелчок, чтобы перейти во весь экран
<video controls autoplay>
<source src="/v/foo.mp4">
</video>
Спасибо!
Возможно, вам может помочь this link, есть также много игроков HTML5/JavaScript для использования (Excemple: BuckPlayer). Удачи.
Спасибо, но я не могу найти, как заставить браузер сделать что-то, когда пользователь нажимает фактическую область, в которой находится видео. Я просто хочу, чтобы он отображался в полноэкранном режиме, когда пользователь щелкает или дважды щелкает по нему. –
Прикрепите двойной клик (dblclick) event listener к видеоролику, затем в прослушивателе requestFullScreen на видео.
Как предложил Musa прикрепить двойное событие щелчка - что-то вроде $('video').on('dblclick', callback)
element.requestFullScreen, вероятно, «правильный» способ сделать это, но поддержка браузера isn't great yet, особенно на мобильных устройствах.
Если вам не нужен полный экран в полноэкранном режиме, и достаточно заполнить браузер, вы можете применить CSS внутри обратного вызова dblclick.
Вот рабочий пример:
https://fiddle.jshell.net/AhmadMysra/57kcyhbp/4/
function makeFullScreen(divObj) {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
if (divObj.requestFullscreen) {
divObj.requestFullscreen();
} else if (divObj.msRequestFullscreen) {
divObj.msRequestFullscreen();
} else if (divObj.mozRequestFullScreen) {
divObj.mozRequestFullScreen();
} else if (divObj.webkitRequestFullscreen) {
divObj.webkitRequestFullscreen();
} else {
console.log("Fullscreen API is not supported");
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}<video controls style="border: 1px solid blue;" height="360" width="480" ondblclick="makeFullScreen(this)" src="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4">
</video>
Вы можете поэкспериментировать с этим: http://www.sitepoint.com/use-html5-full -screen-api/ – sodawillow