根據屏幕分辨率加載不同的視頻（html5）質量

Question

我試圖根據用戶屏幕高度分辨率顯示不同的視頻分辨率，我有此代碼，但我不是JavaScript專家。 如果res小於等於360px的高度，則應該更改src屬性，依此類推。 有什么建議么？

 <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

我不知道“文本/火箭腳本”（與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 Fiddle框架甚至更小。 那可能不是bug！ 但是它確實加載了視頻。