gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 12:17:47 35 4
gpt4 key购买 nike

我试图根据用户的屏幕高度分辨率显示不同的视频分辨率,我有这段代码,但我不是 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>

最佳答案

我不知道“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 Fiddle:http://jsfiddle.net/3g59yomb/

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

关于javascript - 根据屏幕分辨率加载不同的视频(html5)质量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31954262/

35 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com