?

video.h5.player.js（內(nèi)部項目）是一款基于flowplayer開發(fā)的視頻播放器，播放核心采用video標簽/flash控件，界面完全交由用戶自己定制。其中，flash控件的應(yīng)用場景為m3u直播流。

Usage

<!-- 引入資源文件 --> <!-- 樣式表 --> <link href="/dist/video.h5.player.css" rel="stylesheet"> <!-- 依賴庫 --> <script src="/jquery.js"></script> <!-- 核心庫 --> <script src="/dist/video.h5.player.js"></script> <!-- HTML --> <!-- 播放器容器 --> <div id="J_MyPlayer" class="flowplayer fp-mute"></div> // JS // 創(chuàng)建播放器實例（該實例方法由用戶基于video.h5.player.js自定義實現(xiàn)，這里僅作演示） var myPlayer = videoH5Player();// 初始化播放MV myPlayer.init({container: 'J_MyPlayer', // 容器idtype: 3, // 播放源類型，1-直播，2-回播/回放，3-MV，4-圖片content: '600570YAUW4', // MV版權(quán)idautoplay: true, // 是否自動播放adOn: {prerollAd: 'off', // 前置視頻廣告pauseAd: 'off', // 暫停圖片廣告stickerAd: 'off' // 貼角圖片廣告},// 播放完畢回調(diào)函數(shù)onFinish: function (myPlayer, e, api) {// console.log(myPlayer);// console.log(e);// console.log(api);console.log('播放結(jié)束，跳轉(zhuǎn)到0.1秒處');api.seek(0.1);} });

以上代碼以MV為例，完成了播放器的初始化，初始化生成了一些基礎(chǔ)的默認播放控件，如：

• 播放/暫停
• 當(dāng)前播放時間
• 視頻總時間
• 靜音
• 音量
• 全屏播放
• 社交平臺分享（左上角連同視頻分發(fā)平臺已打碼，見諒）

播放器默認界面

Extend plugins

video.h5.player.js為播放器提供了方便的擴展接口，用戶只需要按照約定的模板編寫控件，然后將編寫好的控件js文件引入video.h5.player.js后即可，比如我們擴展了如下控件：

<!-- 核心庫 --> <script src="/js/video.h5.player.js"></script> <!-- 清晰度切換 --> <script src="/js/video.h5.player.bitrate.js"></script> <!-- 彈幕開關(guān) --> <script src="/js/video.h5.player.barrage.js"></script>

擴展后的播放器示意圖如下：

自定義播放器界面（畫面為孫燕姿的《風(fēng)衣》MV截圖）

其中，所有的界面都可以進行定制化開發(fā)，包括字體圖標，等等。

值得注意的是，video.h5.player.js為封裝了flowplayer庫的核心庫，用戶基于video.h5.player.js進行二次封裝的foo.video.h5.player.js，則為自定義播放器。核心庫經(jīng)實例化后會返回自身對外暴露的屬性和方法，以供自定義播放器調(diào)用。

Params(read only)

自定義播放器屬性

• barrageMax {number}
  彈幕最大行數(shù)

• errorTimeout {number}
  播放器錯誤當(dāng)前重啟次數(shù)（超過最大次數(shù)后將不再進行重啟）

• errorTimeoutMax {number}
  播放器錯誤重啟最大次數(shù)

• errorTimeoutMax {number}
  播放器錯誤重啟最大次數(shù)

• lastFxArray {array}
  過去幾次彈幕位置（最大記錄次數(shù)為彈幕行數(shù)）

• lastPlayTime {number}
  上次累計觀看時間（單位秒）

• playTimeExpire {number}
  上次累計觀看時間cookie過期時間（默認2小時，單位毫秒）

• playTimeExpireDate {number}
  累計觀看時間cookie過期日期（單位毫秒）

• player {object}
  播放器核心庫實例對象

播放器核心庫屬性

• player.barrage {object}
  彈幕對象，屬性包含彈幕容器id和彈幕總條數(shù)

• player.barrageStat {boolean}
  彈幕開關(guān)狀態(tài)

• player.bitrate {string}
  當(dāng)前碼率，SD-標清，HD-高清，BD-超清

• player.container {string}
  播放器所在容器id

