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

显示全部楼层 · 2021-1-27 10:41:25

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

　　
　　
　　
　　
　　歌词同步播放器-powered by widuu xiaowei
　　
　　
　　
　　

　　
　　* { 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;}
　　
　　
　　
　　
　　
　　[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]
　　

　　
　　
　　
　　
　　
　　
play
　　
pause
　　
stop
　　
mute
　　
unmute
　　
max volume
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
repeat
　　
repeat off
　　
　　
　　
　　
　　
　　

mp3player powered by xiaowei
　　
　　
　　
　　Update Required
　　To play the media you will need to either update your browser to a recent version or update your http://get.adobe.com/flashplayer/" target="_blank">Flash plugin.
　　
　　
　　
　　
　　点击开始播放……
　　
　　
　　
　　文章来源于：http://www.codepub.com/