Выход из полноэкранного режима с тегом HTML5 Video - PullRequest
Новая
       32

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

9 голосов
/ 18 ноября 2011

Я пытаюсь заставить видео выйти в полноэкранном режиме в конце видео, но это не так. Я искал и нашел способы сделать это, но ради жизни я не могу заставить его работать. Я тестирую последнюю версию 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>

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

Ответы [ 3 ]

16 голосов
/ 19 ноября 2011

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

5 голосов
/ 01 августа 2017

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

Пока работает в 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/

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

2 голосов
/ 28 июня 2013

Спасибо, 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>
...