Question

我正在编写代码，以根据当前屏幕尺寸更改视频分辨率。在fullscreen button clicked上，我检查屏幕尺寸，如果屏幕尺寸大于1280px，则使用1080p视频而不是720p。

我通过更改视频元素的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();
        }
     });

Answer 1

正如Joel所说，在这里，使用自适应比特率流传输是获得所需影响的最简单方法。请参阅此处，以获取有关ABR的更多信息以及如何实际查看它的示例：https://stackoverflow.com/a/42365034/334402

大多数视频播放器客户端都支持ABR，并且会提供您在YouTube或Netflix等服务上通过不同分辨率时看到的平滑过渡（ish ...）的类型。具有更多不同的分辨率或“步骤”可能会使其更平滑，因此值得尝试以找到适合您的用例的东西。

另外，由于您已经拥有至少两个分辨率的视频版本，因此服务器端的额外开销对于您的情况而言也不算太大。

播放视频时无缝更改视频分辨率

1 个答案: