Search code examples
jqueryaudiovideojplayerplaylist

Jplayer audio and video on same page not working

I have added a jplayer audio and video on same page using jplayer playlist plugin but the issue is cssSelectorAncestor attribute of video when changed from "jp_container_1" to "jp_container_2" or any other id then its not working.
When audio and video both are having cssSelectorAncestor as jp_container_1 then video is getting played.

enter image description here

Audio Player code js

    $(document).ready(function() {
    myPlist = new jPlayerPlaylist({
        jPlayer: "#jquery_jplayer_1",
        cssSelectorAncestor: "#jp_container_1"
    },[], 
    {
        swfPath: "player/dist/jplayer",
        supplied: "webmv, ogv, m4v, oga, mp3, m4a",
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        keyEnabled: true,
        audioFullScreen: true
    }
    );

Audio player html

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

Video player code js

        myPlist1 = new jPlayerPlaylist({
        jPlayer: "#jquery_jplayer_2",
        cssSelectorAncestor: "#jp_container_1"
    },
    [{
        title: "Big Buck Bunny Trailer",
        m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
        ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",
        poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
     }
    ], 
    {
            swfPath: "player/dist/jplayer",
            supplied: "m4v, ogv",
            useStateClassSkin: true,
            autoBlur: false,
            smoothPlayBar: true,
            keyEnabled: true,
            remainingDuration: true,
            toggleDuration: true,
            size: {
                     width: "809px",
                     height: "399px"
            }
        }
    );

video player html has simple

<div id="jquery_jplayer_2"></div>

when added 

<div id="jp_container_2" class="jp-video" role="application" aria-label="media player"><div id="jquery_jplayer_2"></div></div>

and changed cssSelectorAncestor jp_container_2 then no video is displayed. Video starts on clicking anywhere on video as of now.

Thanks for your efforts.

Solution

  • Finally solved.
    Not properly mentioned on jplayer playlist documentation, that's why it took so long to figure this out.
    Jplayer playlist plugin requires class='jp-playlist' else playlist will be empty and no audio or video will play. Yes that was silly mistake i did. I changed the html code as below and now everything is working as it should.

    <div id="jp_container_2" role="application" aria-label="media player">
 <div id="jquery_jplayer_2"></div>
  <div class="jp-playlist">
    <ul>
      <li>&nbsp;</li>
    </ul>
   </div>
</div>

    Hope it helps to others having similar issue. Thanks.