我的Jplayer实现似乎无处不在,但在移动设备和平板电脑上,基本上是Android和iOS。在Android上打开时,播放列表播放按钮被禁用,歌曲链接无法点击。
这是我的剧本:
$(document).ready(function () {
var myPlaylist = new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
}, [
{
title: "Commerical",
mp3: "/content/audio/commercial.mp3"
},
{
title: "Characters",
mp3: "/content/audio/characters.mp3"
},
{
title: "Attitude",
mp3: "/content/audio/attitude.mp3"
},
{
title: "Business",
mp3: "/content/audio/business.mp3"
},
{
title: "Narrator",
mp3: "/content/audio/narrator.mp3"
},
{
title: "Younger",
mp3: "/content/audio/younger.mp3"
},
{
title: "Guy Next Door",
mp3: "/content/audio/guy-next-door.mp3"
},
{
title: "English/British Accent",
mp3: "/content/audio/english-accent.mp3"
},
{
title: "Movie Trailers",
mp3: "/content/audio/movie-trailers.mp3"
},
{
title: "Smooth",
mp3: "/content/audio/smooth.mp3"
},
{
title: "High Energy",
mp3: "/content/audio/stadium-announcing.mp3"
},
{
title: "Phone System",
mp3: "/content/audio/phone-system.mp3"
},
{
title: "Sam Elliot",
mp3: "/content/audio/sam-elliot.mp3"
},
{
title: "Stadium Announcing",
mp3: "/content/audio/stadium-announcing.mp3"
},
{
title: "Cops and Detectives",
mp3: "/content/audio/cops-and-detectives.mp3"
}
],
{
swfPath: "js",
solution: "html,flash",
supplied: "mp3",
wmode: "window",
smoothPlayBar: true,
keyEnabled: true
});
$("#jquery_jplayer_1").bind(jQuery.jPlayer.event.play, function (event) {
var current = myPlaylist.current,
playlist = myPlaylist.playlist;
jQuery.each(playlist, function (index, obj) {
if (index == current) {
$('.audio.active').removeClass('active');
$('.audio').hide();
var audio = $('.audio').get(current);
$(audio).fadeIn('slow');
return false;
}
});
});
});
和html:
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" style="float:left;">
<div class="jp-type-playlist">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</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>
<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
<li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
</ul>
</div>
<div class="jp-playlist">
<ul>
<li></li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>
为了使网站的所有元素都能正常工作,我使用的是jquery 1.7.2版本(即使使用了迁移脚本,最新的jquery也无法识别我的页面锚点。)
有没有人有过jplayer播放列表的经验? TIA
答案 0 :(得分:1)
问题是由于媒体查询将.panel-container
更改为float: none
。将其更改为clear: both;
e.g。
@media only screen and (max-width: 767px) and (min-width: 480px)
.panel-container {
width: 400px;
min-height: auto;
clear: both;
您需要决定该部分的布局,因为jPlayer将在较小的分辨率上悬挂在左侧。