seamlessly change video resolution while video is playing

Question

I am writing code that changes video resolution depending on the current screen size. On fullscreen button clicked I check screen size and if it is bigger than 1280px, a 1080p video is used instead of 720p.

I do that by changing src of the video element. Unfortunately, this causes a delay of a second or more, because the video with higher resolution needs to load first.

How can I create a seamless transition between the 2 resolutions? Sometimes youtube or facebook videos change resolution depending on your network conditions, and it is seamless in terms of delay.

This is my basic code. I use plyr library:

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();
        }
     });

Well, youtube has that configured in a manifest-file in their adaptive bitrate streaming implementation to determine what resolution you will stream at. check out: https://en.wikipedia.org/wiki/Adaptive_bitrate_streaming. You are actively loading two different files. TL;DR - **"seamless transitions will not be possible with your approach"** — Joel, Mar 02 '19 at 14:07
Do you recommend loading another video src in the background? — potato, Mar 02 '19 at 14:51
Is waiting 3s when you click on full screen acceptable in todays world? — potato, Mar 02 '19 at 15:32
limit is 250ms from [action taking place -> result] according to studies before people become irritated — Joel, Mar 02 '19 at 15:33

score 1 · Answer 1 · answered Mar 04 '19 at 12:33

As Joel says, using Adaptive Bit Rate Streaming is the easiest approach here currently to get the affect you are looking for. See here for more info on ABR and an example of how to view it in action: https://stackoverflow.com/a/42365034/334402

Most video player clients will support ABR, and will give the type of smooth(ish...) transition you see on services like YouTube or Netflix when it steps through different resolutions. Having more different resolutions or 'steps' may make it smoother so it may be worth experimenting to find what is acceptable for your use case.

Also, as you already have at least two resolution versions of the video any extra server side overhead is not too great for your case.

seamlessly change video resolution while video is playing

1 Answers1