OStack程序员社区-中国程序员成长平台

标题: android - Jplayer 播放列表无法在 Android 或 iOS 中使用 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-12 23:39
标题: android - Jplayer 播放列表无法在 Android 或 iOS 中使用

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

这是我的脚本:

$(document).ready(function () {

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

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

        } 
    });
});
});

还有html:

<div id="jquery_jplayer_1" class="jp-jplayer"></div>

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

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

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

有人对 jplayer 播放列表有经验吗？ TIA

---

Best Answer-推荐答案

问题是由于媒体查询将 .panel-container 更改为 float: none。将其更改为 clear: both;

例如

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

您需要决定该部分的布局，因为 jPlayer 会在较小的分辨率上卡在左侧。

关于android - Jplayer 播放列表无法在 Android 或 iOS 中使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24540321/

---

欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/)

Powered by Discuz! X3.4