总结了jquery中jplayer的用法，为什么要总结呢，现在浏览器分很多种，还有html5，很多人喜欢自己写代码，你能做到完全兼容吗？
出问题要被老板骂的，所以在播放媒体的时候选择用jplayer省时省力省心。
在IE8及以下版本，会因为最后一个参数结尾有逗号而不工作，要注意。
如果你的mp4、m4v、ogv等不能在网站上播放，请检查你网站的MIME类型，比如：
.mp4 video/mp4
.m4v video/m4v
.3gp video/3gpp
.ogv application/ogg
.webm video/webm
.flv video/x-flv
/////--------------------------- 播放音乐调用方法 ----------------------
【A】最简单的：(不用皮肤，单一首歌)
◆头：
<script src="css_js/jquery.js"></script>
<script src="jPlayer/jquery.jplayer.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "media/mysound.mp3", m4a: "media/mysound.mp4", oga: "media/mysound.ogg"
});
},
swfPath: "jPlayer",
supplied: "mp3, m4a, oga"
});
});
</script>◆◆注：如果要自动播放和自动循环，要加上.jPlayer("play")和.jPlayer("repeat")在这里：
$(this).jPlayer("setMedia", {
mp3: "media/mysound.mp3", m4a: "media/mysound.mp4", oga: "media/mysound.ogg"
}).jPlayer("play").jPlayer("repeat");◆身体：
<div id="jquery_jplayer_1"></div><!--播放音频的flash隐藏窗口--> <div id="jp_container_1"> <a href="#" class="jp-play">;Play</a> <a href="#" class="jp-pause">;Pause</a> </div>
【B】全功能界面：
◆头同上，再加上：
<link rel="stylesheet" type="text/css" href="jPlayer/pink.flag/jplayer.pink.flag.css">
◆身体：
<div id="jquery_jplayer_1" class="jp-jplayer"></div> <div id="jp_container_1" class="jp-audio"> <div class="jp-type-single"> <div class="jp-gui jp-interface"> <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-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-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>My jPlayer</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>
【C】多首歌列表播放：
◆头，必须再导入个jplayer.playlist.min.js文件才能播放列表：
<script src="css_js/jquery.js"></script>
<script src="jPlayer/jquery.jplayer.min.js"></script>
<script src="jPlayer/add-on/jplayer.playlist.min.js"></script>
<link rel="stylesheet" type="text/css" href="jPlayer/pink.flag/jplayer.pink.flag.css">
<script type="text/javascript">
$(document).ready(function(){
new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
}, [
{title:"My Sound 1",mp3: "media/mysound1.mp3", oga:"media/mysound1.ogg"},
{title:"My Sound 2",mp3: "media/mysound2.mp3", oga:"media/mysound2.ogg", free:true},//free:true会在列表中此条音乐名称右边出现格式选择
{title:"My Sound 3",mp3: "media/mysound3.mp3", oga:"media/mysound3.ogg"}
], {
swfPath: "../js",
supplied: "oga, mp3",
wmode: "window",
smoothPlayBar: true,
keyEnabled: true
});
});
</script>◆◆如果要自动播放且自动循环要加上ready: function (){$(this).jPlayer("play").jPlayer("repeat");},在这里：
……
{title:"My Sound 2",mp3: "media/mysound2.mp3", oga:"media/mysound2.ogg"},
{title:"My Sound 3",mp3: "media/mysound3.mp3", oga:"media/mysound3.ogg"}
], {
ready: function (){$(this).jPlayer("play").jPlayer("repeat");},
swfPath: "../js",……
◆身体其他部分不变同上，在.jp-toggles里加上了随机播放的开关，在.jp-interface后面加了个播放列表的空容器：
<div id="jquery_jplayer_1" class="jp-jplayer"></div> <div id="jp_container_1" class="jp-audio"> <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> </div>
【D】更复杂的JS设置及说明：
◆头：
<script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () { //当flash一切载入就绪后，发生的事，如自动播放
$(this).jPlayer("setMedia", {
mp3: "media/mysound.mp3", m4a: "media/mysound.mp4", oga: "media/mysound.ogg"
});
},
swfPath: "jPlayer", //播放用flash所在的相对路径
solution: 'html, flash',
supplied: "mp3, m4a, oga",
preload: 'metadata',
volume: 0.8, //默认打开时音量
muted: false,
backgroundColor: '#000000',
cssSelectorAncestor: '#jp_container_1',
wmode: "window",
smoothPlayBar: true,
keyEnabled: true, //键盘快捷键（上下左右空白）可用否
cssSelector: { //可以用自己容器的类名或ID来取代默认
videoPlay: '.jp-video-play',
play: '.jp-play',
pause: '.jp-pause',
stop: '.jp-stop',
seekBar: '.jp-seek-bar',
playBar: '.jp-play-bar',
mute: '.jp-mute',
unmute: '.jp-unmute',
volumeBar: '.jp-volume-bar',
volumeBarValue: '.jp-volume-bar-value',
volumeMax: '.jp-volume-max',
currentTime: '.jp-current-time',
duration: '.jp-duration',
fullScreen: '.jp-full-screen',
restoreScreen: '.jp-restore-screen',
repeat: '.jp-repeat',
repeatOff: '.jp-repeat-off',
gui: '.jp-gui',
noSolution: '.jp-no-solution'
},
errorAlerts: false, //报错开关
warningAlerts: false //报错开关
});
});
</script>【E】在线流音乐播放：
◆头：
<script src="css_js/jquery.js"></script>
<script src="jPlayer/jquery.jplayer.min.js"></script>
<link rel="stylesheet" type="text/css" href="jPlayer/pink.flag/jplayer.pink.flag.css">
<script type="text/javascript">
$(document).ready(function(){
var stream = {
title: "流音乐测试",
mp3: "http://listen.radionomy.com/abc-jazz"
},
ready = false;
$("#jquery_jplayer_1").jPlayer({
ready: function (event) {
ready = true;
$(this).jPlayer("setMedia", stream);
},
pause: function() {
$(this).jPlayer("clearMedia");
},
error: function(event) {
if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
// Setup the media stream again and play it.
$(this).jPlayer("setMedia", stream).jPlayer("play");
}
},
swfPath: "jPlayer",
supplied: "mp3",
preload: "none",
wmode: "window"
});
});
</script>◆身体：
<div id="jquery_jplayer_1" class="jp-jplayer"></div> <div id="jp_container_1" class="jp-audio-stream"> <div class="jp-type-single"> <div class="jp-gui jp-interface"> <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-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> </div> <div class="jp-title"><ul><li>ABC Jazz</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>
====================== 视频调用方法 =======================
【F】单个视频播放：
◆头：
<script src="css_js/jquery.js"></script>
<script src="jPlayer/jquery.jplayer.min.js"></script>
<link rel="stylesheet" type="text/css" href="jPlayer/pink.flag/jplayer.pink.flag.css">
<script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4v: "media/myVideo.m4v", ogv: "media/myVideo.ogv", webmv: "media/myVideo.webm", poster: "media/myVideo.png" //封面图
}); //如果要一开始就全屏，加.jPlayer("fullScreen")但只是全窗口而不是全屏
},
swfPath: "jPlayer",
supplied: "webmv, ogv, m4v",
size: {
width: "640px", height: "360px", cssClass: "jp-video-360p"
},
smoothPlayBar: true
});
});
</script>◆身体：
<div id="jp_container_1" class="jp-video jp-video-360p"><!--jp-video-360p是在CSS里预设好的宽640高360的样式--> <div class="jp-type-single"> <div id="jquery_jplayer_1" class="jp-jplayer"></div><!--播放画面flash窗口--> <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-title"><ul><li>My Video</li></ul></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> </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>
【H】视频列表播放：
◆头，别忘了导入jplayer.playlist.min.js才能用：
<script src="css_js/jquery.js"></script>
<script src="jPlayer/jquery.jplayer.min.js"></script>
<script src="jPlayer/add-on/jplayer.playlist.min.js"></script>
<link rel="stylesheet" type="text/css" href="jPlayer/pink.flag/jplayer.pink.flag.css">
<script type="text/javascript">
$(document).ready(function(){
new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
}, [
{
title:"My Video 1", artist:"me", free:true, //free:true会在列表中此条视频名称右边出现格式选择
m4v: "media/myVideo1.m4v", ogv: "media/myVideo1.ogv", poster:"media/myVideo1.png"
},
{
title:"My Video 2", artist:"me",
m4v: "media/myVideo2.m4v", ogv: "media/myVideo2.ogv", poster:"media/myVideo2.png"
}, {
title:"My Video 3", artist:"me",
m4v: "media/myVideo3.m4v", ogv: "media/myVideo3.ogv", poster:"media/myVideo3.png"
}
], {
swfPath: "jPlayer",
supplied: "ogv, m4v",
size: {width: "640px", height: "360px"},
smoothPlayBar: true
});
});
</script>◆身体：
<div id="jp_container_1" class="jp-video jp-video-270p"> <div class="jp-type-playlist"> <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-title"><ul><li></li></ul></div> <div class="jp-controls-holder"> <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-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-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> </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>
【I】给视频加文字的popcorn插件：（支持中文，但貌似字体，颜色，位置等都不能改）
◆头，加上popcorn文件夹里的4个JS文件！注意顺序：
<script src="css_js/jquery.js"></script>
<script src="jPlayer/jquery.jplayer.min.js"></script>
<script src="jPlayer/popcorn/popcorn.js"></script>
<script src="jPlayer/popcorn/popcorn.player.js"></script>
<script src="jPlayer/popcorn/popcorn.jplayer.js"></script>
<script src="jPlayer/popcorn/popcorn.subtitle.js"></script>
<link rel="stylesheet" type="text/css" href="jPlayer/pink.flag/jplayer.pink.flag.css">
<script type="text/javascript">
$(document).ready(function(){
var p = Popcorn.jplayer('#jquery_jplayer_1', {
media: {
m4v: "media/myVideo.m4v", ogv: "media/myVideo.ogv", poster:"media/myVideo.png"
},
options: {
swfPath: "jPlayer",
supplied: "ogv, m4v",
size: {width: "640px",height: "360px"},
smoothPlayBar: true}
})
.subtitle({
start: 2, end: 6, text: "大家好，这是后加的视频字幕。"
})
.subtitle({
start: 6, end: 10, text: "用到了popcorn插件。"
})
.subtitle({
start: 10, end: 15, text: "Enabling jPlayer to function with the features of Popcorn"
})
.subtitle({
start: 16, end: 32, text: "Have fun playing with it!"
});
});
</script>