介绍 & lt; !doctype html>
& lt; html>
& lt; head>
& lt;元charset=utf-8>
& lt; title>歌词同步播放器动力由widuu xiaowei
& lt;元http-equiv=癈ache-Control"内容=皀o-cache"比;
& lt;元名称=皏iewport"内容=翱矶?设备宽度;初始=1.0;最小刻度=1.0;,最大范围=1.4“的在
& lt;元名称=癕obileOptimized"内容=?40“比;
& lt;链接的href=?mp3/css/blue.css"rel=皊tylesheet"类型=拔谋?css"/比;
& lt;脚本类型=拔谋?javascript"src=?mp3/js/jquery.js"祝辞& lt;/script>
& lt;脚本类型=拔谋?javascript"src=?mp3/js/jquery.jplayer.js"祝辞& lt;/script>
& lt;脚本类型=拔谋?javascript"src=?mp3/js/lrc.js"祝辞& lt;/script>
& lt;风格类型=拔谋?css"比;
*{保证金:0;填充:0;}
ul、ol, dl {list-style:没有;}
.content李。悬停{颜色:红色;}
.content{宽度:402 px;身高:200 px;背景:# ccc;溢出:隐藏;填充:10 px;}
& lt;/style>
& lt; script>//& lt; ! [CDATA [
$(文档)时函数(){
$ (“# jquery_jplayer_1") .jPlayer ({
准备:函数(事件){
(美元).jPlayer (“setMedia", {
mp3:“yangcong.mp3"//mp3的播放地址
}).jPlayer (“play");
},
timeupdate:函数(事件){
如果(event.jPlayer.status.currentTime==0) {
时间=?“;
其他}{
时间=event.jPlayer.status.currentTime;
}
},
游戏:函数(事件){//点击开始方法调用lrc.start歌词方法返回时间
如果(event.jPlayer.status.currentTime==0) {
$ (“# jquery_jplayer_1") .jPlayer (“pause", 1);
}
if ($ (& # 39; # lrc_content& # 39;) .val () !==啊? {
(.lrc.start美元(& # 39;# lrc_content& # 39;) .val()函数(){
返回时间;
});
其他}{
$ (“.content") . html(“没有字幕“);
}
},
重复一遍:函数(事件){
如果(event.jPlayer.options.loop) {
(美元).unbind (“.jPlayerRepeat") .bind (.jPlayer.event美元。结束+“.jPlayer.jPlayerRepeat"函数(){
(美元).jPlayer (“play");
});
其他}{
(美元).unbind (“.jPlayerRepeat");
}
},
swfPath:“/js"//存放jplayer.swf的决定路径
解决方案:“html、flash"//支持的页面
提供:“mp3"//支持的音频的格式
窗口模式:“window"
});
$ (“# lrc_content") hide ();
});//]]比;
& lt;/script>
& lt;/head>
& lt; body>
& lt; textarea id=發rc_content"name=皌extfield"关口=?0”;,行=?0“的在
[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)
& lt;/textarea> & lt;/p>
& lt; p> & lt; p>
& lt; p id=癹query_jplayer_1"类=癹p-jplayer"祝辞& lt;/p>
& lt; p id=癹p_container_1"类=癹p-audio"比;
类& lt; p=癹p-type-single"祝辞
类& lt; p=癹p-gui jp-interface"比;
& lt; ul类=癹p-controls"祝辞
& lt; li> & lt; a href=癹avascript:“类=癹p-play"tabindex=?“祝辞play
小编给大家分享一下html5如何实现兼容各大浏览器的播放器,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
歌曲播放我们会发现他的兼容性不是很好,譬如IE上能播放的flash播放器,再firfox或者chrome上就不是很好的应用了,因为有插件的阻碍!HTML5的出现让这一切成为了可能,但是播放器虽然播放了,我们还要关注一下用户的体验度,所以,我们就写了一个HTML兼容的播放器!向下兼容IE6-9, chrome, firfox,歌剧等主流播放器,应该是全兼容!实现原理代码给大家奉上!
