Выход из полноэкранного режима с тегом видео HTML5

Я пытаюсь заставить видео выходить из полноэкранного режима в конце видео, но это не так. Я искал и нашел способы сделать это, но для жизни я не могу заставить его работать. Я тестирую последнюю версию Chrome (15) и iOS 5 на iPad2. Вот код, который я использую:

<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(document).ready(function(){
  $("#myVideoTag").on('ended', function(){
    webkitExitFullScreen();
  });
});

</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>854x480</title>
</head>
<body>
<video  width="854" height="480"
        src="video/854x480-Template_1.mp4"
        poster="images/poster.jpg"
        id="myVideoTag"
        type="video/mp4"
        preload="auto"
        autobuffer
        controls>
  <p>Requires HTML5 capable browser.</p>
</video>

</body>
</html>

Любая помощь будет оценена.


ipad jquery html5-video exit fullscreen
person ShockTower    schedule 17.11.2011    source источник

Ответы (3)


arrow_upward
16
arrow_downward

webkitExitFullScreen — это метод элемента video, поэтому его нужно вызывать так:

videoElement.webkitExitFullscreen();
//or
$("#myVideoTag")[0].webkitExitFullscreen();
//or, without needing jQuery
document.getElementsById('myVideoTag').webkitExitFullscreen();

Поскольку это внутри обработчика событий, this будет video чем ended, поэтому:

$("#myVideoTag").on('ended', function(){
  this.webkitExitFullscreen();
});

Это становится немного сложнее, потому что webkitExitFullscreen работает только в браузерах на основе webkit (Safari, Chrome, Opera), поэтому вы можете узнать больше о его правильном использовании на MDN

person cbaigorri    schedule 18.11.2011
comment
Спасибо cbaigorri. Вот оно! Спасибо за помощь. - person ShockTower; 19.11.2011
comment
Остерегаться! Имя функции webkitExitFullscreen не webkitExitFullScreen (обратите внимание на строчные буквы s) - person Svilen Ivanov; 23.10.2014
comment
Никто не должен голосовать за ответ, состоящий только из webkit. Обновите свой ответ, чтобы включить поддержку всех браузеров. Разработчики, поддерживающие только один движок рендеринга, НЕ вообще не являются разработчиками! - person John; 14.02.2017

arrow_upward
9
arrow_downward

Я знаю, что на этот вопрос уже дан ответ, но вот небольшой фрагмент кода, который я использовал для закрытия полноэкранного видео во всех браузерах после его окончания.

Пока работает в Chrome, IE11, Firefox:

$("#myVideoTag").on('ended', function(){
    if (document.exitFullscreen) {
        document.exitFullscreen(); // Standard
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen(); // Blink
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen(); // Gecko
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen(); // Old IE
    }
});

Вы также можете найти текущий полноэкранный элемент (если есть), например:

  var fullscreenElement = document.fullscreenElement || 
   document.mozFullScreenElement || document.webkitFullscreenElement;

Источник: https://www.sitepoint.com/use-html5-full-screen-api/

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

person elzaer    schedule 31.07.2017

arrow_upward
2
arrow_downward

Спасибо, cbaigorri, прекрасно сработало использование .webkitExitFullscreen();

Я использовал следующее, чтобы выйти из полноэкранного режима, когда видео закончило воспроизведение:

<script type="text/javascript">
function CloseVideo() {
    document.getElementsByTagName('video')[0].webkitExitFullscreen();
}
</script>

<video controls onended=CloseVideo() >
    <source src="video.mp4" type="video/mp4">
</video>
person Keithasaurus Rex    schedule 28.06.2013