環(huán)形音樂播放器
公司主營業(yè)務(wù)：成都網(wǎng)站制作、網(wǎng)站設(shè)計、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)建站是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)建站推出東方免費做網(wǎng)站回饋大家。
這款超級酷炫的HTML5音樂播放器是環(huán)形的，看起來好像是一個唱片封面，背景圖片很漂亮，設(shè)置了播放鍵、音量調(diào)整鍵、快進和后退鍵，可謂功能齊全、外觀靚美。還在苦惱不知道怎么用HTML5設(shè)計音樂播放器的朋友可以學(xué)習(xí)一下。
超級帶感的HTML5音樂播放器
這個音樂播放器的背景全部是黑色的，但不是純黑，帶有黑色質(zhì)感狀，外觀看起來非?？犰拧ｋm然整體看起來并不是很復(fù)雜，但是功能可不小。播放、暫停、快進、后退、音量控制一個都不少。
酷炫視頻播放器
這個視頻播放器同樣可以用來播放音樂、MV，這是一款UI界面設(shè)計非常出色的HTML播放器，整個界面非常簡單，好像在看一部電影大片，設(shè)置了播放/暫停、音量調(diào)節(jié)等，這款播放器最大的特點就是可以全屏觀看，支持視頻和音頻播放。
看了這么多酷炫的播放器設(shè)計，學(xué)習(xí)HTML5開發(fā)的朋友們，你們有什么想法嗎？隨著HTML5技術(shù)的快速發(fā)展，越來越多的HTML5作品設(shè)計也更加酷炫。還會有更多有關(guān)HTML5作品設(shè)計的內(nèi)容跟大家分享，大家請多多關(guān)注。
[img]可以使用html5的audio標(biāo)簽來添加音樂播放器
audio?controls
type:指定文件類型 ?
source?src="horse.ogg"?type="audio/ogg"
???source?src="horse.mp3"?type="audio/mpeg"
/audio
對應(yīng)的參數(shù)屬性如下圖：
推薦使用ckplayer，
最新更新日期：2018-01-10
修正了不能播放部分rtmp視頻的bug
增加了刪除緩動的api
升級方法
替換ckplayer.swf及ckplayer.js中112行!(function() {以下的內(nèi)容
在ckplayer.js及ckplayer.xml中搜索“addCallback”屬性節(jié)點，列表中增加deleteAnimate屬性
最新更新日期：2017-12-14
調(diào)用播放器初始化時增加了一個屬性playerID，可以在同頁面多播放器時用來區(qū)分不同的播放器發(fā)出的監(jiān)聽事件
修正了一些無關(guān)緊要的bug
增加了h5部分對于控制欄的限制以及相對應(yīng)的api
統(tǒng)一了flashplayer和h5的右鍵設(shè)置
增加了播放器動作按鈕點擊的監(jiān)聽函數(shù)clickEvent
升級方法
替換ckplayer.swf及ckplayer.js中112行!(function() {以下的內(nèi)容
更新日期：2017-12-08
修正了h5字幕文件顯示樣式控制不了的bug
增加了控制控制欄顯示/隱藏的接口
升級方法
替換ckplayer.swf及ckplayer.js中113行!(function() {以下的內(nèi)容
搜索ckplayer.js以及ckplayer.xml中的addCallback屬性，在其最后添加：“,changeControlBarShow”
更新日期：2017-11-24
修正了html5環(huán)境中視頻出錯時播放器上方不顯示錯誤提示的bug
升級方法
替換ckplayer.swf及ckplayer.js中113行!(function() {以下的內(nèi)容
更新日期：2017-11-23
1：增加了flashplayer中調(diào)用視頻地址包含逗號時出錯的bug
2：修正了當(dāng)刪除ckplayer.js的配置logo被刪除后html5環(huán)境出錯的bug
3：修正了html5中緩沖圖標(biāo)沒有動畫效果的bug
升級方法，1:替換ckplayer.swf、2：替換ckplayer.js中112行!(function() {以下的內(nèi)容、3：在ckplayer.js中找到“m3u8MaxBufferLength: 30,”，在該行下面增加“split:',',”、4：在ckplayer.xml中找到“m3u8MaxBufferLength30/m3u8MaxBufferLength”，在該行下面增加“split,/split”
更新日期：2017-11-16
1：修復(fù)了ipad不能播放m3u8的bug
2：修改移動端默認(rèn)不使用ckplayer自定義風(fēng)格
3：html5風(fēng)格中增加了倍速播放按鈕列表
4：html5環(huán)境中增加了倍速播放api
升級方法，只需要替換ckplayer.swf以及ckplayer.js中112行!(function() {以下的內(nèi)容
更新日期：2017-11-10
HTML5環(huán)境支持視頻的旋轉(zhuǎn)和縮放，修改的文件為ckplayer.js，修改的內(nèi)容是videoRotation()函數(shù)和videoZoom()函數(shù)
更新日期：2017-11-07，更新內(nèi)容（如果你不是使用的rtmp則無需更新）：
1：html5播放器統(tǒng)一使用ckplayerConfig()函數(shù)里指定的logo圖片做為logo
2：修正了部分rtmp直播流無法播放的bug
3：修正了一些其它bug
ckplayer X版本升級說明，2017-11-01
一：重構(gòu)代碼
1：完全重構(gòu)了ckplayer.js、ckplayer.xml，配置規(guī)則標(biāo)準(zhǔn)化。不再使用同一個屬性定義多個值的形式進行配置。ckplayer.js中的html5部分采用自定義風(fēng)格的功能。
2：完全重構(gòu)了language.xml，語言包進行了可擴展升級。
3：完全重構(gòu)了風(fēng)格文件。不再采用以前版本的壓縮包形式，而是僅采用style.xml進行配置，圖片文件全部轉(zhuǎn)化成base64使用，并且支持加密。保護您的插件。并且支持自定義按鈕，圖片或swf的功能。
二：功能方面的升級
1：廣告部分增加了新的廣告形式，插入廣告，結(jié)尾廣告，其它類型的廣告（如橫幅，角標(biāo)等自定義顯示時間），保留原來的前置廣告，暫停廣告。增加了廣告展示監(jiān)聽，廣告點擊監(jiān)聽功能。
2：播放部分升級了對m3u8格式的內(nèi)部支持，不再使用外部插件播放。
3：增加了flashplayer環(huán)境對m3u8文件的加密支持。
4：內(nèi)置了清晰度支持功能，以及m3u8清晰度自動選擇及顯示的支持。
5：內(nèi)置了彈幕顯示功能，多種緩動效果?？梢灾谱鞒龆喾N彈幕顯示效果。并且支持彈幕和播放器的互動，以前和js的互動。
6：重構(gòu)了播放器的API
三：其它說明
本次升級是一次非常大的升級行為，跟之前版本基本毫無聯(lián)系。調(diào)用播放器的代碼更加簡單高效智能化。
HTML代碼，其中使用HTML5標(biāo)簽有audio、input中type="range"標(biāo)簽?！安シ帕斜怼钡膌i標(biāo)簽太長，合并縮起來如下：
CSS代碼
輸入相應(yīng)的CSS代碼
JavaScript代碼
獲取HTML元素，包括點擊的按鈕，圖片，播放列表等
音量按鈕的JavaScript代碼
設(shè)置自動播放、播放文件、播放音量、播放時間、播放切換的JavaScript代碼
上一首點擊按鈕JavaScript代碼
下一首點擊按鈕JavaScript代碼
點擊列表播放JavaScript代碼
HTML代碼，其中使用HTML5標(biāo)簽有audio、input中type="range"標(biāo)簽?！安シ帕斜怼钡膌i標(biāo)簽太長我給合并縮起來了。
CSS代碼
輸入相應(yīng)的CSS代碼
JavaScript代碼
獲取HTML元素，包括點擊的按鈕，圖片，播放列表等
音量按鈕的JavaScript代碼
設(shè)置自動播放、播放文件、播放音量、播放時間、播放切換的JavaScript代碼
上一首點擊按鈕JavaScript代碼
下一首點擊按鈕JavaScript代碼
點擊列表播放JavaScript代碼
重慶分公司
重慶分公司
