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等其他浏览器