Попытка реализовать jPlayer с помощью jQuery Mobile - проигрыватель останавливается при запуске диалога

Я пытаюсь создать страницу для мобильных устройств, используя jQuery Mobile с jPlayer на главной странице и другим содержимым, загружаемым либо во вкладках, либо на другой странице, либо в диалоговом окне, чтобы звук в jPlayer продолжал воспроизводиться.

Я не уверен, как реализовать вкладки с помощью jQuery Mobile, но я попытался адаптировать 2-страничный пример из демонстраций, а также одну страницу с диалоговым окном, содержащим дополнительный контент, и используя оба метода, воспроизведение в jPlayer останавливается.

Я не уверен, почему это происходит. На стандартной веб-странице, которую я разработал с использованием jPlayer и лайтбоксов, лайтбоксы не влияют на воспроизведение в jPlayer, поэтому я надеялся, что с jQuery Mobile все будет так же.

Для тестирования на iPhone вам нужно будет нажать на трек, чтобы начать воспроизведение аудио.

Я был бы благодарен за любую помощь в получении этой работы,

Спасибо,

Ник

Вы можете увидеть текущую страницу здесь. Код между тегами body:

<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>

Вот сценарий, который у меня есть для отображения и скрытия страниц:

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

и HTML:

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

Источник

1 ответ

Решение

Без кода это всего лишь совет, но похоже, что jPlayer не хочет быть скрытым.

Простой ответ - добавить div элемент из data-role="page" div (просто внутри тела) и поместите jPlayer туда. Для правильного отображения потребуется дополнительный CSS (или не будет скрыт под заголовком JQM:)), но тогда jPlayer должен работать хорошо.

[редактировать]

Вы можете попробовать переместить jPlayer между страницами с помощью:

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

попробуй с pageshow а также pagebeforeshow

Если это не работает (перемещение узла может также сломать jPlayer), тогда вы можете просто привязать событие страницы и при необходимости скрыть jPlayer.

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

[Edit2]

Я предлагаю утверждение типа if:

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

Затем вам нужно добавить класс в div, который должен иметь игрока. Как это:

<div data-role="page" class="haveaplayer">
Источник
Другие вопросы по тегам