防止视频在移动设备上加载

Question

我不想在 480 像素以下加载一个视频，因为这会降低页面速度。

HTML 是：-

    <div class="main-vid">
    <video autoplay loop muted playsinline id="myVideo" width="100%" height="100%">
            <source src="/video/home.mp4" type="video/mp4">
            Your browser does not support HTML5 video.
    </video>

我尝试了以下 JQuery 但视频仍在加载中：-

if ( $(window).width() > 480) {      

} 
else {
  $('video').hide();
}

有人有什么想法吗？

谢谢。

Answer 1

我建议在宽度大于 480 时设置视频 src，对于宽度小于 480 的设备unset/clear src。

if ( $(window).width() > 480) { 
       $('#myVideo source').attr('src','video/mp4');
       $('#myVideo').get(0).load();
       $('#myVideo').get(0).play(); 
} 
else { 
    $('#myVideo source').attr('src',''); 
  }

Link 工作 fiddle: http://jsfiddle.net/ut1faksr/2/

防止视频在移动设备上加载

Prevent video being loaded on mobile device

html

video

jquery

responsive