輕量 HTML5 播放器:AetherPlayer

jopen 9年前發布 | 33K 次閱讀 多媒體播放器 AetherPlayer

AetherPlayer是一個類CD的輕量HTML5播放器,特別適合博客及個人站點使用。它漂亮得不像……咳,這邊吹牛的話就不說了。

aetherplayer

安裝AetherPlayer簡單到只需要為你的文件添加一行代碼。

特點

  • 自動加載 : 只需要添加引導文件,剩余的都會在運行時自動加載。

  • 延遲加載 : 所有AetherPlayer相關文件都會在你原有頁面全部完成后才會加載,完全不必擔心影響原有頁面的加載速度。

  • 自定義配置 : 你可以在配置中更改默認的位置,播放模式,debug等參數。

  • 預加載 : 播放列表中所有專輯封面圖會在播放器初始化時開始順序加載,即在播放到對應的曲目之前,封面圖就已加載完畢。

用法

0) 把整個文件夾拷貝到你的項目中,你可以把它放到任意位置。

1) 將AetherPlayer_bootstrap.js引入到你想要添加AetherPlayer的頁面文件, 然后給它一個名為aetherplayer-bootstrap的id。 AetherPlayer相當智能以至于它能夠自動為你導入剩余的文件。

例 <script src="assets/aetherplayer/js/AetherPlayer_bootstrap.js" id="aetherplayer-bootstrap"></script>

2) 在js/playlist.js中編輯播放列表。

例 var playList=[{'artist':'Adele','songName':'rolling in the deep','songURL':'http://www.xxx.com/path/to/song/rolling_in_the_deep.mp3','songAlbum':'http://www.xxx.com/path/to/album/rolling_in_the_deep.jpg'},];

3) 享受音樂吧:)

提示:在這之前你可以在js/AetherPlayer.js中更改相關初始配置。


項目主頁:http://www.baiduhome.net/lib/view/home/1445842008023

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!