html5实现完美兼容各大浏览器的播放器


Posted in HTML / CSS onDecember 26, 2014

歌曲播放我们会发现他的兼容性不是很好,譬如IE上能播放的flash播放器,再firfox或者chrome上就不是很好的应用了,因为有插件的阻碍!HTML5的出现让这一切成为了可能,但是播放器虽然播放了,我们还要关注一下用户的体验度,所以,我们就写了一个HTML兼容的播放器!向下兼容IE6-9、chrome、firfox、opera等主流播放器,应该是全兼容!实现原理代码给大家奉上!

复制代码
代码如下:

<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>歌词同步播放器-powered by widuu xiaowei</title>
<meta http-equiv="Cache-Control" content="no-cache">
<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.4">
<meta name="MobileOptimized" content="240">
<link href="/mp3/css/blue.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/mp3/js/jquery.js"></script>
<script type="text/javascript" src="/mp3/js/jquery.jplayer.js"></script>
<script type="text/javascript" src="/mp3/js/lrc.js"></script>
<style type="text/css">
* { margin:0; padding:0; }
ul, ol, dl { list-style:none; }
.content li.hover{ color:red; }
.content{ width:402px; height:200px; background:#ccc; overflow:hidden; padding:10px;}
</style>
<script>
//<![CDATA[
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function (event) {
$(this).jPlayer("setMedia", {
mp3:"yangcong.mp3" //mp3的播放地址
}).jPlayer("play");
},
timeupdate: function(event) {
if(event.jPlayer.status.currentTime==0){
time = "";
}else {
time = event.jPlayer.status.currentTime;
}

},
play: function(event) {
//点击开始方法调用lrc。start歌词方法 返回时间time

if(event.jPlayer.status.currentTime==0){
$("#jquery_jplayer_1").jPlayer("pause",1);
}

if($('#lrc_content').val()!==""){
$.lrc.start($('#lrc_content').val(), function() {
return time;
});
}else{
$(".content").html("没有字幕");
}
},
repeat: function(event) {
if(event.jPlayer.options.loop) {
$(this).unbind(".jPlayerRepeat").bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function() {
$(this).jPlayer("play");
});
} else {
$(this).unbind(".jPlayerRepeat");
}
},
swfPath: "/js", //存放jplayer.swf的决定路径
solution:"html, flash", //支持的页面
supplied: "mp3", //支持的音频的格式
wmode: "window"

});
$("#lrc_content").hide();
});
//]]>
</script>
</head>
<body>
<textarea id="lrc_content" name="textfield" cols="70" rows="10">
[ar:测试用 ]
[00:03.00]洋葱
[00:06.00]演唱:平安
[00:09.00]
[00:11.38]如果你眼神能够为我片刻的降临
[00:21.23]如果你能听到心碎的声音
[00:28.88]盘底的洋葱像我永远是配角戏
[00:35.74]偷偷的看着你偷偷的隐藏着自己
[00:43.48]
[00:44.90]如果你愿意一层一层
[00:48.46]一层的剥开我的心
[00:52.66]你会发现你会讶异
[00:56.40]你是我最压抑最深处的秘密
[01:00.26]如果你愿意一层一层
[01:03.69]一层的剥开我的心
[01:07.76]你会鼻酸你会流泪
[01:11.60]只要你能听到我看到我的全心全意
[01:18.30]
[01:19.11]如果你愿意一层一层
[01:22.57]一层的剥开我的心
[01:26.66]你会发现你会讶异
[01:30.41]你是我最压抑最深处的秘密
[01:34.48]如果你愿意一层一层
[01:37.58]一层的剥开我的心
[01:41.51]你会鼻酸你会流泪
[01:45.15]只要你能听到我看到我的全心全意
[01:53.55]
[01:55.65]你会鼻酸你会流泪
[01:59.84]只要你能听到我看到我的全心全意
[02:12.57]
</textarea></p> <p><p>
<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-time-holder">
<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>
<div class="jp-title">
<ul>
<li>mp3player powered by xiaowei</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="<a href="http://get.adobe.com/flashplayer/">http://get.adobe.com/flashplayer/</a>" target="_blank">Flash plugin</a>.
</div>
</div>
</div>
<div class="content"><ul id="lrc_list">
点击开始播放……
</ul></div>
</body>
</html>

HTML / CSS 相关文章推荐
CSS3实现简易版的刮刮乐效果
Sep 27 HTML / CSS
详解CSS3伸缩布局盒模型Flex布局
Aug 20 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
Nov 16 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
May 03 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 HTML / CSS
HTML5 localStorage使用总结
Feb 22 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
浅析HTML5 Landmark
Sep 11 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 HTML / CSS
sass 常用备忘案例详解
Sep 15 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 #HTML / CSS
浅谈html5 响应式布局
Dec 24 #HTML / CSS
HTML5进度条特效
Dec 18 #HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 #HTML / CSS
canvas需要在标签里直接定义宽高
Dec 17 #HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 #HTML / CSS
使用canvas绘制超炫时钟
Dec 17 #HTML / CSS
You might like
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
php一次性删除前台checkbox多选内容的方法
2013/09/22 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
用原生js做单页应用
2017/01/17 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
node基于async/await对mysql进行封装
2019/06/20 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
python列表去重的二种方法
2014/02/14 Python
跟老齐学Python之编写类之三子类
2014/10/11 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
Python缓存技术实现过程详解
2019/09/25 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
资料员的岗位职责
2013/11/20 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
2014年文艺部工作总结
2014/11/17 职场文书
客服专员岗位职责
2015/02/10 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang