在移动设备上忽略 HTML5

Question

现在，我有一个背景视频，我只想在大于 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;
            }
        }
}

如有任何帮助，我们将不胜感激。

Answer 1

display: none 只会阻止视频显示，但仍会加载。在浏览器中使用元素检查器以确保发生这种情况。似乎最好的方法是使用 JavaScript.

Answer 2

只是一些 jquery 会帮助你，检查这个 fiddle。

It will check with matchMedia that the screen is bigger than 768px ,and then, if it´s bigger, will give the url for the videos. Then they´ll be loaded.

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>

Answer 3

您需要使用 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 开始播放）并且避免在小文件中完全加载文件设备。

在移动设备上忽略 HTML5

Ignore HTML5 on mobile devices

html

javascript

css

video

html5-video