как открыть HTML 5 видео в полноэкранном режиме, если он был полноэкранным ранее

Question

Я смотрю серию видео на сайте, организованном в плейлист.Каждое видео длится около 2 минут.

Веб-сайт использует видеоплеер HTML 5 и поддерживает автоматическое воспроизведение.Это означает, что каждый раз, когда видео заканчивается, следующее видео загружается и автоматически воспроизводится, что замечательно.

Однако в полноэкранном режиме, даже если я ранее полноэкранный видео, когда следующее видео загружается в список воспроизведения,экран возвращается к нормальному состоянию, и мне нужно снова нажать кнопку полноэкранного режима ....

Я попытался написать простое расширение javascript с помощью Tampermonkey для автоматической загрузки полноэкранного видео.

$(document).ready(function() {
  function makefull() {
    var vid = $('video')[0]
    if (vid.requestFullscreen) {
      vid.requestFullscreen();
    } else if (vid.mozRequestFullScreen) {
      vid.mozRequestFullScreen();
    } else if (vid.webkitRequestFullscreen) {
      vid.webkitRequestFullscreen();
    }

    //var vid = $('button.vjs-fullscreen-control').click();

  }

  makefull()

Но я получаю эту ошибку:

Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

Очень раздражает необходимость вручную нажимать на весь экран после каждых 2 минут видео.Есть ли способ, которым я могу достичь этого в моем собственном браузере?Я использую Chrome.

Answer 1

Если вы можете получить список URL-адресов, то вы можете создать свой собственный список воспроизведения.Код не может быть точно проверен в перекрестном источнике <iframe>, например, в plnkr.co .Код может быть проверен на console в этот самый document.Для проверки кода вы можете использовать переменную urls в MediaFragmentRecorder и заменить событие "pause" на "ended" событие в .addEventListener().

Если вы не можете контролироватьHTML или JavaScript, используемые на сайте, не уверены, как предоставить какой-либо код, который сможет решить запрос.

    const video = document.createElement("video");
    video.controls = true;
    video.autoplay = true;
    const urls = [
      {
        src: "/path/to/video/"
      }, {
        src: "/path/to/video/"
      }
    ];

    (async() => {

      try {
        video.requestFullscreen = video.requestFullscreen 
                            || video.mozRequestFullscreen 
                            || video.webkitRequestFullscreen;
        let fullScreen = await video.requestFullscreen().catch(e => {throw e});
        console.log(fullScreen);
      } catch (e) {
          console.error(e.message)
      }

      for (const {src} of urls) {                             
        await new Promise(resolve => {
          video.addEventListener("canplay", e => {
            video.load();
            video.play();
          }, {
            once: true
          });

          video.addEventListener("ended", resolve, {
            once: true
          });
          video.src = src;
        });

      }
    })();