• player.core {object}
  播放器播放內(nèi)核（即flowplayer實例對象，通過該對象能夠直接調(diào)用內(nèi)核的API，不推薦）

• player.dom {object}
  播放器容器jquery對象

• player.height {number}
  播放器高度

• player.width {number}
  播放器寬度

• player.live {boolean}
  是否是直播

• player.m3u8 {boolean}
  是否是m3u8源

• player.marqueeAd {object}
  滾屏廣告

• player.originHtml {string}
  原始html結(jié)構(gòu)，用于徹底銷毀播放器后的初始化

• player.pauseAd {object}
  暫停廣告

• player.pauseAdFresh {boolean}
  是否是最新的暫停廣告（以此判斷是否需要去獲取新的暫停廣告曝光地址）

• player.paused {boolean}
  視頻是否暫停

• player.plugins {object}
  自定義插件jquery對象

• player.prerollAd {object}
  片頭廣告

• player.prerollEnded {boolean}
  片頭廣告結(jié)束狀態(tài)

• player.stickerAd {object}
  貼片廣告

• player.stickerEnded {boolean}
  貼片廣告結(jié)束狀態(tài)

• player.time {number}
  當(dāng)前播放時間

• player.timeOld {number}
  當(dāng)前播放時間更新前的一次播放時間（用于同當(dāng)前position做對比）

• player.timePrevSegment {number}
  之前播放片段總時長（m3u8直播流專有屬性）

• player.version {string}
  視頻播放器版本

flowplayer屬性

請參考https://flowplayer.com/docs/player/api

Methods

自定義播放器方法

• changeToImg(content)

/*** 切換到圖片* @param {string} content 圖片地址*/

• changeToLive(content, opts)

/*** 切換到直播流* @param {string} content 直播資源id* @param {objecet} opts 初始化配置項 */

• changeToMV(content, opts)

/*** 切換到mp4* @param {string} content MV的版權(quán)id* @param {objecet} opts 初始化配置項 */

• changeToVod(content, beginTime, endTime, opts)

/*** 切換到回播流* @param {string} content 回播資源id* @param {string} beginTime 回播流，回放片段開始時間 時間格式必須是 YYYYMMDDhhmmss，如20170821172000，表示2017年8月21日17點20分00秒* @param {string} endTime 回播流，回放片段結(jié)束時間 時間格式必須是 YYYYMMDDhhmmss，如20170821172400，表示2017年8月21日17點24分00秒* @param {objecet} opts 初始化配置項 */

• init(opts)

/*** 播放器初始化* * 步驟：* 1. 獲取廣告信息* 2. 進行播放器配置（廣告配置，碼率配置）* 3. 自動播放* * @param {string} opts.container 播放器容器id* @param {number} opts.type 播放資源類型：1.直播；2.回播；3.MV；4.圖片；* @param {string} opts.content 播放器內(nèi)容：由opts.type決定，如果是1,2，則content為視頻源id；如果是3，則content為mp4版權(quán)id；如果是4，則content為圖片地址* @param {boolean} [opts.realSrc] 是否直接播放realSrc，若realSrc===true，則opts.content為真實播放地址* @param {boolean} [opts.diy] opts.type為3.MV時，若opts.diy===true，則說明是自制視頻* @param {boolean} [opts.vrbt] opts.type為3.MV時，若opts.vrbt===true，則說明是彩鈴視頻* @param {string} [opts.via] 視頻源真實播放地址返回格式（h5: h5播放器地址格式，website: ckplayer播放地址格式。可能不會用到ckplayer，故默認為h5）* @param {string} [opts.beginTime] 回播流，回放片段開始時間 時間格式必須是 YYYYMMDDhhmmss，如20170821172000，表示2017年8月21日17點20分00秒* @param {string} [opts.endTime] 回播流，回放片段結(jié)束時間 時間格式必須是 YYYYMMDDhhmmss，如20170821172400，表示2017年8月21日17點24分00秒* @param {string} [opts.defaultBitrate] SD/HD/BD，默認HD高清* @param {boolean} [opts.autoplay] 是否自動播放，默認false不自動，true表示自動* @param {string} [opts.poster] 當(dāng)opts.autoplay為false時，顯示的播放器開始畫面圖片路徑* @param {string} [opts.barrageSwitch] 是否生成彈幕開關(guān)，默認'hide'不生成，'show'生成（若不生成，則opts.barrageOn也不會起作用）* @param {string} [opts.barrageOn] 是否顯示彈幕，默認'on'顯示彈幕，'off'表示不顯示* @param {object} [opts.adOn] 是否播放廣告對象* @param {string} [opts.adOn.prerollAd] 是否播放片頭廣告，默認'on'播放，'off'表示不播放* @param {string} [opts.adOn.pauseAd] 是否播放暫停廣告，默認'on'播放，'off'表示不播放* @param {string} [opts.adOn.stickerAd] 是否播放貼角廣告，默認'on'播放，'off'表示不播放* @param {boolean} [opts.vip] 是否是vip視頻，如果false，則無時間限制，如果true，則進行opts.timeLimit判斷，若觀看時間超過該時間，則提示開通白金會員* @param {number} [opts.timeLimit] 若是vip視頻，則非vip會員至多能觀看opts.timeLimit時間，單位秒* @param {boolean} [opts.debug] 是否開啟Flash HLS開發(fā)者模式（瀏覽器console面板debug信息），默認false不開啟，true表示開啟* @param {boolean} [opts.debug2] 是否開啟Flash HLS詳細開發(fā)者模式（更健全的deug信息），默認false不開啟，true表示開啟* * @returns {object} 初始化后的播放器實例對象*/

