Trying to implement jPlayer using jQuery Mobile - player stops when launching dialog

StackOverflow https://stackoverflow.com/questions/5818649

Question

I am trying to design a page for mobile devices using jQuery Mobile that has jPlayer on the main page, and other content loaded either in tabs or another page or a dialog, such that the audio in jPlayer keeps playing.

I am not sure how to implement tabs using jQuery Mobile, but I have tried adapting the 2 page example from the demos, and also a single page with a dialog which contains extra content, and using both methods the playback in jPlayer stops.

I am not sure why this is happening. In the standard webpage I have designed using jPlayer and lightboxes, the lightboxes don't effect the playback in jPlayer, so I was hoping that it would be the same using jQuery Mobile.

To test on an iPhone you will need to tap on a track to get audio playing.

I'd be grateful for any help in getting this working,

Thanks,

Nick

You can see the current page here. The code between the body tags is:

<body> 

<div class="jp-audio">
<div class="jp-type-playlist">
    <div id="jquery_jplayer_1" class="jp-jplayer"></div>
    <div id="jp_interface_1" class="jp-interface">
        <div class="jp-video-play"></div>
        <ul class="jp-controls">
            <li><a href="#" class="jp-play" tabindex="1">play</a></li>
            <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
            <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
            <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
            <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
            <li><a href="#" class="jp-previous" tabindex="1">previous</a></li>
            <li><a href="#" class="jp-next" tabindex="1">next</a></li>
        </ul>
        <div class="jp-progress">
            <div class="jp-seek-bar">
                <div class="jp-play-bar"></div>
            </div>
        </div>
        <div class="jp-volume-bar">
            <div class="jp-volume-bar-value"></div>
        </div>
        <div class="jp-current-time"></div>
        <div class="jp-duration"></div>
    </div>
    <div id="wrapper">
    <div id="scroller">
    <div id="jp_playlist_1" class="jp-playlist">
        <ul>
            <!-- The method Playlist.displayPlaylist() uses this unordered list -->
            <li></li>
        </ul>
    </div>
    </div>
    </div>

    <script type="text/javascript">
    var myScroll = new iScroll('wrapper');
    </script>
</div>


<!-- Start of first page -->
<div data-role="page" id="playlist" data-position="fixed">

    <div data-role="header">
        <h1>Playlist</h1>
    </div><!-- /header -->

    <div data-role="content">
            <a href="#comments">comments</a></p>
            <a href="#comments" data-rel="dialog" data-transition="pop">open dialog</a></p>         

    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
    </div><!-- /header -->
</div><!-- /page -->


<!-- Start of second page -->
<div data-role="page" id="comments">



    <div data-role="content">   
                <p><a href="#playlist">Back to playlist</a></p>

    <div id="disqus_thread">
    </div>

      <script type="text/javascript">
          /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
          var disqus_shortname = 'monthlymixup'; // required: replace example with your forum shortname

          // The following are highly recommended additional parameters. Remove the slashes in front to use.
          var disqus_identifier = 'test';
          var disqus_title = 'the marvelous monthly mix up';
          // var disqus_url = 'http://example.com/permalink-to-page.html';

          /* * * DON'T EDIT BELOW THIS LINE * * */
          (function() {
              var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
              dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
              (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
          })();
      </script>
      <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>           

                </div><!-- /content -->


</div><!-- /page -->
</body>

here is the script I currently have for showing and hiding pages:

<script type="text/javascript"> $("div:jqmData(role='page')").live('pagebeforeshow',function(){ if($(this).hasClass('haveaplayer')) { $(.jp-audio).show(); }else{ $(.jp-audio).hide(); } }) </script>

and the html:

<div data-role="page" id="playlist" class="haveaplayer">

Was it helpful?

Solution

Without the code it's just a tip, but it looks like jPlayer doesn't want to be hidden.

The easy answer is to add a div element out of the data-role="page" div (simply inside the body) and put the jPlayer in there. It will need some extra CSS to display properly (or not be hidden under JQM header:) ) but the jPlayer should work well then.

[edit]

You can try to move the jPlayer between pages with:

$("div:jqmData(role='page')").live('pageshow',function(){
  //test if the page should have the player and then:
  $(jPlayerWrapperSelector).appendTo($(this));
})

try with pageshow and pagebeforeshow

If this doesn't work (moving the node can break jPlayer as well) then you can just bind to the page event and hide jPlayer when necessary.

$("div:jqmData(role='page')").live('pagebeforeshow',function(){
  //test if the page should have the player and then:
   {
   $(jPlayerWrapperSelector).show();
   }else{
   $(jPlayerWrapperSelector).hide();
   }
})

[edit2]

I suggest an if statement like that:

if($(this).hasClass('haveaplayer'))

You then have to add the class to divs that should have a player. Like this:

<div data-role="page" class="haveaplayer">
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top