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

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

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

Answer 7

 .jp-video video, .jp-audio, .jp-controls-holder {
        width: 100% !important;
    }
     .jp-video, .jp-video > div, .jp-video img {
       width: 100% !important;
   }

.jp-video-270p .jp-jplayer {
    max-width: 339px;
    left: 1px;
  position: relative; 
}
.jp-video.jp-video-full .jp-jplayer {
    max-width: 100% !important;
}
      .jp-video-270p {
       max-width: 345px !important;
   }

   .jp-video .jp-toggles {
    margin: -22px 0 0 6px;
}

<div id="jp_container_N" class="jp-video jp-video-270p" role="application" aria-label="media player">
    <div class="jp-type-playlist">
        <div id="jquery_jplayer_N" class="jp-jplayer"></div>

Answer 8

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