Jplayer相关(转)
Jplayer必须要加载
1.样式 jplayer.blue.monday.css
2.jq jquery.1.6.2.min.js 当前最新版本为1.6.2
3.jplayer的js jquery.jplayer.min.js
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代码:
- play
- pause
- stop
- mute
- unmute
- hello word
注:页面必须在挂在服务器上才能正常,不然播放器会出现很多火星问题,像火狐、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) ? “
- ” : “
- ”;
listItem += “”+ this.playlist[i].name +""; // Create links to free media
if(this.playlist[i].free) {
var first = true;
listItem += “(”;
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ty,value) { if(.jPlayer.prototype.format[property]) { // Check property is a media format.
if(first) {
first = false;
} else {
listItem += " | ";
}
listItem += “” + property + “”;
}
});
listItem += “)”;
}listItem += “”;
// 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) {
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ty,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,
});});
//]]>页面:
- play
- pause
- stop
- mute
- unmute
- previous
- next
转:http://blog.hfut.edu.cn/index.php/uid-44328-action-viewspace-itemid-86949
Jplayer相关(转)相关推荐
- jPlayer插件的使用
文讲一下本人在使用jPlayer插件时的整个过程.出现的BUG已经解决办法. 最近在做bootstrap项目,项目中需要一个响应式.兼容IE7的视频播放插件,经过上网查找,找到了所谓可以兼容到IE6的 ...
- Jplayer歌词同步显示插件
http://blog.csdn.net/wk313753744/article/details/38758317 1.该插件是一个jquery的编写的跟jplayer实现歌词同步的插件,最终效果如图 ...
- jplayer插件的api_如何使用jPlayer插件(jQuery)在您的网站上添加音频和视频
jplayer插件的api jPlayer video player. Today we continue jQuery lessons, and will talk about adding cus ...
- jPlayer使用指南
1. jPlayer基础 1\ FLASH安全规则 a. jPlay插件的SWF文件必须要在你的域内,子域与主域被视为不同域.也不要从happyworm.com网站(就是提供这个插件的网站)来链接这些 ...
- Jplayer歌词同步显示插件(在以前别人基础上修改)
1.该插件是一个jquery的编写的跟jplayer实现歌词同步的插件,最终效果如图: 2.首先引入jplayer的相关的js库和样式文件. <meta http-equiv="Con ...
- jPlayer的一些用法[转]
http://tianyalinfeng.iteye.com/blog/1772264 播放器相关 //初始化 $("#jquery_jplayer_1").jPlayer({ r ...
- 基于jQuery的网页影音播放器jPlayer的基本使用教程
原文地址:http://www.jb51.net/article/80655.htm jPlayer简介: 想在网页上播放背景音乐,不想用html标签的方式,因为那样只有音乐全部下载完以后才能播放,还 ...
- html5视频播放器原理,HTML5 - 两款基于JS的视频播放器的使用说明(VideoJS和jPlayer)...
通常我们使用HTML5播放器播放视频时,还要考虑浏览器兼容.像IE8这种不支持的古董级浏览器,就需要提供Flash播放器作为备用方案.这些如果都要自己弄就很麻烦. 这里推荐两个好用的HTML5媒体播放 ...
- jPlayer web多媒体播放器使用指南
1. jPlayer基础 1 FLASH安全规则 a. jPlay插件的SWF文件必须要在你的域内,子域与主域被视为不同域.也不要从happyworm.com网站(就是提供这个插件的网站)来链接这些 ...
最新文章
- java 图片层级_Java Collection 和Map类层次结构图
- React中antd的按需引入+自定主题
- 设置将pip的下载源变更为国内源-windows配置方法
- Python高级爬虫实战,JS解密咪咕音乐登录参数分析
- 关于JSTL的简单说明
- Unity3D之NGUI基础5.1:代码控制UISprite
- Express框架学习笔记-构建模块化路由
- Linux(Centos)服务器时间校准
- 慕课软件质量保证与测试(第十章.课后作业)
- 大数据分析-第十一章 图挖掘-动机,应用和算法
- 移动机器人路径规划minimum_snap(MATLAB)笔记整理
- 我的2016——程序员年到三十,工作第四年
- 如何查看电脑的操作系统以及更改计算机名称
- windows下编译64位x264
- 计算机网络安全叙述,计算机网络安全涉及
- 飞行棋技巧:你以为想赢只需要运气吗?
- react中的this.state与this.setState的区别
- CAD转换技巧:高版本CAD文件转换成低版本在线版最简单
- 太阳系及银河系尺寸的直观概念
- java对象是什么数据类型,Java面试题及解析
热门文章
- python批量获取淘宝主图地址
- 置信区间的置信区间_xgboost的置信区间
- 目前主流浏览器及其内核
- AANet_Attribute_Attention_Network_for_Person_Re-Identifications
- WINDOWS API ——SETWINDOWLONG—— 设置窗口样式 SetWindowLong 函数原型为:LONG SetWindowLong(HWND hwnd,int nIndex,Lon
- 201521123089 《Java程序设计》第8周学习总结
- ADMM求解优化NMF
- C++ int与string相互转换
- 【CS224W】(task7)标签传播与节点分类(semi-supervised)
- 硬币之谜:如何用最少的步骤拿完所有硬币?