0

我的一个客户在他的网站上有一个自动播放的媒体播放器,他根本不希望它在手机(或小于 640 像素的屏幕)上显示。

我不能只是将其设置为,display:none因为它仍然会自动播放。有没有办法使用jQuery来做到这一点?

音频播放器被包裹在一个 div 中,其类为.audio

4

5 回答 5

3

使用媒体查询隐藏它,然后在它可见的情况下启动它:

@media (max-width: 640px) {
      .audio {
         display:none;
      }
}

$( window ).load(function() {
    $('#yourplayer:visible').get(0).start();
});

这有两个优点:

  • 它将代码与大小和表示逻辑分开
  • 您可能还有其他与尺寸相关的内容,它们被隐藏/调整在同一个地方
于 2013-10-31T11:20:16.953 回答
2
$(document).ready(function () {
    if ($(window).width() < 640) {
        $('div.audio').remove();
    }
});
于 2013-10-31T11:21:27.137 回答
1

您还应该考虑 windows re 尺寸:

$(document).ready(function () {
   changeElements();

    $(window).resize(function() {
        changeElements();
    });
});

function changeElements(){    
     if ($(window).width() <= 640) {
        $('#divId').hide();
        $('#divId').get(0).pause();
    }else{
        $('#divId').show();
        $('#divId').get(0).play();
    }
}
于 2013-10-31T11:24:05.583 回答
0

确保 div 没有id

$(function() {
    if($('body').width() < 640) {
        $('div').removeClass("audio");
    }
})
于 2013-10-31T12:21:33.723 回答
0

您可以使用 enquirejs。

enquire.register("max-width: 640px", function() {
  // Remove your player here.
});
于 2013-10-31T11:25:36.020 回答