我正在编写代码,根据当前屏幕大小更改视频分辨率。在fullscreen button clicked
我检查屏幕大小,如果它大于1280px,使用1080p视频而不是720p。
我通过改变视频元素的src
来做到这一点。不幸的是,这导致延迟一秒或更长时间,因为具有更高分辨率的视频需要首先加载。
如何在2种分辨率之间创建无缝过渡?有时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();
}
});
正如Joel所说,使用自适应比特率流是目前最简单的方法,可以获得您正在寻找的效果。有关ABR的更多信息以及如何在行动中查看它的示例,请参见此处:https://stackoverflow.com/a/42365034/334402
大多数视频播放器客户端都支持ABR,并且会在您通过不同分辨率时提供您在YouTube或Netflix等服务上看到的平滑(ish ...)转换类型。拥有更多不同的分辨率或“步骤”可能会使其更加顺畅,因此可能值得尝试找出您的用例可接受的内容。
此外,由于您已经拥有至少两个视频分辨率版本,任何额外的服务器端开销都不会太大。