根据屏幕分辨率加载不同的视频(html5)质量 [英] Loading different video (html5) quality according to screen resolution

问题描述

我试图根据用户的屏幕高度分辨率显示不同的视频分辨率，我有这个代码，但我不是 JavaScript 专家.它应该更改 src 属性，如果 res 小于等于 360px 高度，依此类推.有什么建议吗?

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>

推荐答案

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

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>

抱歉，我不能让它作为一个片段工作，而是在这里使用 JS Fiddle:http://jsfiddle.net/3g59yomb/

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

请注意，它会加载高分辨率视频(在我的系统上使用 2560 x 1440 屏幕)，即使我的浏览器窗口小得多，并且 JS Fiddle 框架甚至更小.这可能是也可能不是错误！但它确实加载了视频.

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.

这篇关于根据屏幕分辨率加载不同的视频(html5)质量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！