Question

我有一个我不想加载低于480px的视频，因为这会降低页面速度。

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的设备取消设置/清除src。

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

链接到工作提琴：http://jsfiddle.net/ut1faksr/2/

防止将视频加载到移动设备上

1 个答案: