我有一个有视频背景的网站。但是,它不会在 ios 设备上显示。(不确定它是否也会在 Android 上显示。)现在我想像这样更改加载方法:
如果设备不是媒体(宽度 >700),则渲染(div part=video.html),否则网站只渲染 novideo.html(背景图片)。
这个 div 位于索引页的中间部分。
这是一个video example
顺便说一句,这只是一个简单的网站,没有建立在任何框架之上。我也更喜欢使用 javascript 而不是 jquery。我该怎么做?谢谢!
答案 0 :(得分:1)
HTML:您可以在包含的 div 中同时包含视频和图像。像这样:
<div class = "media">
<img id = "image"/>
<video id = "video"></video>
</div>
JavaScript:
function myFunction(x) {
if (x.matches) { // If media query matches
document.getElementById("image").style.display = "block";
document.getElementById("video").style.display = "none";
} else {
document.getElementById("video").style.display = "block";
document.getElementById("image").style.display = "none";
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes