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.
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.
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> </li>
</ul>
</div>
</div>
Hope it helps to others having similar issue. Thanks.