现在,我有一个背景视频,我只想在大于 768 像素(宽度)的设备上显示。当您将浏览器折叠超过 768 像素时,视频将消失,视频的 poster.jpg 将显示为背景。
使用简单的 CSS 一切正常,但视频仍在移动设备上加载,即使它没有显示。
这是我正在使用的 HTML:
<div id="video_container">
<video id="video-bg" autoplay loop muted data-wow-duration="2s">
<source src="/video/bg.webm" type="video/webm">
<source src="/video/bg.mp4" type="video/mp4">
<source src="/video/bg.ogg" type="video/ogg">
</video>
</div>
还有 SCSS:
#video_container{
background-size: cover;
position:relative;
z-index:-1;
background: #000 (/video/poster.jpg) no-repeat;
width:100%;
height:100%;
display:block;
background-position:center center;
overflow:hidden;
#video-bg {
position: relative;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
z-index: -100;
display:none;
@media(min-width: 768px){
display:block;
}
}
}
如有任何帮助,我们将不胜感激。
最佳答案
每当屏幕调整大小时,您都需要使用 JavaScript 来播放和暂停视频。
// Create a function that gets the width of the screen
// and plays or pauses the video depending its value
var handleVideo = function () {
var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
if(width > 768) {
document.getElementById('video-bg').play();
}
else {
document.getElementById('video-bg').pause();
}
};
// Bind this function to the resize event
// and also call it to execute on first load
window.addEventListener('resize', handleVideo, false);
handleVideo();
编辑:使用这种方法,您不需要autoplay
属性(它将通过 JS 开始播放)并避免在小型设备中完全加载文件。
关于javascript - 在移动设备上忽略 HTML5,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30850579/