網頁播放器與播放器定製

背景：

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"