背景:
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"