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

【问题标题】：seamlessly change video resolution while video is playing播放视频时无缝更改视频分辨率
【发布时间】：2019-03-04 20:33:29
【问题描述】：

我正在编写根据当前屏幕尺寸更改视频分辨率的代码。在fullscreen button clicked 我检查屏幕尺寸，如果它大于 1280 像素，则使用 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>

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

【问题讨论】：

好吧，youtube 已在其自适应比特率流实现中的清单文件中进行了配置，以确定您将以何种分辨率流式传输。退房：en.wikipedia.org/wiki/Adaptive_bitrate_streaming。您正在积极加载两个不同的文件。 TL;DR - “你的方法不可能实现无缝过渡”
您是否建议在后台加载另一个视频 src？
不 - 原因很明显
当今世界可以接受全屏点击等待3s吗？
在人们变得烦躁之前的研究表明，从 [动作发生 -> 结果] 开始的时间限制为 250 毫秒

标签： javascript html video plyr

【解决方案1】：

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

大多数视频播放器客户端都将支持 ABR，并在逐步通过不同分辨率时提供您在 YouTube 或 Netflix 等服务上看到的平滑过渡类型。拥有更多不同的分辨率或“步骤”可能会使它更顺畅，因此可能值得尝试找出适合您的用例的方法。

此外，由于您已经拥有至少两个分辨率版本的视频，因此任何额外的服务器端开销对于您的情况来说都不是太大。

【讨论】：