[英]Ignore HTML5 on mobile devices
現在,我有一個背景視頻,我只想在大於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;
}
}
}
任何幫助將不勝感激。
display: none
只會阻止視頻的顯示,但仍會加載。 在瀏覽器中使用元素檢查器,以確保發生這種情況。 似乎最好的方法是使用JavaScript。
每當屏幕調整大小時,您都需要使用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開始播放),並且避免完全在小型設備中加載文件。
只是一些jQuery會幫助您,請檢查此小提琴。
它將使用
matchMedia
檢查屏幕是否大於matchMedia
,如果屏幕大於matchMedia
,則將提供視頻的網址。 然后將它們加載。
var mq = window.matchMedia("(min-width: 768px)"); if (mq.matches) { $("#source1").attr("src", "http://techslides.com/demos/sample-videos/small.ogv"); $("#source2").attr("src", "http://techslides.com/demos/sample-videos/small.ogv"); $("#source3").attr("src", "http://techslides.com/demos/sample-videos/small.ogv"); } else { alert("LITTLE SCREEN"); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="video_container"> <video id="video-bg" autoplay loop muted class="wow fadeIn" data-wow-duration="2s"> <source id="source1" src="" type="video/webm"> <source id="source2" src="" type="video/mp4"> <source id="source3" src="" type="video/ogg"> </video> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.