HTML / Javascript - проблема с полноэкранным режимом видеоплеера, но не во весь экран - PullRequest
Новая
       18

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

0 голосов
/ 25 апреля 2019

У меня проблема с моим видеоплеером. Полный экран работает не полностью. вот изображение проблемы.

Изображение на весь экран не работает

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

вот мой код для видеоплеера. 

<div class="container" id='container2'>
     <video controls playsinline class="player" width="100%">
              <!-- Video files -->
              <source src="./inflightapp/storage/app/public/movie_videos/<?php echo ''.$row2['movie_video'].''; ?>" type="video/mp4" size="1080">
     </video>
</div>

вот мой код для файла js видеоплеера. 

 document.addEventListener('DOMContentLoaded', () => { 
  // This is the bare minimum JavaScript. You can opt to pass no arguments to setup.
  const player = new Plyr('.player');
  var ms = new MediaSource();

  // Expose
  window.player = player;


  window.player.onFullscreen = false; // fullscreen flag
  // override fullscreen toggle
  window.player.fullscreen.toggle = function(){
    if (window.player.onFullscreen) {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      }else if(document.webkitExitFullscreen){
        document.webkitExitFullscreen();
      }else if(document.mozCancelFullScreen){
        document.mozCancelFullScreen();
      }else if(document.msExitFullscreen){
        document.msExitFullscreen();
      }
      window.player.onFullscreen = false;
    }else{
      window.player.container = document.getElementById("container2");
      window.player.container.enterFullscreenMode = window.player.container.requestFullscreen || window.player.container.webkitEnterFullscreen || window.player.container.mozRequestFullScreen || window.player.container.msRequestFullscreen;
      window.player.container.enterFullscreenMode();
      window.player.onFullscreen = true;
    }
  }

});
...