网页播放器与播放器定制

背景：

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" οncοntextmenu="return false"><source src="xxx.mp3" type="audio/mpeg"></audio>'
// src填你自己的多媒体资源地址
$("#mp3LjwSyt").empty().append(mp3Str)

可扩展：

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

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

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

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

οncοntextmenu="return false"

转载于:https://www.cnblogs.com/ljwsyt/p/11174654.html