• sendBarrage(html, style, vip)

/*** 發(fā)送彈幕* @param {string} html 彈幕html* @param {object} style 彈幕樣式 * @param {string} vip 白金會員標識，0：非白金，1：白金*/

播放器核心庫方法

• barrageAdd(config, complete)

/*** 添加彈幕* * @param {object} config 彈幕配置* @param {string} config.style 彈幕樣式* @param {string} config.direction 彈幕移動方向* @param {number} config.top 彈幕距播放區(qū)域頂部的坐標* @param {string} config.html 彈幕html結(jié)構(gòu)* @param {number} config.duration 彈幕飄過屏幕的時間* @param {function} complete 彈幕移動完畢后回調(diào)函數(shù)*/

• barrageClear()

/*** 清除彈幕*/

• barrageOff(callback)

/*** 彈幕開關(guān)關(guān)閉* * @param {function} callback 切換狀態(tài)后執(zhí)行*/

• barrageOn(callback)

/*** 彈幕開關(guān)打開* * @param {function} callback 切換狀態(tài)后執(zhí)行*/

• barragePauseOrResume()

/*** 控制彈幕動畫暫停/恢復(fù)*/

• barrageToggle(callback)

/*** 彈幕開關(guān)狀態(tài)切換* * @param {function} callback 切換狀態(tài)后執(zhí)行*/

• destroy()

/*** 銷毀播放器*/

• disable(flag)

/*** 禁用一切內(nèi)核API* 如果不傳參，則自動切換啟用/禁用狀態(tài)* * @param {[boolean]} flag true/false*/

• fullscreen()

/*** 在全屏與正常尺寸進行切換*/

• init(opts)

/*** 初始化視頻播放器* * @param {object} opts 播放器初始化參數(shù)* @param {string} opts.url 播放地址url* @param {string} opts.live 是否是直播* @param {string} opts.m3u8 是否是視頻流* @param {string} opts.poster 播放器占位海報（預(yù)加載視頻的同時給視頻播放區(qū)域顯示自定義海報圖片）* @param {boolean|string} opts.splash 播放器占位圖片（點擊后才加載視頻，場景：https://flowplayer.com/docs/setup.html#splash）* @param {string} opts.bitrate 默認視頻碼率* @param {number} opts.autoplay 是否自動播放* @param {boolean} opts.debug 是否開啟Flash HLS開發(fā)者模式（瀏覽器console面板debug信息），默認false不開啟，true表示開啟* @param {boolean} opts.debug2 是否開啟Flash HLS詳細開發(fā)者模式（更健全的deug信息），默認false不開啟，true表示開啟*/

• load(video, callback)

