时间戳

首页 > 解决方案 > 防止在移动设备上加载视频

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

问题描述

我不想将视频加载到 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();
}

有人有想法么？

谢谢你。

标签： jqueryhtmlvideoresponsive

解决方案

我建议src在宽度大于 480 时设置视频，并为小于 480src的设备取消设置/清除。

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/

推荐阅读