Question

我使用jplayer播放列表插件在同一页面上添加了jplayer音频和视频，但是当从“jp_container_1”更改为“jp_container_2”或其他任何ID时，问题是 cssSelectorAncestor 属性工作。
当音频和视频都将cssSelectorAncestor作为jp_container_1时，视频就会播放。

音频播放器代码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
    }
    );

音频播放器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>

视频播放器代码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"
            }
        }
    );

视频播放器html很简单

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

添加时

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

并更改了cssSelectorAncestor jp_container_2，然后没有显示视频。截至目前，视频从点击视频的任意位置开始。

感谢您的努力。

Answer 1

终于解决了。
在jplayer播放列表文档中没有正确提及，这就是为什么花了这么长时间来解决这个问题的原因 Jplayer播放列表插件需要class =＆＃39; jp-playlist＆＃39;否则播放列表将为空，不会播放音频或视频。是的，这是我犯的愚蠢错误。我改变了下面的html代码，现在一切正常。

<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>

希望对有类似问题的其他人有所帮助。感谢。

同一页面上的Jplayer音频和视频无法正常工作

1 个答案: