javascript - 播放视频时无缝更改视频分辨率
问题描述
我正在编写根据当前屏幕尺寸更改视频分辨率的代码。在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>
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 等服务上看到的平滑过渡类型。拥有更多不同的分辨率或“步骤”可能会使它更顺畅,因此可能值得尝试找出适合您的用例的方法。
此外,由于您已经拥有至少两个分辨率版本的视频,因此任何额外的服务器端开销对于您的情况来说都不是太大。
推荐阅读
- laravel - vue dropzone中的Vue js自定义功能
- react-native - 将数据添加到 FlatList 始终显示第一个孩子
- python - 关于选民投票率的 Python 分配问题:类、对象和函数
- reactjs - 将参数传递给 firestore 集合
- excel - 缩短单元格,嵌套 Ifs Excel
- hyperledger-fabric - 链码实例化错误 /usr/bin/ld: 找不到 -lxxx
- java - 同步 textArea.clear() 后跟 textArea.setText() 不清除文本
- ajax - 在 Laravel 中使用 Ajax 进行分页
- python - 如何编写根据距中心的距离和边数在油漆中绘制规则图形的函数?
- python - 如何在odoo中显示没有公司的联系人?