/*** 加載指定視頻源* https://flowplayer.com/docs/api.html#load-method* * 如果不指定任何參數(shù)，則load()會由splash狀態(tài)開始初始化播放器* * @param {object|array|string} video 視頻資源，可以是clip對象，資源數(shù)組，或者是url* @param {function} callback 播放器ready，新視頻準備開始播放時觸發(fā)*/

• marqueeAdClose()

/*** 【已廢棄】關(guān)閉滾屏廣告*/

• marqueeAdLoad(opts)

/*** 【已廢棄】加載滾屏廣告* * @param {object} opts 滾屏廣告配置* @param {string} opts.marquee 滾屏廣告html結(jié)構(gòu)* @param {string} opts.position 滾屏廣告位置：top/bottom* @param {string} opts.repeat 重復(fù)滾動顯示次數(shù)*/

• message(text)

/*** 【已廢棄】內(nèi)置消息提示，通常用于顯示嚴重錯誤的信息*/

• mute(flag)

/*** 靜音* 如果不傳參，則自動切換靜音/正常音量狀態(tài)* * @param {[boolean]} flag true/false*/

• pause(callback)

/*** 暫停播放* * @param {function} callback 暫停回調(diào)函數(shù)*/

• pauseAdClose()

/*** 關(guān)閉暫停廣告*/

• pauseAdLoad(opts)

/*** 加載暫停廣告* * @param {object} opts 暫停廣告配置* @param {string} opts.sticker 暫停廣告圖片超鏈接* @param {string} opts.jumpUrl 暫停廣告跳轉(zhuǎn)超鏈接* @param {function} opts.start 廣告開始播放回調(diào)函數(shù)* @param {function} opts.click 廣告點擊回調(diào)函數(shù)*/

• play(video, callback)

同load(video, callback)

• prerollAdClose()

/*** 關(guān)閉片頭廣告*/

• prerollAdLoad(opts)

/*** 加載片頭廣告* * @param {object} opts 片頭廣告配置* @param {number} opts.countdown 片頭廣告倒計時（秒）* @param {string} opts.jumpUrl 片頭廣告跳轉(zhuǎn)超鏈接* @param {function} opts.start 廣告開始播放回調(diào)函數(shù)* @param {function} opts.click 廣告點擊回調(diào)函數(shù)* @param {function} opts.skipClick 廣告點擊跳過回調(diào)函數(shù)* @param {function} opts.end 廣告播放結(jié)束回調(diào)函數(shù)*/

• resume()

/*** 由暫停恢復(fù)播放*/

• seek(timeOrFlag, callback)

/*** 跳轉(zhuǎn)播放位置（時間）* * @param {number|boolean} timeOrFlag 如果是數(shù)字，則跳轉(zhuǎn)到相應(yīng)秒數(shù)位置；如果是布爾值，true代表快進10%，false代表快退10%* @param {[function]} callback 跳轉(zhuǎn)播放位置后執(zhí)行*/

• seekTo(position, callback)

/*** 按百分比跳轉(zhuǎn)播放位置* * @param {number} position 如seekTo(1)代表快進到10%的位置，seekTo(2)代表快進到20%的位置，以此類推* @param {[function]} callback 跳轉(zhuǎn)播放位置后執(zhí)行*/

• shutdown()

/*** 銷毀播放內(nèi)核實例* 在移除播放器dom元素前，或者移除dom元素中的播放器前調(diào)用，這能夠使得所有的播放內(nèi)核事件也被一并銷毀* * 注：Like unload() which is called internally by it, this method requires a splash setup for perfect cleanup.* Also prefer unload() whenever possible to avoid unnecessary DOM manipulations and prevent race conditions * with immediately ensuing actions by wrapping them in the callback of the shutdown event.*/

• speed(rateOrFlag, callback)

/*** 設(shè)置播放速度* * @param {number|boolean} rateOrFlag* 若參數(shù)為數(shù)字，則speed(1)代表正常播放速度，speed(0.5)代表慢速播放，speed(1.5)代表快速播放；* 若參數(shù)為布爾值，則true代表在speed配置數(shù)組中正向切換速度，false代表反向切換速度* @param {[function]} callback 播放速度改變后執(zhí)行一次*/

• stickerAdClose()

/*** 關(guān)閉貼片廣告*/

• stickerAdLoad(opts)

