同一页面上的Jplayer音频和视频不起作用

Posted 2023-02-25

【中文标题】同一页面上的Jplayer音频和视频不起作用

【英文标题】：Jplayer audio and video on same page not working

【发布时间】：2016-02-03 13:13:59

【问题描述】：

我已经使用 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 然后不显示视频。视频从现在开始点击视频上的任意位置。

感谢您的努力。

【参考方案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>

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