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

Question

我使用 jplayer 播放列表插件在同一页面上添加了 jplayer 音频和视频，但问题是视频的 cssSelectorAncestor 属性从 "jp_container_1" 更改为 "jp_container_2" 或任何其他 id 然后它不起作用。
当音频和视频都具有 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='jp-playlist' 否则播放列表将为空，不会播放任何音频或视频。 是的，我犯了一个愚蠢的错误。我如下更改了 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 音频和视频无法正常工作

Jplayer audio and video on same page not working

jquery

audio

video

jplayer

playlist