根据屏幕分辨率加载不同的视频(html5)质量

Loading different video (html5) quality according to screen resolution

本文关键字：的视频 html5 质量 屏幕 分辨率 加载      更新时间：2023-09-26

我试图根据用户屏幕高度分辨率显示不同的视频分辨率，我有这个代码，但我不是javascript专家。它应该改变src属性，如果分辨率较低或者等于360px高度，等等。有什么建议吗?

<script type="text/rocketscript">
var v = new Array();
v[0] = ["https://dl.dropboxusercontent.com/u/51626189/nli-vids/intro/intro-360_x264.mp4"];
v[1] = ["https://dl.dropboxusercontent.com/u/51626189/nli-vids/intro/intro-480_x264.mp4"];
v[2] = ["https://dl.dropboxusercontent.com/u/51626189/nli-vids/intro/intro-720_x264.mp4"];
v[3] = ["https://dl.dropboxusercontent.com/u/51626189/nli-vids/intro/intro-1080_x264.mp4"];
function changeVid(n){
    var video = document.getElementById('video');
if (screen.height<=360) {video.setAttribute("src", v[n][0]);}
else if (screen.height<=480) {video.setAttribute("src", v[n][1]);}
else if (screen.height<=720) {video.setAttribute("src", v[n][2]);}
else if (screen.height<=768) {video.setAttribute("src", v[n][2]);}
else if (screen.height<=1080) {video.setAttribute("src", v[n][3]);}
else if (screen.width>=1920) {video.setAttribute("src", v[n][3]);}
video.load();}
</script>
<video id="video" autoplay preload src="#">
</video>

我不知道关于"text/rocketscript"(与Wordpress和/或CloudFlare有关?)，但这个Javascript工作:

<script type="text/javascript">
var v = new Array();
v[0] = "https://dl.dropboxusercontent.com/u/51626189/nli-vids/intro/intro-360_x264.mp4";
v[1] = "https://dl.dropboxusercontent.com/u/51626189/nli-vids/intro/intro-480_x264.mp4";
v[2] = "https://dl.dropboxusercontent.com/u/51626189/nli-vids/intro/intro-720_x264.mp4";
v[3] = "https://dl.dropboxusercontent.com/u/51626189/nli-vids/intro/intro-1080_x264.mp4";
function changeVid() {
    var video = document.getElementById('video');
    if (screen.height <= 360) video.setAttribute("src", v[0]);
    else if (screen.height <= 480) video.setAttribute("src", v[1]);
    else if (screen.height <= 768) video.setAttribute("src", v[2]);
    else video.setAttribute("src", v[3]);
    video.load();
}
changeVid();
</script>

对不起，我不能让它作为一个片段工作，JS提琴在这里代替:http://jsfiddle.net/3g59yomb/

请注意，它加载了一个高分辨率的视频(在我的系统上有一个2560 x 1440屏幕)，即使我的浏览器窗口小得多，JS小提琴帧甚至更小。这可能是个bug，也可能不是!但是它会加载视频

相关文章：