0
JQuery Mobile을 사용하여 로컬 MP3 파일을 재생하는 방법을 알 수 없습니다. 나는 JPlayer로 어지럽 혀 지려고 노력했는데 작동하도록 할 수는 없다. 누구든지 JQuery Mobile에서 재생할 오디오 파일을 성공적으로 얻었습니까? 당신이 제공 할 수있는 것은 무엇이든 될 것입니다 :)JQuery 모바일 MP3 플레이어 예
고마워.
A
답변
1
<!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>
0
<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>
이 익숙 ... http://stackoverflow.com/questions/5818649/trying-to-implement-jplayer-using-jquery-mobile-player-stops-when-launching-dia – naugtur