网页播放器与播放器定制

背景

H5支持了很多多媒体元素标签，至此可以很方便的使用video、audio等进行多媒体元素渲染。而在线视频、音乐等等，则更充分利用了此特性。实现网页在线音乐播放器或视频播放器也很简单，原理就是你的代码加网络的视频音频资源。

方法

这里我是用来做博客园个人主页的定制的，考虑加一个类似QQ空间的音乐播放器组件。当然，也可以加一下类似列表、播放模式等元素，也很简单，暂不赘述。

代码

audio::-webkit-media-controls {
　　overflow: hidden !important
}
audio::-webkit-media-controls-enclosure {
　　 calc(100% + 32px);
　　margin-left: auto;
}

　　屏蔽下载，下载了就不好玩了。

<div id="mp3LjwSyt"></div>
// 以上是html，我添加在了公告栏；以下是js
var mp3Str = '<audio controls="" autoplay="" name="media" controls="controls" controlsList="nodownload" oncontextmenu="return false"><source src="xxx.mp3" type="audio/mpeg"></audio>'
// src填你自己的多媒体资源地址
$("#mp3LjwSyt").empty().append(mp3Str)

可扩展

增加播放列表及其控制、增加资源列表来配合渲染播放列表和控制的逻辑。

关于播放器屏蔽下载等默认菜单

谷歌浏览器音频视频下载比较方便，不像IE火狐等，尤其是IE，苦苦找各种资源资料的同学应该深有体会。而对于网络开发来说，又不想用户能随随便便下载，所以就考虑到屏蔽下载的功能。以上css代码适合所有版本的谷歌，

controls="controls" controlsList="nodownload"只适合部分高版本谷歌；同时，还要屏蔽右键，因为右键里也有下载菜单。

oncontextmenu="return false"

另一种方式

上边的方法可能存在链接失效的问题，还有就是样式需要自己写一下。除此之外还有一种方法，用一些音乐网站比如网易云音乐，生成外链（既可以单首，也可以歌单），如果是歌单，还可以实现多首音乐播放。当然大部分歌单都是被限制了的。生成后直接复制到博客园的设置里即可，也不需要写多余的样式。