Databases
StackOverflow2013
Postsdbo
POjPlayer in Bootstrap Modal - no player
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjPlayer in Bootstrap Modal - no player
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USlackner_media
    1. USlackner_media
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POjPlayer in Bootstrap Modal - no player
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    2. VO
      singulars
      1. POjPlayer in Bootstrap Modal - no player
      1. This table or related slice is empty.
      1. VTClose
    1. COPossible duplicate: http://stackoverflow.com/questions/13145480/jplayer-bootstrap-modal-dom-issues
      singulars
      1. POjPlayer in Bootstrap Modal - no player
      1. USmerv
    2. COOnly differences I see between the working version in that other question and yours is 1) the JavaScript is called last in the ajax page, that is after the requisite DOM elements, and 2) the JavaScript does not depend on a `ready` event firing.
      singulars
      1. POjPlayer in Bootstrap Modal - no player
      1. USmerv
    3. CO@ merv, your analysis and hint was the right one. The only mistake I made was the "ready" event. I deleted the "ready" event in the script block - and now the player looks great and the video plays!!! THANKS for the help!!
      singulars
      1. POjPlayer in Bootstrap Modal - no player
      1. USlackner_media
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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