Original address: http://blog.csdn.net/z69183787/article/details/8178656?_t_t=0.5149982699228508
jPlayer is used to control and play mp3 files jQuery Plug-in unit. It uses Flash to play mp3 files in the background and XHML/CSS can be used to customize the appearance of the front player. Support:
One thing that's better is that it's in support. HTML5 The browser will use html5 Label audio or video, but unsupported browsers use swf to play
Select the Mp3 file you want to play.
Play, pause, stop control.
Volume control.
Get information about playback progress, etc.
Official website: http://www.jplayer.org/
Support format:
-
HTML5: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav
-
Flash: mp3, mp4 (AAC/H.264), flv
Example:
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset=utf-8 />
-
-
-
<title>Demo : jPlayer as a video player</title>
-
<link href="skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
-
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
-
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
-
<script type="text/javascript">
-
//<![CDATA[
-
$(document).ready(function(){
-
-
$("#jquery_jplayer_1").jPlayer({
-
ready: function () {
-
$(this).jPlayer("setMedia", {
-
flv: "/workflowLocal/j/1.flv"
-
});
-
},
-
swfPath: "js",
-
supplied: "flv",
-
size: {
-
width: "640px",
-
height: "360px",
-
cssClass: "jp-video-360p"
-
}
-
});
-
-
});
-
function a(){
-
$("#jquery_jplayer_1").jPlayer("setMedia", {
-
flv: "/workflowLocal/j/2.flv"
-
});
-
}
-
//]]>
-
</script>
-
</head>
-
<body>
-
<input type="button" onclick="a();">
-
<div id="jp_container_1" class="jp-video jp-video-360p">
-
<div class="jp-type-single">
-
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
-
<div class="jp-gui">
-
<div class="jp-video-play">
-
<a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a>
-
</div>
-
<div class="jp-interface">
-
<div class="jp-progress">
-
<div class="jp-seek-bar">
-
<div class="jp-play-bar"></div>
-
</div>
-
</div>
-
<div class="jp-current-time"></div>
-
<div class="jp-duration"></div>
-
<div class="jp-controls-holder">
-
<ul class="jp-controls">
-
<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-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-volume-bar">
-
<div class="jp-volume-bar-value"></div>
-
</div>
-
<ul class="jp-toggles">
-
<li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a></li>
-
<li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</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-title">
-
<ul>
-
<li>shentong metro</li>
-
</ul>
-
</div>
-
</div>
-
</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>
-
</body>
-
-
</html>
Most of them are demo s on official websites. They need to introduce jquery.jplayer.min.js, two css packages on official websites, and Jplayer.swf.
The catalogue structure is as follows. js js file provided for official website in folder, css skin package provided by skin for official website
There are two strange problems here, when you're at home. test demo, can only play the official website said m4v format, but not with flv format, but on the server to solve.
The other is
-
ready: function () {
-
$(this).jPlayer("setMedia", {
-
flv: "/workflowLocal/j/1.flv"
-
});
-
},
When setMedia sets file paths here, only url paths such as http://xxxxxxxxxxxxx can be referenced locally, instead of absolute or relative paths.
On the server, absolute paths can be used, but absolute paths must start with the project root directory.
These two problems don't know how to solve...
Because the function of switching video is used in the project, I tried the following code, click the button to switch.
-
function a(){
-
$("#jquery_jplayer_1").jPlayer("setMedia", {
-
flv: "/workflowLocal/j/2.flv"
-
});
-
}
The effect of playback on the server is as follows:
