легко изменять разрешение видео во время воспроизведения видео - PullRequest
Новая
       21

легко изменять разрешение видео во время воспроизведения видео

0 голосов
/ 02 марта 2019

Я пишу код, который меняет разрешение видео в зависимости от текущего размера экрана.На fullscreen button clicked я проверяю размер экрана, и если он больше 1280px, вместо 720p используется видео 1080p.

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

Как создать плавный переход между двумя разрешениями?Иногда видео на youtube или facebook меняют разрешение в зависимости от условий вашей сети, и это без проблем с точки зрения задержки.

Это мой основной код.Я использую библиотеку plyr :

html 

  <video id="main-video" playsinline poster="/assets/img/video.png" class="element-video">
     <source id="main-video-source" src="/assets/img/video.mp4" type="video/mp4" size="1080">
  </video>

js 

     var player = new Plyr('#main-video',{controls:['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'settings', 'fullscreen']});

     player.on('enterfullscreen', event => {

      var videoPlayer = document.getElementById("main-video");

      if(window.devicePixelRatio * window.innerWidth > 1280){
        var currentTime = videoPlayer.currentTime;
        videoPlayer.src = "video.mp4";
        videoPlayer.currentTime = currentTime;
        videoPlayer.play();
      }else{
        var currentTime = videoPlayer.currentTime;
        videoPlayer.src = "video-720.mp4";
        videoPlayer.currentTime = currentTime;
        videoPlayer.play();
        }
     });

1 Ответ

0 голосов
/ 04 марта 2019

Как говорит Джоэл, использование адаптивной потоковой передачи в настоящее время является самым простым подходом для получения нужного эффекта.Смотрите здесь для получения дополнительной информации о ABR и примере того, как просмотреть его в действии: https://stackoverflow.com/a/42365034/334402

Большинство клиентов видеоплеера будут поддерживать ABR и предоставят тип плавного (ish ...) перехода, который выПосмотрите на сервисы, такие как YouTube или Netflix, когда он проходит через различные разрешения.Наличие большего количества разных разрешений или «шагов» может сделать его более плавным, поэтому, возможно, стоит поэкспериментировать, чтобы найти то, что приемлемо для вашего варианта использования.

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

...