Jplayer Playlist Will Not Work in Android or iOS

Vote count:

0

My implementation of Jplayer appears to be working everywhere but on mobile and tablet, basically Android and iOS. When opened on Android, the playlist play buttons are disabled and the song links are not clickable.

This is my script:

$(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: "Phone 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
});
});

And the 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://ift.tt/lB6Lmc" target="_blank">Flash plugin</a>.
            </div>
        </div>
    </div>

To make all elements of the site work, I am using jquery version 1.7.2 (even with the migrate script, the latest jquery wouldn't recognize my page anchors).

Does anyone have experience with the jplayer playlist? TIA

asked 48 secs ago

jallen

104