JQuery Mobile MP3 player example
I cannot figure out how to play a local MP3 file using JQue开发者_StackOverflow中文版ry Mobile. I've tried messing around with JPlayer and I cannot get that to work. Has anyone successfully got an audio file to play within JQuery Mobile? Anything you can provide would be great :)
Thanks.
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=screen.width; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Audio Player</title>
<link href="skin/jplayer.blue.mobile.css" rel="stylesheet" type="text/css" />
<link href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.js"></script>
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header" data-nobackbtn="true" data-theme="b">
<h1>Audio Player</h1>
</div> <!-- /header -->
<div data-role="content" id="content-manual" data-theme="a">
<div class="jp-video jp-video-270p">
<div class="jp-type-single">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_interface_1" class="jp-interface">
<div class="jp-video-play"></div>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div id='duration'>
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
</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>
</ul>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
<div id="jp_playlist_1" class="jp-playlist">
<ul>
<li>Big Buck Bunny Trailer</li>
</ul>
</div>
</div>
</div>
</div> <!-- /content-manual -->
</div> <!-- /page -->
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
paused = 0;
$("#jquery_jplayer_1").jPlayer( {
ready: function () {
$(this).jPlayer("setMedia", {
m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v",
poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
});
},
ended: function (event) {
$("#jquery_jplayer_1").jPlayer("setMedia", {
m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v",
poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
});
paused = 0;
},
pause: function (event) {
paused = 1;
$("#jp_flash_0").css({"width":"0px"});
$(".jp-video-play").show();
},
play: function(event) {
if(paused == 1) {
$("#jp_flash_0").css({"width":"100%"});
$(".jp-video-play").show();
}
paused = 0;
},
swfPath: "js",
supplied: "m4v"
});
});
</script>
加载中,请稍侯......
精彩评论