/*** 加載貼片廣告* * @param {object} opts 貼片廣告配置* @param {number} opts.countdown 貼片廣告倒計時（秒）* @param {string} opts.sticker 貼片廣告圖片超鏈接* @param {string} opts.jumpUrl 貼片廣告跳轉(zhuǎn)超鏈接* @param {function} opts.start 廣告開始播放回調(diào)函數(shù)* @param {function} opts.click 廣告點擊回調(diào)函數(shù)*/

• stop()

/*** 停止播放* 停止播放且跳轉(zhuǎn)播放位置到0秒處，若有poster配置，則將回到poster狀態(tài)*/

• toggle()

/*** 在播放/暫停狀態(tài)間進行切換*/

• trigger(type, args)

/*** 觸發(fā)播放內(nèi)核事件* * @param {string} type 事件名* @param {array} args 參數(shù)數(shù)組的第一個元素為core實例，第二個參數(shù)由具體事件決定*/

• unload()

/*** 卸載播放器* 停止播放且跳轉(zhuǎn)播放位置到視頻第一幀處，若有poster配置，則將回到poster狀態(tài)，若有splash配置，則回到splash狀態(tài)*/

• updateSource(source, callback)

/*** 更新播放視頻源* @param {object|array|string} source 視頻資源，可以是clip對象，資源數(shù)組，或者是url* @param {function} callback 播放器ready，新視頻準備開始播放時觸發(fā)*/

• volume(level)

/*** 改變音量* 音量將進行持久化存儲到localStorage中，所以在同一個瀏覽器的不同頁面間進行跳轉(zhuǎn)后，音量不會被重置* * @param {number} level 音量等級，范圍[0.0, 1.0]*/

flowplayer方法

請參考https://flowplayer.com/docs/player/api

Events

播放器核心庫事件

// 播放器核心庫事件 // // 播放器核心庫事件有3個公共形參： // 1. @param {object} that 自定義播放器對外暴露接口對象 // 2. @param {object} e 原生event對象 // 3. @param {object} api 播放內(nèi)核API // 4. 第四個參數(shù)由core api具體事件決定

• onBeforeresume(that, e, api)

// 由暫停恢復(fù)播放前

• onBeforeseek(that, e, api, position)

// 播放定位前

• onBuffer(that, e, api, position)

// 緩沖進度

• onError(that, e, api, error)

/*** 錯誤捕獲* * @param {object} error 錯誤對象，包含錯誤代碼code和錯誤消息message*/

• onFinish(that, e, api)

// 播放結(jié)束

• onFlashdisabled(that, e, api)

// flash引擎加載失敗

• onFullscreen(that, e, api)

// 進入全屏

• onFullscreenexit(that, e, api)

// 退出全屏

• onLoad(that, e, api, video)

/*** 視頻加載前（能夠在這個事件中改變core的屬性值）* * 注意：沒有配置splash時，該事件只對全局的事件監(jiān)聽起作用* https://flowplayer.com/docs/api.html#global-api-access* * @param {object} video 加載的視頻對象*/

• onMute(that, e, api)

// 靜音

• onPause(that, e, api)

// 暫停

• onProgress(that, e, api, position)

// 播放時間改變

• onReady(that, e, api, video)

// 視頻加載完畢

• onResume(that, e, api)

// 由暫停恢復(fù)播放

• onSeek(that, e, api, position)

// 跳轉(zhuǎn)播放位置

• onShutdown(that, e, api)

// 播放器銷毀

• onSpeed(that, e, api, level)

// 播放速度改變

• onStop(that, e, api)

// 停止播放

• onUnload(that, e, api)

// 播放器返回到splash狀態(tài)

• onVolume(that, e, api, volume)

// 音量改變

flowplayer事件

請參考https://flowplayer.com/docs/player/api

Browser compability

? IE8（mp4播放）
? IE8+（mp4播放，m3u8播放）
? Chrome（mp4播放，m3u8播放）
? Firefox（mp4播放，m3u8播放）
? 360，獵豹，百度，QQ等其他瀏覽器

?

原文鏈接：https://www.jianshu.com/p/432b7b19bc76

總結(jié)

以上是生活随笔為你收集整理的video.h5.player.js视频播放器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。