问题描述
我正在设计一个使用jQuery Mobile的移动设备的页面，该主页在主页面上有jPlayer，其他内容加载在标签页或其他页面或对话框中，以便jPlayer中的音频继续播放。 >
我不知道如何使用jQuery Mobile实现标签，但是我已经尝试从演示中调整了2页的示例，还有一个包含多个内容的对话框的页面，并使用这两种方法在jPlayer中播放停止。
我不知道为什么会发生这种情况。在标准网页中，我使用jPlayer和lightboxes设计，灯箱不会影响jPlayer中的播放，所以我希望使用jQuery Mobile将是一样的。
要在iPhone上测试，您需要点击轨道才能获得音频播放。
我会感谢有任何帮助，使这项工作， p>
谢谢，
Nick
你可以看到当前页面。身体标签之间的代码是：
< body>
< div class =jp-audio>
< div class =jp-type-playlist>
< div id =jquery_jplayer_1class =jp-jplayer>< / div>
< div id =jp_interface_1class =jp-interface>
< div class =jp-video-play>< / div>
< ul class =jp-controls>
< li>< a href =＃class =jp-playtabindex =1> play< / a>< / li>
< li>< a href =＃class =jp-pausetabindex =1> pause< / a>< / li>
< li>< a href =＃class =jp-stoptabindex =1>停止< / a>< / li>
< li>< a href =＃class =jp-mutetabindex =1>静音< / a>< / li>
< li>< a href =＃class =jp-unmutetabindex =1> unmute< / a>< / li>
< li>< a href =＃class =jp-previoustabindex =1> previous< / a>< / li>
< li>< a href =＃class =jp-nexttabindex =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_1class =jp-playlist>
< ul>
<！ - Playlist.displayPlaylist（）方法使用这个无序列表 - >
< li>< / li>
< / ul>
< / div>
< / div>
< / div>
< script type =text / javascript>
var myScroll = new iScroll（'wrapper'）;
< / script>
< / div>
<！ - 第一页开始 - >
< div data-role =pageid =playlistdata-position =fixed>
< div data-role =header>
< h1>播放列表< / h1>
< / div><！ - / header - >
< div data-role =content>
< a href =＃comments> comments< / a>< / p>
< a href =＃commentsdata-rel =dialogdata-transition =pop>打开对话框< / a>< / p>
< / div><！ - / content - >
< div data-role =footerdata-position =fixed>
< h4>页脚< / h4>
< / div><！ - / header - >
< / div><！ - / page - >
<！ - 第二页开始 - >
< div data-role =pageid =comments>
< div data-role =content>
< p>< a href =＃playlist>返回播放列表< / a>< / p>
< div id =disqus_thread>
< / div>
< script type =text / javascript>
/ * * *配置变量：编辑到您的网页之前编辑* * * /
var disqus_shortname ='monthlymixup'; //必需：用你的论坛替换示例shortname
//以下是强烈推荐的其他参数。删除前面的斜杠使用。
var disqus_identifier ='test';
var disqus_title =奇妙的每月混合;
// var disqus_url ='http://example.com/permalink-to-page.html';
/ * * *请勿在本行下编辑* * * /
（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>请启用JavaScript以查看由Disqus提供支持的< a href =http://disqus.com/?ref_noscript>注释< / 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 =pageid =playlistclass =haveaplayer>
没有代码，这只是一个提示，但看起来jPlayer不想被隐藏。
容易的答案是在 data-role =page div（简单地在正文内）添加一个 div ）并将jPlayer放在那里。它将需要一些额外的CSS才能正常显示（或不被隐藏在JQM头:) :)但是jPlayer应该可以正常工作。
[/
您可以尝试在页面之间移动jPlayer：
$（div ：jqmData（role ='page'））。live（'pageshow'，function（）{
//测试页面是否应该有播放器，然后：
$（jPlayerWrapperSelector）.appendTo $（这））;
}）
尝试使用 pageshow 和 pagebeforeshow
如果这不起作用（移动节点可以破坏jPlayer那么你可以绑定到页面事件，并在必要时隐藏jPlayer。
$（div：jqmData ='page'））。live（'pagebeforeshow'，function（）{
//测试页面是否应该有播放器，然后：
{
$（jPlayerWrapperSelector）.show （）;
} else {
$（jPlayerWrapperSelector）.hide（）;
}
}）
[edit2]
我建议一个if语句：
if（$（this）.hasClass（'haveaplayer'））
然后，您必须将类添加到应该有播放器的div。像这样：
< div data-role =pageclass =haveaplayer>
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">
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">
这篇关于尝试使用jQuery Mobile实现jPlayer - 播放器在启动对话框时停止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！