Как отключить элементы управления по умолчанию на полноэкранном видео HTML5?

Question

Как отключить элементы управления по умолчанию на полноэкранном видео HTML5?

У меня есть видео заданной ширины и высоты, двойной щелчок по которому делает его полноэкранным с помощью videoElement.webkitRequestFullScreen().
По умолчанию видео не имеет никаких элементов управления. Но по какой-то причине при переходе на полный экран всплывают элементы управления по умолчанию. Вот что я делаю:

<video id="videoId" width="320" height="240" autoplay="autoplay" ondblclick="enterFullScreen('videoId')" src="Blah.mp4"></video>

И функция enterFullScreen(...) определяется как:

function enterFullScreen(elementId) {

    var element = document.getElementById(elementId);

    element.webkitRequestFullScreen();

    element.removeAttribute("controls");

}

Как вы можете видеть, я уже пытался удалить элементы управления в функции. Но безрезультатно.

Может ли кто-нибудь сказать мне, как предотвратить это авто вставка элементов управления по умолчанию из происходящего?

1125 5

google-chrome html5 html5-video

5 ответов:

Comments

Ничего не найдено.

user1702401 · Accepted Answer · 2017-05-23 14:59:55

Это можно решить с помощью CSS, как описано здесь: HTML5 video не скрывает элементы управления в полноэкранном режиме в Chrome
video::-webkit-media-controls {
  display:none !important;
}

Vishnu · Accepted Answer · 2013-01-02 07:53:55

Наконец, я нашел способ обойти это. Как и предложил Александр Фаркас, я завернул видео в другой div и установил этот родительский div на полный экран, после чего я установил высоту и ширину видео в screen.height и screen.width соответственно. И я восстановил исходные свойства обоих дивов при выходе на полный экран.

Псевдокод:

HTML:
<div id="videoContainer" style="position:absolute;background-color:black;">
     <video id="videoId" style="height:240;width:320;" ondblclick="enterFullScreen('videoId')" src="movie.mp4"></video>
</div>
JavaScript:
function enterFullScreen(id) {
    var element = document.getElementById(id);
    element.parentNode.webkitRequestFullScreen();           
    element.style.height = screen.height;
    element.style.width = screen.width;
}
document.addEventListener("webkitfullscreenchange", function () {
    if(!document.webkitIsFullScreen) {
        // Restore CSS properties here which in this case is as follows :
        var element = document.getElementById('videoId');
        element.style.height=240;
        element.style.width=320;
    }
    }, false);

alexander farkas · Accepted Answer · 2012-12-31 22:48:14

Если видео идет полноэкранным, агент пользователя должен показать элементы управления, также если атрибут controls отсутствует.

Новые агенты пользователей также поддерживают полноэкранный API для любого элемента. Поэтому вы можете попробовать следующее:
element.parentNode.webkitRequestFullScreen();

Ankit · Accepted Answer · 2012-12-31 15:11:34

Вы можете найти идентификатор div, содержащий элементы управления, и отключить его с помощью javascript. например, если id div, содержащего элементы управления, - " controldiv" тогда в своей функции вы можете написать
var ctrls = document.getElementById("controldiv");
ctrls.disabled="true";

Ian Devlin · Accepted Answer · 2012-12-31 18:48:56

Обычно должно работать следующее:
var videoPlayer = document.getElementById('videoId');
videoPlayer.controls = false;
Но я не уверен, что переход в полноэкранный режим отменит его.