Загрузка различного видео (html5) в соответствии с разрешением экрана

Question

Im пытается отобразить разное разрешение видео в соответствии с разрешением экрана для экрана пользователя, у меня есть этот код, но я не эксперт с javascript. Предполагается изменить атрибут src, если res меньше o, равного высоте 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>

Answer 1

Я не знаю, о "текст/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 Fiddle здесь: http://jsfiddle.net/3g59yomb/

Обратите внимание, что он загружает видео с высоким разрешением (в моей системе с экраном 2560 x 1440), хотя мое окно браузера намного меньше, а кадр JS Fiddle еще меньше. Это может быть или не быть ошибкой! Но он загружает видео.