Question

我的jPlayer和bootstrap中的模态函数有问题。我刚刚在我的bootstrap站点中包含了jPlayer的quickstart-guide中的代码。我想在模态中使用jPlayer显示视频。

所以我创建了一个按钮来打开模态：

<a data-remote="popup-details.php" data-toggle="modal" data-target="#detailModal" class="btn btn-info btn-block"><i class="icon-search icon-white"></i> Details</a>

在这个php文件中，我嵌入了播放器的代码：

<div id="jp_container_1" class="jp-video ">
    <div class="jp-type-single">
        <div id="jquery_jplayer_1" class="jp-jplayer"></div>
      ...
    </div>
</div>

在模态中的这段代码之前，我包含了播放器的javascript代码：

<script>
    $(document).ready(function(){
        $("#jquery_jplayer_1").jPlayer({
            ready: function () {
                $(this).jPlayer("setMedia", {
                m4v: "http://www.jplayer.org/vide /m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v",
                ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer_480x270.ogv",
                poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
                });
            },
        swfPath: "js",
        supplied: "m4v, ogv"
        });
    });
</script>

我还在页面的头部包含以下几行：

<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<link type="text/css" href="skin/jplayer.blue.monday.css" rel="stylesheet" />

但是玩家总是看起来像你在教程中看到的那样： http://www.jplayer.org/latest/quick-start-guide/step-6-video/

我试图将视频直接包含在页面中 - 这很好，玩家可以正常工作。但在模态中它不会。

你知道为什么，你能帮助我吗？

编辑：解决方案：

将代码更改为以下内容：

<script>
  $("#jquery_jplayer_1").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", {
        m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v",
        ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer_480x270.ogv",
        poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
      });
    },
    swfPath: "js",
    supplied: "m4v, ogv"
  });

我刚刚删除了“就绪”事件。现在一切正常。

Bootstrap Modal中的jPlayer - 没有播放器

0 个答案: