Игнорировать HTML5 на мобильных устройствах

Question

Прямо сейчас у меня есть фоновое видео, которое я хотел бы отображать только на устройствах размером более 768 пикселей (ширина). Когда вы сбрасываете браузер мимо 768px, видео исчезает, а 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; 
      } 
     } 
} 

Любая помощь будет принята с благодарностью.

Answer 1

Вы должны использовать 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(); 

Edit: При таком подходе вам не нужно иметь атрибут autoplay (он начнет играть через JS) и избежать загрузки файла целиком в небольших устройствах.

Answer 2

display: none будет препятствовать отображению видео, однако он будет загружен. Используйте инспектор элементов в своем браузере, чтобы убедиться в этом. Кажется, лучший способ - использовать JavaScript.

Answer 3

Только некоторые jquery помогут вам, проверьте эту скрипку.

Он будет проверять с matchMedia что экран больше, чем 768px, а затем, если подмигнули больше, даст URL для видео. Тогда они будут загружены.

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>