Попытка сделать видео go на весь экран, используя Javascript - PullRequest
Новая
       1

Попытка сделать видео go на весь экран, используя Javascript

0 голосов
/ 11 апреля 2020

У меня есть страница с видео-миниатюрами. При нажатии на видео открывается файл video.html и передается путь к нему.

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

Это содержимое video.html

<body>

<script>
window.onload=function() {
  let videoDiv = createVideoDiv()

  if (videoDiv.requestFullscreen) {
    videoDiv.requestFullscreen();
  }
  else if (videoDiv.mozRequestFullScreen) {
    videoDiv.mozRequestFullScreen();
  }
  else if (videoDiv.webkitRequestFullScreen) {
    videoDiv.webkitRequestFullScreen();
  }
  else if (videoDiv.msRequestFullscreen) {
    videoDiv.msRequestFullscreen();
  }

  document.getElementById("myVideo").appendChild(videoDiv);
}
</script>

<div id="myVideo"></div> 

</body>

это createVideoDiv(): 

function createVideoDiv() {  
  var video = document.createElement("VIDEO");
  video.setAttribute('controls', '');
  video.setAttribute('autoplay', '');
  video.setAttribute('width', '100%');

  var source = document.createElement("SOURCE");
  source.setAttribute('src', getClickedVideo());
  source.setAttribute('type', 'video/mp4');

  video.appendChild(source);

  return video;
}

и это css: 

#contentVideo:fullscreen {
  width:100vw;
  height:100vh;
}

Страница открывается, видео воспроизводится автоматически, заполняет всю внутреннюю часть браузера. Я все еще вижу браузер.

Как мне это сделать?

Ответы [ 2 ]

0 голосов
/ 11 апреля 2020

Как указано F.NiX, попробуйте добавитьEventListener в окно, когда пользователь нажимает или нажимает кнопку или какое-либо другое событие пользовательского ввода. Затем внутри обратного вызова просто вызовите element.requestFullscreen () для элемента DOM, который вы хотите go в полноэкранном режиме. Вы можете обратиться к этой странице для получения подробной информации: Документы полноэкранного API MDN

Например, когда пользователь щелкает где-то на странице, элемент будет go в полноэкранном режиме. 

window.addEventListener('mousedown', ()=>element.requestFullscreen(), {once:true});

Я добавил {once:true} просто, чтобы удалить слушателя, как только он вызывается, чтобы он не замедлял страницу. Вы можете удалить его, если хотите.

0 голосов
/ 11 апреля 2020

Чтобы перейти в полноэкранный режим, нужно выполнить одно действие пользователя, щелкнуть, коснуться или пр. c. Конечно, он имеет код JS, но не запускается автоматически при загрузке страниц, потому что браузер предотвращает это, если пользователь ничего не делает. Это хорошая и, возможно, необходимая функция, позволяющая остановить раздражающую рекламу рекламу.

Итак, просто сделайте кнопку или еще что-нибудь и назначьте свою функцию в качестве обработчика onclick.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...