video.h5.player.js视频播放器

悠悠 2024-02-19 18:13 33阅读 0赞

##  ##

> 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>

<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为例，完成了播放器的初始化，初始化生成了一些基础的默认播放控件，如：

*  播放/暂停
 *  当前播放时间
 *  视频总时间
 *  静音
 *  音量
 *  全屏播放
 *  社交平台分享（左上角连同视频分发平台已打码，见谅）

![961][]

播放器默认界面

#### 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>

扩展后的播放器示意图如下：

![959][]

自定义播放器界面（画面为孙燕姿的《风衣》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][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][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][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][https_www.jianshu.com_p_432b7b19bc76]

[flowplayer]: https://link.jianshu.com?t=https%3A%2F%2Fflowplayer.com%2Fdemos
[961]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/0ff09152aa504463bca06a174e62baa4.png
[959]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/898fece69cc24d41a2e8b87b92d8364e.png
[https_flowplayer.com_docs_player_api]: https://link.jianshu.com?t=https%3A%2F%2Fflowplayer.com%2Fdocs%2Fplayer%2Fapi
[https_www.jianshu.com_p_432b7b19bc76]: https://www.jianshu.com/p/432b7b19bc76