Question

我在http://desertcinema.com/jheck/库的帮助下在Device.js上设置了背景视频。从本质上讲，这个库应该将背景视频更改为较小屏幕上的图像，例如平板电脑和iPhone。

到目前为止，这是我的代码：

if( !device.tablet() && !device.mobile() ) {
    
  jQuery(function(){

    jQuery("#bgndVideo").on("YTPStart", function(){ jQuery("#eventListener").html("YTPStart")});
    jQuery("#bgndVideo").on("YTPEnd", function(){ jQuery("#eventListener").html("YTPEnd")});
    jQuery("#bgndVideo").on("YTPPause", function(){ jQuery("#eventListener").html("YTPPause")});
    jQuery("#bgndVideo").on("YTPBuffering", function(){ jQuery("#eventListener").html("YTPBuffering")});

    jQuery("#bgndVideo").mb_YTPlayer();

  });

} else {

  $('#bgimg').addClass('bg-image');

}

.bg-image {
  background: url('http://koowallpapers.com/wp-content/uploads/2013/08/new-york-city-streets-background.jpg');
  background-repeat: no-repeat;
  -webkit-background-size: cover;
     -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
      background-size: cover;
  width: 100%;
  height: 100%;
  z-index: -1 !important;
  backface-visibility: hidden;
  background-position: center center;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

出于某种原因，当我调整浏览器大小时，视频仍会显示在较小的屏幕上。

如何使用上述js库在较小的屏幕上显示图像而不是视频？

Answer 1

有一种方法可以通过媒体查询来处理这个问题。

媒体查询允许您向具有屏幕大小条件的类添加一些css。

例如，你可以写：

@media (max-width : 762 px) {
   #someID{ font-size : 14px; 
               other properties : other values;
}

通过这种方式，您可以检测到视频的屏幕时间。然后你必须知道你的javascript中的属性。

因此，您只需执行以下代码：

$( document ).ready(function() {      
var is_mobile = false;


if( $('#someID').css('display')=='none') {
    is_mobile = true;       
}

if (is_mobile == true) {
    /*
    / Add the script you want for mobile devices
    */

}
});

你也可以为平板电脑做这件事。实际上，您可以在所需的精确像素上进行个性化处理，这比使用现有功能要强大得多。

在较小的屏幕上显示图像而不是视频

1 个答案: