首页 >

基于jQuery的网页影音播放器jPlayer的基本使用教程【jquery】

web前端|js教程基于jQuery的网页影音播放器jPlayer的基本使用教程【jquery】
jQuery,视频,音频,播放器,JavaScript
web前端-js教程
jPlayer简介:
商家后台php 源码下载,ubuntu遇到内部错误,tomcat9删不掉,简单画爬虫,php图片上传表单,分析seo优化前的诊断有多重要lzw
想在网页上播放背景音乐,不想用html标签的方式,因为那样只有音乐全部下载完以后才能播放,还容易出现跨浏览器兼容性的问题,于是选了一款基于jQuery的播放器jPlayer来做。
微博删评论源码,vscode显示制表符,ubuntu 各分区,tomcat地址设置多少,爬虫多级页面,新浪云php数据库,静海seo优化多少钱,2019微信群二维码网站源码,php留言板网页模板下载lzw
设置jPlayer的尺寸大小
使用构造函数配置jPlayer({size:Object})设置jPlayer的高宽。
关于卡盟源码,vscode控制台输入乱码,ubuntu立即播放,tomcat查看日志级别,vba爬虫 防盗,php前言,南宁seo网站排名优化推广,flash网站片头下载lzw
使用构造函数配置jPlayer({sizeFull:Object})设置全屏尺寸。

注意可通过构造函数配置jPlayer({backgroundColor:”#RRGGBB”})设置jPlayer背景颜色。

Flash 安全规则
使用下面的代码放宽了对jPlayer SWF 文件的限制,并且可以调用任何域名的swf文件了。

flash.system.Security.allowDomain("*");flash.system.Security.allowInsecureDomain("*");
部署

通常,要上传swf文件和js文件到你域名下的js目录中。更改swf路径使用构造函数配置jPlayer({“swfPath”:path})。

严格来讲,插件文件可能会远程链接到jplayer.org上,但请求你们不要链接到jplayer.com上,因为当前我们还没有充足资源做一个cdn。另外,远程服务器上的Flash播放软件要求所有的jPlayer(“setMedia”, media)设置的多媒体文件URL使用绝对路径。

要在本地开发,你需要在自己的电脑上安装一个服务器,比如apache,使localhost生效。

使用Javascript API控制你网站上的媒体文件jPlayer支持的媒体格式:HTML5: mp3, m4a (AAC), m4v (H.264), ogv*, oga*, wav*, webm* Flash: mp3, m4a (AAC), m4v (H.264)

jPlayer需要两个文件上传到你的服务器:

(1)Jplayer.swf

(2)jquery.jplayer.min.js

jPlayer构造在jQuery选择器上。采用 $(ID).jPlayer(Object: options) 的形式执行动作。在某些场合,jPlayer也可以构造在body上,指你不用播放视频的时候。

注意:swfPath,它定义jPlayer SWF文件的路径。记得把SWF文件上传到你的服务器!你也可以使用类似jPlayer({solution:”flash, html”)的语句规定用什么方式播放媒体优先。

初始化后更改设置
初始化之后 使用类似 jPlayer(“option”,{key:value})的形式改变设置。
实现一个自动播放音乐的网页

$(document).ready(function(){ $("#jquery_jplayer_1").jPlayer({ ready: function (event) {  $(this).jPlayer("setMedia", {  m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a",  oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"  }); }, swfPath: "js", supplied: "m4a, oga", }).jPlayer("play");});
解释一下上面的代码:

第一行“$(document).ready(function(){”大家都无比亲切吧,文档载入事件。

第二行“$(“#jquery_jplayer_1”).jPlayer({”选择的是一个DIV,用于承载HTML5元素或是Flash,大家在文档里写一个空的DIV即可。

第三行“ready: function (event) {”,ready是一个键,function是一个值,灰常熟悉的东西。

第四行“$(this).jPlayer(“setMedia”, {”this指的是“$(“#jquery_jplayer_1”)”,意为:“$(“#jquery_jplayer_1”).jPlayer(“setMedia”, {”很熟悉。setMedia是一个option,根据第二步说的。

第九行“swfPath: “js”,”,这个定义了swf播放器所在的相对路径,如果你不打算兼容不支持HTML5的网页,可以不写:)

第十行“supplied: “m4a, oga”,”所支持的格式。

第十一行“jPlayer(“play”);”意为:$(“#jquery_jplayer_1”).jPlayer(“play”);,播放媒体,实现自动播放。

jPlayer常用的方法:

//播放$("#jpId").jPlayer("play");//暂停$("#jpId").jPlayer("pause");//停止$("#jpId").jPlayer("stop");//设置进度相关//1.按歌曲时长百分比$("#jpId").jPlayer("playHead", 0);// 从 0% 处开始播放$("#jpId").jPlayer("playHead", 10);// 从 10% 处开始播放$("#jpId").jPlayer("playHead", 100);// 从 100% 处开始播放//2.按播放毫秒数$("#jpId").jPlayer("playHeadTime", 0);// 从 0毫秒 处开始播放$("#jpId").jPlayer("playHeadTime", 10000); // 从 10000毫秒(10秒) 处开始播放//设定音量$("#jpId").jPlayer("volume", 0.25); //设为最大音量的 25%//绑定事件//播放结束事件$("#jpId").jPlayer("onSoundComplete", function() {  //alert('播放结束了');  this.element.jPlayer("play"); // 循环播放});//播放进行事件$("#jpId").jPlayer("onProgressChange", function(lp,ppr,ppa,pt,tt) {  var s = '缓冲百分比:'+lp +'% ,';  s += '已播放占已缓冲的百分比:'+ppr +'% ,';  s += '已播放占总时长的百分比:'+ppa +'%';  s += '已播放时间:'+pt+ '毫秒 ,';  s += '总时间:'+tt+ '毫秒';  $("#play_info").text(s);});

  • 暂无相关文章
  • Posted in 未分类