Loading different video (html5) quality according to screen resolution

[亡魂溺海] 提交于 2021-01-28 18:56:27

问题


Im trying to display different video resolution according to the users screen height resolution, i have this code but im not an expert with javascript. It's supposed to change the src attribute, if the res is lower o equal to 360px height, and so on. Any suggestions?

<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>

回答1:


I don't know about "text/rocketscript" (something to do with Wordpress and/or CloudFlare?), but this Javascript works:

<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>

Sorry, I can't get it to work as a snippet, JS Fiddle here instead: http://jsfiddle.net/3g59yomb/

Note that it loads a high-res video (on my system with a 2560 x 1440 screen) even though my browser window is much smaller, and the JS Fiddle frame even smaller still. That may or may not be a bug! But it does load a video.



来源:https://stackoverflow.com/questions/31954262/loading-different-video-html5-quality-according-to-screen-resolution

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!