video.h5.player.js视频播放器
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', // 容器idtype: 3, // 播放源类型,1-直播,2-回播/回放,3-MV,4-图片content: '600570YAUW4', // MV版权idautoplay: 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}
播放器所在容器idplayer.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等其他浏览器
原文链接:https://www.jianshu.com/p/432b7b19bc76
video.h5.player.js视频播放器相关推荐
- 摄屏播放插件html5,Js视频播放器插件Video.js使用方法详解
Video.js快速入门 我们可以下载 Video.js 的源码放到自己的服务器上,或者使用免费的 CDN 托管版本. 在页面中引用video-js.cs样式文件和video.js 使用免费的CDN托 ...
- video.js视频播放器进度条标记的功能实现
video.js视频播放器 的使用 video.js视频播放器 安装 引入 使用 video.js视频播放器 接到个需求,需要一个视频播放页面,并且进度条需要在某个时间点打上标记.在网上找了一下,发现 ...
- Android Video Player. 安卓视频播放器,封装 MediaPlayer、ExoPlayer、IjkPlayer。模仿抖音,悬浮播放,广告播放,列表播放,弹幕
DKVideoPlayer 项目地址:dueeeke/DKVideoPlayer 简介: Android Video Player. 安卓视频播放器,封装 MediaPlayer.ExoPlayer. ...
- 【Vue】播放flv格式视频(flv.js视频播放器)
图片来源:HTTP-FLV直播初探 链接 github地址:GitHub - bilibili/flv.js: HTML5 FLV Player 播放flv格式视频 npm install flv.j ...
- Video标签自定义简易视频播放器
Video标签自定义简易视频播放器 提示:以下是本篇文章正文内容,下面案例可供参考 一.Dom结构 <template><el-dialog :title="winTitl ...
- 【VideoJs】初识videojs video.js 视频播放器的基本使用 videojs基础用法 videojs视频播放器 vue3中使用videojs
videojs介绍 免费,开源 插件多 可自定义 [推] 虽然,但是Videojs算好了,但我觉得有点杂,特别是文档与插件,且自定义插件有点困难,也可能是我比较菜吧 相比之下,我还是强烈推荐 [Xgp ...
- Vue中引入Video.js视频播放器
安装 $ npm install video.js main.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css ...
- Vue中使用Video.js视频播放器
Video.js是一个有着HTML5背景的网络视频播放器.它同时支持HTM5和Flash视频,简单来说就是HTMl5 和 Flash 视频播放器 安装: npm install video.js ma ...
- 前端html + js视频播放器(快进,快退,倍速,全屏等功能)
基于h5的video,很容易上手,直接上代码,其中还有一些可以优化的地方,大家可以自己优化 在这里插入代码片<!DOCTYPE html> <html lang="en&q ...
- video标签学习 xgplayer视频播放器分段播放mp4
文章目录 学习链接 目标 video标签自带视频和制作的视频区别 video标签的src属性 本地视频文件 前端代码 播放效果 服务器视频文件 示例1 后端代码 前端代码 播放效果 示例2 后端代码 ...
最新文章
- 使用Composer安装Laravel步骤
- “天才”少年!4位90后摘得全球顶尖数学大奖,90%获奖者不满30岁
- 【OpenCV 例程200篇】49. 图像增强—局部直方图处理
- 美丽人生论坛看贴工具delphi版
- ORACLE 批量实例分析
- Inception-ResNet-v1网络结构
- delphi2007 indy发邮件报could not load ssl library问题的解决
- python一百行代码的项目_用python一百行代码实现xss扫描工具
- onenote2019导入_将OneNote 2010笔记本导入Evernote
- 腾讯组织了一个联盟,但无法阻止字节跳动拿走一半游戏广告
- [词性] 十五、介词 5 [ by ] [ during ] [ for ] [ from ]
- 《一个人的朝圣》的读后感作文3100字
- 计算机图形学方向的基本能力
- P2135 方块消除
- 【总结】大学生寒假社会实践-社区志愿服务模板
- Xmanager快速连接Linux图形界面教程
- OpenXml 操作Excel,Word,PPT
- 【产品】《用户体验要素》框架层(界面设计、导航设计和信息设计)
- ionic 打 android 出现 Current working directory is not a Cordova-based project.
- 谈谈抖音企业蓝V认证要怎样申请?
热门文章
- ug80浩强工具_ug浩强工具-ug浩强工具下载 2.59 免费版 - 河东下载站
- 【Google浏览器无法登录账号】为安全起见,您无法从此设备登录。请稍后重试,或从其他设备登录
- BT.1120数据流解释
- 用来这么久的计算机,你是否对计算机中有关数及编码有掌握的呢???那么它来了,让你充分认识计算机有关数和编码的知识~~
- 大数据技术原理与应用:期末考点总结
- 国二计算机百度云,2016Office二级全套视频教程 全国计算机二级考试Office考试视频教程...
- 单例模式中的线程安全问题
- java 微信小程序消息模板
- 我自己的 psftp-cmd
- psftp的简单使用