JPlayer - 如何使音频播放器响应？答案

【问题标题】：JPlayer - How to make the audio player responsive?JPlayer - 如何使音频播放器响应？
【发布时间】：2013-12-29 09:21:00
【问题描述】：

有没有办法让 jplayer 响应？就是这个皮肤： http://jplayer.org/latest/demo-01-supplied-mp3/?theme=0

我想使用宽度百分比来缩放整个播放器。我尝试使用包装器：

.wrapper {

max-width: 100%;
height: auto;
width: 100%\0/; /* IE8 hack for max-width */
}

但它不起作用。

有人可以帮忙吗？

谢谢！

【问题讨论】：

标签： jquery responsive-design jplayer

【解决方案1】：

我今天遇到了这个 jplayer 响应式设计，它可能会为您指明正确的方向：

演示： http://www.beyondhyper.com/jplayer/

GitHub： https://github.com/BeyondHyper/responsive-jPlayer

【讨论】：

【解决方案2】：

您指定的播放器在其容器 div.jp-audio 上设置了静态宽度。它设置为 420 像素。尝试更改该值或将其注释掉。我认为这就是你要找的。如果没有，请告诉我。

【讨论】：

有没有人得到这个工作我用包装器尝试了上述建议，但没有高兴，我已经为播放器设置了 80% 的宽度，但是当在 320 手机上查看进度和一些控件在框外

【解决方案3】：

您需要将包装器的宽度设置为 100%，并将最大宽度设置为您想要限制的任何值。

.wrapper {
max-width: 420px;
width:100%;
}

在使元素具有响应性时，我通常不指定高度。希望这会有所帮助

【讨论】：

不，这行不通。正如德里克所说，播放器中有静态宽度。恐怕除了让所有静态元素都灵活（给它们 % 值）之外别无他法。我一直在寻找一种“包装器”解决方案，它可以使用其中的所有静态元素来缩放整个播放器，但我认为没有这样的解决方案......
这个问题暗示你正在制作一个完全响应的 jplayer，所以我只是假设包装器中的其余元素将被相应地设置样式。当然，里面的一切都必须调整。
我现在实际上正在构建一个响应式 jplayer。完成后我会在某个地方发布。绝对有可能，jplayer 实在是太繁琐的 css 了。

【解决方案4】：

我使用以下内容使 jplayer 响应。 Jplayer 将样式标签直接添加到 HTML，因此您需要使用 !important。

我仍然在响应式视频方面遇到问题，因为 jquery 在按下播放之前将视频高度和宽度设置为零，如果您在 CSS 中将视频高度设置为自动，它将在视频顶部显示海报第一次加载。不过，这应该适用于音频

@media screen and (max-width: 500px) {

    /* jplayer */
    .jp-video video, .jp-audio, .jp-controls-holder {
        width: 100% !important;
    }

   .jp-video, .jp-video > div, .jp-video img {
       height: auto !important;
       width: 100% !important;
   }

   .jp-video-360p {
       max-width: 570px !important;
   }

   .jp-video-270p {
       max-width: 480px !important;
   }

   .jp-progress {
       width: 130px;
   }
}

【讨论】：

【解决方案5】：

这是一种让 JWplayer 5 响应的方法，它适用于视频，但也适用于音频。 http://www.miracletutorials.com/how-to-make-jw-player-5-10-responsive/

基本上，您需要做的是设置 2 个包装 div：

   <div style='position:relative;width:100%;height:100%;padding-bottom:56.25%;'>
   <div style='position:absolute;width:100%;height:100%;'>
embedding code...
    </div>
    </div>

然后将播放器嵌入代码的宽度和高度设置为100% 在第一行，您会看到 padding-bottom:56.25%，这是一个高清视频的高度值。对于音频，除非您想显示海报图像，否则您需要将其缩小很多。我希望这会有所帮助？

【讨论】：

JWPlayer 不是 JPlayer。
感谢您指出这一点。我确实认为这是关于 JWplayer 的。不过还是值得一试的，一分钟就知道了。

【解决方案6】：

这就是你要找的东西

@media screen and (min-width: 1024px)
#wrapper {
width: 65%;
float: left;
margin: 30px auto auto;

【讨论】：

【解决方案7】：

刚刚用我的作品创建了一个要点： https://gist.github.com/ishahak/d76d46ce1423f86982366ac325f5b59d

【讨论】：