title: seamlessly change video resolution while video is playing
body: <p>I am writing code that changes video resolution depending on the current screen size. On <code>fullscreen button clicked</code> I check screen size and if it is bigger than 1280px, a 1080p video is used instead of 720p.</p>
  
  <p>I do that by changing <code>src</code> of the video element. Unfortunately, this causes a delay of a second or more, because the video with higher resolution needs to load first. </p>
  
  <p>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.</p>
  
  <p>This is my basic code. I use <a href="https://github.com/sampotts/plyr" rel="nofollow noreferrer">plyr</a> library:</p>
  
  <p>html</p>
  
  <pre><code>  &lt;video id="main-video" playsinline poster="/assets/img/video.png" class="element-video"&gt;
       &lt;source id="main-video-source" src="/assets/img/video.mp4" type="video/mp4" size="1080"&gt;
    &lt;/video&gt;
  </code></pre>
  
  <p>js</p>
  
  <pre><code>     var player = new Plyr('#main-video',{controls:['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'settings', 'fullscreen']});
  
       player.on('enterfullscreen', event =&gt; {
  
        var videoPlayer = document.getElementById("main-video");
  
        if(window.devicePixelRatio * window.innerWidth &gt; 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();
          }
       });
  </code></pre>