Jplayer必须要加载
1.样式 jplayer.blue.monday.css
2.jq jquery.1.6.2.min.js 当前最新版本为1.6.2
3.jplayer的js jquery.jplayer.min.js
<link href="skin/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
<script. type="text/javascript" src="./js/jquery.1.6.2.min.js"></script>
<script. type="text/javascript" src="js/jquery.jplayer.min.js"></script>
Jplayer单首歌播放
js代码如下
<script. type="text/javascript">
//<![CDATA[
$(document).ready(function(){ //一定要等页面全部加载完才能执行jplayer
$('#jplayer').jPlayer({ //jplayer为页面中存放jplayer容器的标签
preload: 'metadata', //预加载,不太清楚,缺省吧
ready: function () { //ready:歌曲加载完成后执行
$(this).jPlayer("setMedia", { //jPlayer("setMedia", 格式:路径)
mp3: './music/03.mp3' //jPlayer支持许多格式,如mp3、m4a
}).jPlayer("play"); //$(this).jPlayer("setMedia", {mp3: './music/03.mp3'}).jPlayer("play"); )等价于$(this).jPlayer("setMedia", {mp3: './music/03.mp3'});$(this).jPlayer("play");
},
ended: function (event) { //表示歌曲播放结束后再播放。。
$(this).jPlayer("play");
},
swfPath: 'js', //设置jPlayer.swf的存放位置,非常重要设置错误会出现很多火星问题
solution: 'html, flash',
supplied: 'mp3', //支持文件:在这里设置了支持的文件,只有设置了才能播放
volume: 0.8, //默认音量
muted: false, //默认静音
backgroundColor: '#000000', //背景颜色
cssSelectorAncestor: '#jp_interface_1', //选择播放器样式的容器
cssSelector: { //设置css样式选择器
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',
currentTime: '.jp-current-time',
duration: '.jp-duration'},
errorAlerts: true, //错误报告
warningAlerts: true, //警告报告
nativeSupport: true, //对HTML5的支持,设置为false则强制调用swf播放不使用html5标签
});
});
html代码:
<div id="jplayer" class="jp-jplayer"></div>
<div class="jp-audio">
<div class="jp-type-single">
<div id="jp_interface_1" class="jp-interface">
<div class="jp-video-play"></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-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>
</div>
<div id="jp_playlist_1" class="jp-playlist">
<ul>
<li>hello word</li>
</ul>
</div>
</div>
</div>
注:页面必须在挂在服务器上才能正常,不然播放器会出现很多火星问题,像火狐、IE不能播放只有chrome可以播放
附上添加了播放列表的js:
$(document).ready(function(){
var Playlist = function(instance, playlist, options) {
var self = this;
this.instance = instance; // String: To associate specific HTML with this playlist
this.playlist = playlist; // Array of Objects:
The playlist
this.options = options; // Object: The jPlayer constructor options for this playlist
this.current = 0;
this.cssId = {
jPlayer: "jquery_jplayer_",
playlist: "jp_playlist_"
};
this.cssSelector = {};
$.each(this.cssId, function(entity, id) {
self.cssSelector[entity] = "#" + id + self.instance;
});
if(!this.options.cssSelectorAncestor) {
this.options.cssSelectorAncestor = this.cssSelector.interface;
}
$(this.cssSelector.jPlayer).jPlayer(this.options);
$(this.cssSelector.interface + " .jp-previous").click(function() {
self.playlistPrev();
$(this).blur();
return false;
});
$(this.cssSelector.interface + " .jp-next").click(function() {
self.playlistNext();
$(this).blur();
return false;
});
};
Playlist.prototype = {
displayPlaylist: function() {
var self = this;
$(this.cssSelector.playlist + " ul").empty();
for (i=0; i < this.playlist.length; i++) {
var listItem = (i === this.playlist.length-1) ? "<li class='jp-playlist-last'>" : "<li>";
listItem += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'>"+ this.playlist[i].name +"</a>";
// Create links to free media
if(this.playlist[i].free) {
var first = true;
listItem += "<div class='jp-free-media'>(";
$.each(this.playlist[i], function(property,value) {
if($.jPlayer.prototype.format[property]) { // Check property is a media format.
if(first) {
first = false;
} else {
listItem += " | ";
}
listItem += "<a id='" + self.cssId.playlist + self.instance + "_item_" + i + "_" + property + "' href='" + value + "' tabindex='1'>" + property + "</a>";
}
});
listItem += ")</span>";
}
listItem += "</li>";
// Associate playlist items with their media
$(this.cssSelector.playlist + " ul").append(listItem);
$(this.cssSelector.playlist + "_item_" + i).data("index", i).click(function() {
var index = $(this).data("index");
if(self.current !== index) {
self.playlistChange(index);
} else {
$(self.cssSelector.jPlayer).jPlayer("play");
}
$(this).blur();
return false;
});
// Disable free media links to force access via right click
if(this.playlist[i].free) {
$.each(this.playlist[i], function(property,value) {
if($.jPlayer.prototype.format[property]) { // Check property is a media format.
$(self.cssSelector.playlist + "_item_" + i + "_" + property).data("index", i).click(function() {
var index = $(this).data("index");
$(self.cssSelector.playlist + "_item_" + index).click();
$(this).blur();
return false;
});
}
});
}
}
},
playlistInit: function(autoplay) {
if(autoplay) {
this.playlistChange(this.current);
} else {
this.playlistConfig(this.current);
}
},
playlistConfig: function(index) {
$(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current");
$(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current");
this.current = index;
$(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);
},
playlistChange: function(index) {
this.playlistConfig(index);
$(this.cssSelector.jPlayer).jPlayer("play");
},
playlistNext: function() {
var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0;
this.playlistChange(index);
},
playlistPrev: function() {
var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1;
this.playlistChange(index);
}
};
var audioPlaylist = new Playlist("1",
[name:03.mp3:./music/03.mp3]
, {
ready: function() {
audioPlaylist.displayPlaylist();
audioPlaylist.playlistInit(false); // Parameter is a boolean for autoplay.
},
ended: function() {
audioPlaylist.playlistNext();
},
play: function() {
$(this).jPlayer("pauseOthers");
},
swfPath: 'js',
solution: 'html, flash',
supplied: 'mp3',
volume: 0.8,
muted: false,
backgroundColor: '#000000',
cssSelectorAncestor: '#jp_interface_1',
cssSelector: {
videoPlay: '',
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',
currentTime: '.jp-current-time',
duration: '.jp-duration'},
errorAlerts: true,
warningAlerts: true,
nativeSupport: true,
});
});
//]]>
</script>
页面:
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div class="jp-audio">
<div class="jp-type-playlist">
<div id="jp_interface_1" class="jp-interface">
<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>
<li><a href="#" class="jp-previous" tabindex="1">previous</a></li>
<li><a href="#" class="jp-next" tabindex="1">next</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>
</div>
<div id="jp_playlist_1" class="jp-playlist">
<ul>
<!-- The method Playlist.displayPlaylist() uses this unordered list -->
<li></li>
</ul>
</div>
</div>
</div>
<div id="jplayer_inspector_1"></div>
转:http://blog.hfut.edu.cn/index.php/uid-44328-action-viewspace-itemid-86949
最后加一点个人心得,Jplayer在Chrome,ie9+都能执行,到Ie6,7,8上不能执行,网上说是什么swfPath路径的问题
后来看到这篇文章才知道是因为我没有把它放到服务器上运行,所以把代码部署在IIS上就可以了。
- HTML5使用jplayer播放音频、视频
首先推上神器 jPlayer:基于HTML5/Flash的音频.视频播放器 jPlayer是一个JavaScript写的完全免费和开源 (MIT) 的jQuery多媒体库插件 (现在也是一个Zepto ...
- 兼容IE7音乐播放器之jplayer的使用
首先列出为何要写这篇随笔的原因: 1:兼容IE7 2:音乐播放器 3:任意控制播放器 1: 最近做的网站需要兼容IE7,在此之前已经写好了关于音乐播放的插件,火狐,IE8以上,以及谷歌浏览器等都可以随 ...
- jquery+jplayer实现歌词同步的mp3音乐播放器效果
实例预览 下载地址 实例代码 <div class="container"> <div class="demo"> <textar ...
- 基于jPlayer的三分屏制作
三分屏,这里的三分屏只是在一个播放器里同时播放三个视频,但是要求只有一个控制面板同时控制它们,要求它们共享一个时间轨道.这次只是简单的模拟了一下功能,并没有深入的研究. 首先,需要下载jPlayer, ...
- 利用开源jPlayer播放.flv视频文件
最近工作中用到视频播放,在网上搜索对比了好几款开源播放插件后,觉得 jPlayer 是比较不错的,故作此记录! 接下来先快速的展示一下 利用jPlayer播放.flv视频的效果: <!DOCTY ...
- Jplayer歌词同步显示插件
http://blog.csdn.net/wk313753744/article/details/38758317 1.该插件是一个jquery的编写的跟jplayer实现歌词同步的插件,最终效果如图 ...
- jplayer中动态添加列表曲目(js提取request中的list数据作为js参数使用)
jplayer 的播放列表使用如下: $(document).ready(function(){ new jPlayerPlaylist({ jPlayer: "#jquery_jplaye ...
- [jPlayer] HTML5 Audio & Video for jQuery
---------------------------------------------------------------------------------------------------- ...
- 基于jQuery的视频和音频播放器jPlayer
jPlayer见网络上资料很少,官方英文资料太坑爹TAT,于是就写一个手记给大家参考下.据我观察,jPlayer的原理主要是用到HTML5,在不支持HTML5的浏览器上使用SWF.做到全兼容,这一点很 ...
随机推荐
- css3 过渡记
CSS3 过渡 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击,获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值. t ...
- 【程序员的SQL金典】笔记(第6章~第11章)
第六章 索引与约束 1.索引用来提高数据的检索速度,而约束则用来保证数据的完整性. 2.创建索引 创建索引的SQL 语句是CREATE INDEX,其语法如下: CREATE INDE ...
- HDOJ2018母牛的故事
母牛的故事 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
- Java之绘制方法
绘制图形所用的函数类别分别为视图类.图形单元类和页面类. 对视图类,设置窗口的位置和大小: 对图形单元类,设置图形边界: 对页面类,只有当页面作为元件,该函数才起作用,设置元件边界. 一般构建窗口我们 ...
- sqlserver2008 如何定时清理索引碎片
sqlserver2008 如何定时清理索引碎片 查询索引引起的表垃圾碎片sql脚本: SELECT object_name(a.object_id) [TableName] ,a.index_id ...
- 深入理解Java虚拟机博客参考目录
参考博客:注明请注明出处 深入理解Java虚拟机读书笔记之:第5章 Java虚拟机(Java虚拟机内部结构图,很重要) 深入理解Java虚拟机读书笔记之:第6章 Java class文件: <深 ...
- SQL通过日期计算年龄
首先建立一个表如下: ======================= BirthDay datetime not null Age 通过公式计算得出 ======================= 以 ...
- Linux学习三部曲(之二)
新建Linux分区以及文件系统 今天,我们来聊聊在linux上建立分区和文件系统.windows系统建立分区可以借助分区工具,那么在linux分区以及文件系统又该如何操作呢? 打开secureCRT, ...
- Comparator和Comparable
java.util 接口 Comparator<T> compare int compare(T o1, T o2) 比较用来排序的两个参数.根据第一个参数小于.等于或大于第二个参数分 ...
- (UVA 11624)Fire!
题目链接 http://vjudge.net/contest/121377#problem/J Joe works in a maze. Unfortunately, portions of the ...