菜鸟教程小白 发表于 2022-12-12 23:39:28

android - Jplayer 播放列表无法在 Android 或 iOS 中使用


                                            <p><p>我的 Jplayer 实现似乎可以在任何地方工作，但在移动设备和平板电脑上，基本上是 Android 和 iOS。在 Android 上打开时，播放列表播放按钮被禁用，歌曲链接不可点击。</p>

<p>这是我的脚本:</p>

<pre><code>$(document).ready(function () {

var myPlaylist = new jPlayerPlaylist({
    jPlayer: &#34;#jquery_jplayer_1&#34;,
    cssSelectorAncestor: &#34;#jp_container_1&#34;
}, [
      {
            title: &#34;Commerical&#34;,
            mp3: &#34;/content/audio/commercial.mp3&#34;
      },
      {
            title: &#34;Characters&#34;,
            mp3: &#34;/content/audio/characters.mp3&#34;
      },
      {
            title: &#34;Attitude&#34;,
            mp3: &#34;/content/audio/attitude.mp3&#34;
      },
      {
            title: &#34;Business&#34;,
            mp3: &#34;/content/audio/business.mp3&#34;
      },
      {
            title: &#34;Narrator&#34;,
            mp3: &#34;/content/audio/narrator.mp3&#34;
      },
      {
            title: &#34;Younger&#34;,
            mp3: &#34;/content/audio/younger.mp3&#34;
      },
      {
            title: &#34;Guy Next Door&#34;,
            mp3: &#34;/content/audio/guy-next-door.mp3&#34;
      },
      {
            title: &#34;English/British Accent&#34;,
            mp3: &#34;/content/audio/english-accent.mp3&#34;
      },
      {
            title: &#34;Movie Trailers&#34;,
            mp3: &#34;/content/audio/movie-trailers.mp3&#34;
      },
      {
            title: &#34;Smooth&#34;,
            mp3: &#34;/content/audio/smooth.mp3&#34;
      },
      {
            title: &#34;High Energy&#34;,
            mp3: &#34;/content/audio/stadium-announcing.mp3&#34;
      },
      {
            title: &#34;Phone System&#34;,
            mp3: &#34;/content/audio/phone-system.mp3&#34;
      },
      {
            title: &#34;Sam Elliot&#34;,
            mp3: &#34;/content/audio/sam-elliot.mp3&#34;
      },
      {
            title: &#34;Stadium Announcing&#34;,
            mp3: &#34;/content/audio/stadium-announcing.mp3&#34;
      },
      {
            title: &#34;Cops and Detectives&#34;,
            mp3: &#34;/content/audio/cops-and-detectives.mp3&#34;
      }
],
    {
      swfPath: &#34;js&#34;,
      solution: &#34;html,flash&#34;,
      supplied: &#34;mp3&#34;,
      wmode: &#34;window&#34;,
      smoothPlayBar: true,
      keyEnabled: true
});
$(&#34;#jquery_jplayer_1&#34;).bind(jQuery.jPlayer.event.play, function (event) {

    var current = myPlaylist.current,
    playlist = myPlaylist.playlist;
    jQuery.each(playlist, function (index, obj) {
      if (index == current) {
            $(&#39;.audio.active&#39;).removeClass(&#39;active&#39;);
            $(&#39;.audio&#39;).hide();
            var audio = $(&#39;.audio&#39;).get(current);
            $(audio).fadeIn(&#39;slow&#39;);
            return false;

      }
    });
});
});
</code></pre>

<p>还有html:</p>

<pre><code>&lt;div id=&#34;jquery_jplayer_1&#34; class=&#34;jp-jplayer&#34;&gt;&lt;/div&gt;

    &lt;div id=&#34;jp_container_1&#34; class=&#34;jp-audio&#34; style=&#34;float:left;&#34;&gt;
      &lt;div class=&#34;jp-type-playlist&#34;&gt;
            &lt;div class=&#34;jp-gui jp-interface&#34;&gt;
                &lt;ul class=&#34;jp-controls&#34;&gt;
                  &lt;li&gt;&lt;a href=&#34;javascript:;&#34; class=&#34;jp-previous&#34; tabindex=&#34;1&#34;&gt;previous&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&#34;javascript:;&#34; class=&#34;jp-play&#34; tabindex=&#34;1&#34;&gt;play&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&#34;javascript:;&#34; class=&#34;jp-pause&#34; tabindex=&#34;1&#34;&gt;pause&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&#34;javascript:;&#34; class=&#34;jp-next&#34; tabindex=&#34;1&#34;&gt;next&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&#34;javascript:;&#34; class=&#34;jp-stop&#34; tabindex=&#34;1&#34;&gt;stop&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&#34;javascript:;&#34; class=&#34;jp-mute&#34; tabindex=&#34;1&#34; title=&#34;mute&#34;&gt;mute&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&#34;javascript:;&#34; class=&#34;jp-unmute&#34; tabindex=&#34;1&#34; title=&#34;unmute&#34;&gt;unmute&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&#34;javascript:;&#34; class=&#34;jp-volume-max&#34; tabindex=&#34;1&#34; title=&#34;max volume&#34;&gt;max volume&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
                &lt;div class=&#34;jp-progress&#34;&gt;
                  &lt;div class=&#34;jp-seek-bar&#34;&gt;
                        &lt;div class=&#34;jp-play-bar&#34;&gt;&lt;/div&gt;

                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&#34;jp-volume-bar&#34;&gt;
                  &lt;div class=&#34;jp-volume-bar-value&#34;&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&#34;jp-current-time&#34;&gt;&lt;/div&gt;
                &lt;div class=&#34;jp-duration&#34;&gt;&lt;/div&gt;
                &lt;ul class=&#34;jp-toggles&#34;&gt;
                  &lt;li&gt;&lt;a href=&#34;javascript:;&#34; class=&#34;jp-shuffle&#34; tabindex=&#34;1&#34; title=&#34;shuffle&#34;&gt;shuffle&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&#34;javascript:;&#34; class=&#34;jp-shuffle-off&#34; tabindex=&#34;1&#34; title=&#34;shuffle off&#34;&gt;shuffle off&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&#34;javascript:;&#34; class=&#34;jp-repeat&#34; tabindex=&#34;1&#34; title=&#34;repeat&#34;&gt;repeat&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&#34;javascript:;&#34; class=&#34;jp-repeat-off&#34; tabindex=&#34;1&#34; title=&#34;repeat off&#34;&gt;repeat off&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div class=&#34;jp-playlist&#34;&gt;
                &lt;ul&gt;
                  &lt;li&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div class=&#34;jp-no-solution&#34;&gt;
                &lt;span&gt;Update Required&lt;/span&gt;
                To play the media you will need to either update your browser to a recent version or update your &lt;a href=&#34;http://get.adobe.com/flashplayer/&#34; target=&#34;_blank&#34;&gt;Flash plugin&lt;/a&gt;.
            &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>为了使网站的所有元素都能正常工作，我使用的是 jquery 版本 1.7.2(即使使用迁移脚本，最新的 jquery 也无法识别我的页面 anchor )。</p>

<p>有人对 jplayer 播放列表有经验吗？ TIA</p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>问题是由于媒体查询将 <code>.panel-container</code> 更改为 <code>float: none</code>。将其更改为 <code>clear: both;</code></p>

<p>例如</p>

<pre><code>@media only screen and (max-width: 767px) and (min-width: 480px)
.panel-container {
width: 400px;
min-height: auto;
clear: both;
</code></pre>

<p>您需要决定该部分的布局，因为 jPlayer 会在较小的分辨率上卡在左侧。</p></p>
                                   
                                                <p style="font-size: 20px;">关于android - Jplayer 播放列表无法在 Android 或 iOS 中使用，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/24540321/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/24540321/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: android - Jplayer 播放列表无法在 Android 或 iOS 中使用