video.h5.player.js（內部項目）是一款基於flowplayer開發的視頻播放器，播放核心採用video標籤/flash控件，界面完全交由用戶自己定製。其中，flash控件的應用場景爲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
// 創建播放器實例（該實例方法由用戶基於video.h5.player.js自定義實現，這裏僅作演示）
var myPlayer = videoH5Player();
// 初始化播放MV
myPlayer.init({
container: 'J_MyPlayer', // 容器id
type: 3, // 播放源類型，1-直播，2-回播/回放，3-MV，4-圖片
content: '600570YAUW4', // MV版權id
autoplay: true, // 是否自動播放
adOn: {
prerollAd: 'off', // 前置視頻廣告
pauseAd: 'off', // 暫停圖片廣告
stickerAd: 'off' // 貼角圖片廣告
},
// 播放完畢回調函數
onFinish: function (myPlayer, e, api) {
// console.log(myPlayer);
// console.log(e);
// console.log(api);
console.log('播放結束，跳轉到0.1秒處');
api.seek(0.1);
}
});
以上代碼以MV爲例，完成了播放器的初始化，初始化生成了一些基礎的默認播放控件，如：
- 播放/暫停
- 當前播放時間
- 視頻總時間
- 靜音
- 音量
- 全屏播放
- 社交平臺分享（左上角連同視頻分發平臺已打碼，見諒）
播放器默認界面
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>
<!-- 彈幕開關 -->
<script src="/js/video.h5.player.barrage.js"></script>
擴展後的播放器示意圖如下：
自定義播放器界面（畫面爲孫燕姿的《風衣》MV截圖）
其中，所有的界面都可以進行定製化開發，包括字體圖標，等等。
值得注意的是，video.h5.player.js爲封裝了flowplayer庫的核心庫，用戶基於video.h5.player.js進行二次封裝的foo.video.h5.player.js，則爲自定義播放器。核心庫經實例化後會返回自身對外暴露的屬性和方法，以供自定義播放器調用。
Params(read only)
自定義播放器屬性
-
barrageMax {number}
彈幕最大行數 -
errorTimeout {number}
播放器錯誤當前重啓次數（超過最大次數後將不再進行重啓） -
errorTimeoutMax {number}
播放器錯誤重啓最大次數 -
errorTimeoutMax {number}
播放器錯誤重啓最大次數 -
lastFxArray {array}
過去幾次彈幕位置（最大記錄次數爲彈幕行數） -
lastPlayTime {number}
上次累計觀看時間（單位秒） -
playTimeExpire {number}
上次累計觀看時間cookie過期時間（默認2小時，單位毫秒） -
playTimeExpireDate {number}
累計觀看時間cookie過期日期（單位毫秒） -
player {object}
播放器核心庫實例對象
播放器核心庫屬性
-
player.barrage {object}
彈幕對象，屬性包含彈幕容器id和彈幕總條數 -
player.barrageStat {boolean}
彈幕開關狀態 -
player.bitrate {string}
當前碼率，SD-標清，HD-高清，BD-超清 -
player.container {string}
播放器所在容器id -
player.core {object}
播放器播放內核（即flowplayer實例對象，通過該對象能夠直接調用內核的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結構，用於徹底銷燬播放器後的初始化 -
player.pauseAd {object}
暫停廣告 -
player.pauseAdFresh {boolean}
是否是最新的暫停廣告（以此判斷是否需要去獲取新的暫停廣告曝光地址） -
player.paused {boolean}
視頻是否暫停 -
player.plugins {object}
自定義插件jquery對象 -
player.prerollAd {object}
片頭廣告 -
player.prerollEnded {boolean}
片頭廣告結束狀態 -
player.stickerAd {object}
貼片廣告 -
player.stickerEnded {boolean}
貼片廣告結束狀態 -
player.time {number}
當前播放時間 -
player.timeOld {number}
當前播放時間更新前的一次播放時間（用於同當前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的版權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 回播流，回放片段結束時間 時間格式必須是 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 播放器內容：由opts.type決定，如果是1,2，則content爲視頻源id；如果是3，則content爲mp4版權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] 回播流，回放片段結束時間 時間格式必須是 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] 當opts.autoplay爲false時，顯示的播放器開始畫面圖片路徑
* @param {string} [opts.barrageSwitch] 是否生成彈幕開關，默認'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開發者模式（瀏覽器console面板debug信息），默認false不開啓，true表示開啓
* @param {boolean} [opts.debug2] 是否開啓Flash HLS詳細開發者模式（更健全的deug信息），默認false不開啓，true表示開啓
*
* @returns {object} 初始化後的播放器實例對象
*/
sendBarrage(html, style, vip)
/**
* 發送彈幕
* @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 彈幕距播放區域頂部的座標
* @param {string} config.html 彈幕html結構
* @param {number} config.duration 彈幕飄過屏幕的時間
* @param {function} complete 彈幕移動完畢後回調函數
*/
barrageClear()
/**
* 清除彈幕
*/
barrageOff(callback)
/**
* 彈幕開關關閉
*
* @param {function} callback 切換狀態後執行
*/
barrageOn(callback)
/**
* 彈幕開關打開
*
* @param {function} callback 切換狀態後執行
*/
barragePauseOrResume()
/**
* 控制彈幕動畫暫停/恢復
*/
barrageToggle(callback)
/**
* 彈幕開關狀態切換
*
* @param {function} callback 切換狀態後執行
*/
destroy()
/**
* 銷燬播放器
*/
disable(flag)
/**
* 禁用一切內核API
* 如果不傳參，則自動切換啓用/禁用狀態
*
* @param {[boolean]} flag true/false
*/
fullscreen()
/**
* 在全屏與正常尺寸進行切換
*/
init(opts)
/**
* 初始化視頻播放器
*
* @param {object} opts 播放器初始化參數
* @param {string} opts.url 播放地址url
* @param {string} opts.live 是否是直播
* @param {string} opts.m3u8 是否是視頻流
* @param {string} opts.poster 播放器佔位海報（預加載視頻的同時給視頻播放區域顯示自定義海報圖片）
* @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開發者模式（瀏覽器console面板debug信息），默認false不開啓，true表示開啓
* @param {boolean} opts.debug2 是否開啓Flash HLS詳細開發者模式（更健全的deug信息），默認false不開啓，true表示開啓
*/
load(video, callback)
/**
* 加載指定視頻源
* https://flowplayer.com/docs/api.html#load-method
*
* 如果不指定任何參數，則load()會由splash狀態開始初始化播放器
*
* @param {object|array|string} video 視頻資源，可以是clip對象，資源數組，或者是url
* @param {function} callback 播放器ready，新視頻準備開始播放時觸發
*/
marqueeAdClose()
/**
* 【已廢棄】關閉滾屏廣告
*/
marqueeAdLoad(opts)
/**
* 【已廢棄】加載滾屏廣告
*
* @param {object} opts 滾屏廣告配置
* @param {string} opts.marquee 滾屏廣告html結構
* @param {string} opts.position 滾屏廣告位置：top/bottom
* @param {string} opts.repeat 重複滾動顯示次數
*/
message(text)
/**
* 【已廢棄】內置消息提示，通常用於顯示嚴重錯誤的信息
*/
mute(flag)
/**
* 靜音
* 如果不傳參，則自動切換靜音/正常音量狀態
*
* @param {[boolean]} flag true/false
*/
pause(callback)
/**
* 暫停播放
*
* @param {function} callback 暫停回調函數
*/
pauseAdClose()
/**
* 關閉暫停廣告
*/
pauseAdLoad(opts)
/**
* 加載暫停廣告
*
* @param {object} opts 暫停廣告配置
* @param {string} opts.sticker 暫停廣告圖片超鏈接
* @param {string} opts.jumpUrl 暫停廣告跳轉超鏈接
* @param {function} opts.start 廣告開始播放回調函數
* @param {function} opts.click 廣告點擊回調函數
*/
play(video, callback)
同load(video, callback)
prerollAdClose()
/**
* 關閉片頭廣告
*/
prerollAdLoad(opts)
/**
* 加載片頭廣告
*
* @param {object} opts 片頭廣告配置
* @param {number} opts.countdown 片頭廣告倒計時（秒）
* @param {string} opts.jumpUrl 片頭廣告跳轉超鏈接
* @param {function} opts.start 廣告開始播放回調函數
* @param {function} opts.click 廣告點擊回調函數
* @param {function} opts.skipClick 廣告點擊跳過回調函數
* @param {function} opts.end 廣告播放結束回調函數
*/
resume()
/**
* 由暫停恢復播放
*/
seek(timeOrFlag, callback)
/**
* 跳轉播放位置（時間）
*
* @param {number|boolean} timeOrFlag 如果是數字，則跳轉到相應秒數位置；如果是布爾值，true代表快進10%，false代表快退10%
* @param {[function]} callback 跳轉播放位置後執行
*/
seekTo(position, callback)
/**
* 按百分比跳轉播放位置
*
* @param {number} position 如seekTo(1)代表快進到10%的位置，seekTo(2)代表快進到20%的位置，以此類推
* @param {[function]} callback 跳轉播放位置後執行
*/
shutdown()
/**
* 銷燬播放內核實例
* 在移除播放器dom元素前，或者移除dom元素中的播放器前調用，這能夠使得所有的播放內核事件也被一併銷燬
*
* 注：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)
/**
* 設置播放速度
*
* @param {number|boolean} rateOrFlag
* 若參數爲數字，則speed(1)代表正常播放速度，speed(0.5)代表慢速播放，speed(1.5)代表快速播放；
* 若參數爲布爾值，則true代表在speed配置數組中正向切換速度，false代表反向切換速度
* @param {[function]} callback 播放速度改變後執行一次
*/
stickerAdClose()
/**
* 關閉貼片廣告
*/
stickerAdLoad(opts)
/**
* 加載貼片廣告
*
* @param {object} opts 貼片廣告配置
* @param {number} opts.countdown 貼片廣告倒計時（秒）
* @param {string} opts.sticker 貼片廣告圖片超鏈接
* @param {string} opts.jumpUrl 貼片廣告跳轉超鏈接
* @param {function} opts.start 廣告開始播放回調函數
* @param {function} opts.click 廣告點擊回調函數
*/
stop()
/**
* 停止播放
* 停止播放且跳轉播放位置到0秒處，若有poster配置，則將回到poster狀態
*/
toggle()
/**
* 在播放/暫停狀態間進行切換
*/
trigger(type, args)
/**
* 觸發播放內核事件
*
* @param {string} type 事件名
* @param {array} args 參數數組的第一個元素爲core實例，第二個參數由具體事件決定
*/
unload()
/**
* 卸載播放器
* 停止播放且跳轉播放位置到視頻第一幀處，若有poster配置，則將回到poster狀態，若有splash配置，則回到splash狀態
*/
updateSource(source, callback)
/**
* 更新播放視頻源
* @param {object|array|string} source 視頻資源，可以是clip對象，資源數組，或者是url
* @param {function} callback 播放器ready，新視頻準備開始播放時觸發
*/
volume(level)
/**
* 改變音量
* 音量將進行持久化存儲到localStorage中，所以在同一個瀏覽器的不同頁面間進行跳轉後，音量不會被重置
*
* @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 播放內核API
// 4. 第四個參數由core api具體事件決定
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
onBeforeresume(that, e, api)
// 由暫停恢復播放前
onBeforeseek(that, e, api, position)
// 播放定位前
onBuffer(that, e, api, position)
// 緩衝進度
onError(that, e, api, error)
/**
* 錯誤捕獲
*
* @param {object} error 錯誤對象，包含錯誤代碼code和錯誤消息message
*/
onFinish(that, e, api)
// 播放結束
onFlashdisabled(that, e, api)
// flash引擎加載失敗
onFullscreen(that, e, api)
// 進入全屏
onFullscreenexit(that, e, api)
// 退出全屏
onLoad(that, e, api, video)
/**
* 視頻加載前（能夠在這個事件中改變core的屬性值）
*
* 注意：沒有配置splash時，該事件只對全局的事件監聽起作用
* 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)
// 由暫停恢復播放
onSeek(that, e, api, position)
// 跳轉播放位置
onShutdown(that, e, api)
// 播放器銷燬
onSpeed(that, e, api, level)
// 播放速度改變
onStop(that, e, api)
// 停止播放
onUnload(that, e, api)
// 播放器返回到splash狀態
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等其他瀏覽器