Databases
StackOverflow2013
Postsdbo
POjPlayer in Bootstrap Modal - no player
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjPlayer in Bootstrap Modal - no player
    text
    copied!<p>I have a problem with jPlayer and the modal function in bootstrap. I have just included the codes from the quickstart-guide from jPlayer in my bootstrap site. I wanted to display a video with jPlayer inside a modal.</p> <p>So I created a button to open the modal: </p> <pre><code>&lt;a data-remote="popup-details.php" data-toggle="modal" data-target="#detailModal" class="btn btn-info btn-block"&gt;&lt;i class="icon-search icon-white"&gt;&lt;/i&gt; Details&lt;/a&gt; </code></pre> <p>In this php file, I embeded the code for the player: </p> <pre><code>&lt;div id="jp_container_1" class="jp-video "&gt; &lt;div class="jp-type-single"&gt; &lt;div id="jquery_jplayer_1" class="jp-jplayer"&gt;&lt;/div&gt; ... &lt;/div&gt; &lt;/div&gt; </code></pre> <p>And before this code in the modal, I included the javascript code for the player: </p> <pre><code>&lt;script&gt; $(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" }); }); &lt;/script&gt; </code></pre> <p>I also have included the following lines in the head of the page: </p> <pre><code>&lt;script type="text/javascript" src="js/jquery.jplayer.min.js"&gt;&lt;/script&gt; &lt;link type="text/css" href="skin/jplayer.blue.monday.css" rel="stylesheet" /&gt; </code></pre> <p>But the player always looks like you can see here in the tutorial: <a href="http://www.jplayer.org/latest/quick-start-guide/step-6-video/" rel="nofollow">http://www.jplayer.org/latest/quick-start-guide/step-6-video/</a></p> <p>I tried to include the video directly into the page - that was fine, the player worked as it should. But in the modal it won't. </p> <p>Do you have any idea why, and can you help me?</p> <hr> <p>EDIT: The solution: </p> <p>Change the Code to the following: </p> <pre><code>&lt;script&gt; $("#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" }); </code></pre> <p></p> <p>I just deleted the "ready" event. And now everything works fine. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload