Question

有没有办法使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 */
}

但它不起作用。

有人可以帮忙吗？

谢谢！

Answer 1

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

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

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

Answer 2

我使用以下内容使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;
   }
}

Answer 3

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

Answer 4

您需要将包装纸的宽度设为100％，并将最大宽度设为限制。

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

在制作元素时，我通常不会指定高度。希望这有帮助

Answer 5

这就是你要找的东西

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

Answer 6

仅凭我的工作创造了一个要点： reference manual

Answer 7

这是一种让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％，这是高清视频高度的值。对于音频，您需要将其缩小，除非您想要显示海报图像。我希望这有帮助吗？

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

7 个答案: