网页播放器与播放器定制

背景：

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

方法：

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

代码：

audio::-webkit-media-controls {
　　overflow: hidden !important
}
audio::-webkit-media-controls-enclosure {
　　width: 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"