2018-11-19 长沙 阴 

不好意思,是转载备用,不是原创的,图片为原创截图,呵呵。

功能特色:

倍速功能(0.5x / 1x / 2x )、加密、截图功能、模式切换、高清标清超清切换;

跑马灯设定、指定时间点播放、音视频切换、视频问答;


HTML5播放器实际播放效果截图 

HTML5播放器实际播放效果截图 

HTML5播放器实际播放效果截图 

HTML5播放器实际播放效果截图 

 HTML5播放器实际播放效果截图 

 HTML5播放器实际播放效果截图 

HTML5播放器实际播放效果截图 

HTML5播放器实际播放效果截图 

如何使用保利威HTML5播放器

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>var player = polyvPlayer({wrap: '#player',width: 800,height: 533,vid: 'e8888b74d1229efec6b4712e17cb6b7a_e',});
</script>

参数选项

参数 类型 默认值 说明
wrap string / HTMLElement - 页面上存在需要载入播放器的DOM元素或css选择器
width number / string 100% 播放器的宽度
height number / string auto 播放器的高度
vid string - 从 polyv 后台上传的视频会生成一个视频唯一vid
loop boolean false 视频播放结束后是否循环播放
autoplay boolean false 播放器加载后视频是否自动播放
volume number 0.75 视频默认音量大小,范围 (0, 1),播放器会记录上一次播放的音量
flash boolean false 是否默认打开flash播放器
df number - 视频默认清晰度,可设置为0123,分别对应自动、流畅、高清、超清,设置该参数会覆盖后台的设置
hideRepeat boolean false 播放结束后是否显示重播面板,可通过play.HTML5.changeRepeat改变
code string - 跑马灯设置中自定义的code值
speed boolean/array [2, 1.5, 1.2, 0.5] 设置为false则关闭倍速,可传入数组自定义显示哪几种倍速,速率1不需要填入,会自动添加,所设置速率值必须大于0,少于或等于3,最多设置6种速率(不包含1),所设置值会按由大到小自动排序
showHd boolean true 是否显示清晰度选择
ignoreIE boolean false 设置该选项将会在ie浏览器中禁用HTML5播放器(edge浏览器除外,国内360,QQ等浏览器的兼容模式表现为ie浏览器,所以也会被禁用)
watchStartTime number undefined 从第几秒开始播放,需少于视频时长
watchEndTime number undefined 播放到第几秒结束播放,需少于视频时长,在该值到结束的进度条禁止点击,如果设置值少入watchStartTime,则watchStartTime失效
skinLocation number 1 控制栏显示在视频区域内外或不显示,可选0(不显示)、1(视频内)、2(视频外)
ban_history_time string off 是否禁止记住播放进度,下次打开会从上次进度打开(设置watchStartTime后还是会从watchStartTime处开始播放),默认为off(不禁止),on为禁止
hideSwitchPlayer boolean false 是否禁止显示HTML5与flash播放器切换按钮
priorityMode string video 默认打开视频模式还是音频模式,需要该视频有对应的音频转码可选video/audio
audioMode boolean true 是否开启音频模式
videoMode boolean true 是否开启视频模式,设置为false后将会以音频模式播放,无论是否有音频转码
screenshot boolean false 是否开启视频截图功能
ban_seek_by_limit_time string on 是否禁止视频拖拽为播放区域
ban_seek string off 设置为 on 播放器将会彻底禁止拖拽
loading_bg_img string - 视频默认封面图
ban_record_
interaction_right_answer
string off 设置为 on 问答回答正确不会记录,每次刷新播放都需重新回答

选项-加密设置

playsafe (string|function / 默认值:undefined)
- 服务器计算出的 token 若要播放加密视频才需要该参数,非加密视频可忽略
- 当传入function 时,next必须调用,且传入获取的token值。当设置函数时切换视频(changeVid)可不需重传playsafe值,当播放加密视频时会自动获取,若视频有音视频切换建议使用
- 请在服务器生成 token 值

ts (number / 默认值:undefined)
- 移动端加密视频时间戳

sign (string / 默认值:undefined)
- 移动端加密视频签名

播放器切换事件

HTML5Load
- flash 播放器切换到 HTML5 播放器时触发

player.on('HTML5Load', function() {console.log(typeof player.HTML5);  // 'object';console.log(player.flash);  // false
});

flashLoad
- HTML5 播放器切换到 flash 播放器时触发

播放错误事件

serverError
- 返回一些如录屏(#016)、黑白域名(#006)、授权验证失败(#012)、视频数据读取失败(#003)等错误信息

player.on('serverError', function(event, errorCode) {console.log(errorCode);
});

HTML5 属性

若当前播放器为 HTML5播放器,player.HTML5属性为HTML5播放器实例对象,反之为false

属性

player.HTML5.video (HTMLElement)
- HTML5播放器所创建的原生 video 元素,可按照需要自行绑定事件与设置属性等

方法

player.HTML5.play
- 播放视频

player.HTML5.pause
- 暂停视频

player.HTML5.togglePlay
- 暂停播放交替切换

player.HTML5.toggleFullscreen:
- 全屏非全屏交替切换
- 在player.HTML5.video 中可以通过绑定 fullscreen 与 exitFullscreen事件来监听全屏与退出全屏事件

player.HTML5.changeVid (object)

参数对象设置
vid (必填): 需更换的vid,若与当前播放视频vid一样则无效
playsafe(选填):若更换的视频为加密视频,需要传入playsafe参数,每个不同vid都需重新传入一个不同playsafe
- autoplay (boolean/ 选填): 切换视频后视频是否自动播放

player.HTML5.changeRepeat (boolean)

  • 参数true 或 false ,改变hideRepeat值

flash属性

若当前播放器为 flash 播放器,player.flash属性为polyv多终端代码初始化播放器后返回对象,反之为false,* 注意,移动端中对象会存储在flash中

HTML5 播放器与 flash 播放器切换说明

  1. 为了兼容不兼容HTML5播放器的浏览器,若检测到不兼容的浏览器或设置flash: true会自动打开flash播放器,比如IE10、IE9。
  2. 播放器实例有 HTML5 与 flash 两个属性,根据当前播放器类型而切换
  3. 可以设置 flashLoad 事件监听flash播放器是否加载

与flash事件兼容

目前HTML5播放器兼容了部分flash播放器事件,设置后在HTML5播放器中也会触发,事件如下:
s2j_onVideoPlay、 s2j_onVideoPause、 s2j_onPlayerInitOver、 s2j_onPlayOver、 s2j_onPlayStart、 s2j_onFullScreen、 s2j_onNormalScreen、 s2j_onVideoSeek、 s2j_onReadyPlay、 s2j_onPlayerError、 s2j_volumeChange

onChangeMode(vid, currentMode, lastMode)
- 音视频切换的时触发
- vid: 视频vid
- currentMode:切换后播放模式 ('video'/'audio')
- lastMode:切换前播放模式 ('video'/'audio')

兼容性

  • pc:IE11(window 8+)或以上浏览器兼容HTML5播放器,IE10、IE9将打开flash播放器
  • 移动端: 将调用多终端代码打开播放器
  • 因用ES2015编写,暂不兼容IE8

在H5播放器中使用授权播放与跑马灯

具体参考
若需要在PC端h5播放器中显示跑马灯,则移动端的$array改为(callback不为空时):
$array = Array("status"=>$status,"username"=>$username,"sign"=>$sign,"msg"=>$msg,"fontSize"=>$fontSize,"fontColor"=>$fontColor,"speed"=>$speed,"filter"=>$filter,"setting"=>$setting,"alpha"=>$alpha,"filterAlpha"=>$filterAlpha,"filterColor"=>$filterColor,"blurX"=>$blurX,"blurY"=>$blurY,"tweenTime"=>$tweenTime,"interval"=>$interval,"lifeTime"=>$lifeTime,"strength"=>$strength,"show"=>$show,);

在多终端代码中使用 HTML5 播放器

页面中只需引入多终端代码,不需引入 HTML5 播放器代码,切换是会自动加载

默认打开flash

  • 参数:在 flashvars 参数加上 skin_type: 'skin_blue' 、ban_set_player: 'off'
  • changeH5Success: 当点击切换 HTML5 播放器时触发且只会在默认打开 flash 播放器时触发
  • 说明: 该设置会默认打开 flash 播放器,但播放器中会有切换播放器的选项
  • 设置如下:
var player = polyvObject('#video').videoPlayer({width: 800,vid: '02bfeb00e2ea42ec033fedfbd24c2879_0',flashvars: {skin_type: 'skin_blue',ban_set_player: 'off'}
});
player.on('changeH5Success', function(newPlayer) {player = newPlayer;  // newPlayer 是初始化 HTML5 播放器后返回对象
});

默认打开HTML5 播放器

  • 参数: forceH5 (boolean / false)
  • 说明: 设置 forceH5 参数为 true 后播放器将默认打开 HTML5 播放器(浏览器不兼容除外),若需要播放加密视频需传入 playsafe 参数
  • 设置如下
// 返回 HTML5 播放器对象
var player = polyvObject('#video').videoPlayer({width: 800,vid: '65956867dfc7794f00b20912e5ea5ecc_6',forceH5: true,// playsafe: 'token' 加密视频需传入
});

注意事项

  • 请尽量不要对播放器的样式进行修改或者对video标签进行修改
  • 尽量避免在有animation和transform等css3的元素或者子元素下初始化播放器,因为这些元素可能对导致播放器全屏样式错乱,这个属于浏览器的一个bug,请谅解

保利威HTML5播放器使用文档(参考备用)相关推荐

  1. 毕业设计 rtsp播放器 - 相关文档

    基于MFC的视频监控系统客户端实现 - ZeaLoVe - ITeye技术网站 中国安防行业网-中国安防网-安防产品-最权威安防网站 DVR or NVR IPVS - happypolo的专栏 - ...

  2. SkeyeWebPlayer.js H5播放器使用文档说明

    SkeyeWebPlayer.js H5播放器,是一款能够同时支持HTTP.HTTP-FLV.HLS(m3u8)视频直播与视频点播等多种协议, 支持H.264.H.265.AAC等多种音视频编码格式, ...

  3. Android音乐播放器word文档,Android音乐播放器

    Android音乐播放器 一个很简单很简单的音乐播放器 需要在res目录下新建raw文件夹,音乐文件放在里面,格式为后缀为.mp3格式的音乐 这里我们定义的音乐文件名称为big.mp3 layout布 ...

  4. 保利威视频播放器功能抽取,仅作为播放课程资源使用,去除多余功能

    由于项目中所使用的场景,除了直播和回放,还有一个就是简单的课程资源播放器,然后取出整体的冗余,使用一个较为简单播放器来进行播放操作.保利威直播的demo和开发文档,在实际调试过程中,让人非常头疼,在g ...

  5. Python笔记_84_我的订单_使用celery完成订单超时_视频播放_使用保利威视频加密

    文章目录 我的订单 后端提供查询当前登录用户的订单列表信息 前端请求获取当前登录用户的订单信息 订单状态显示分析 使用Celery的定时任务来完成订单超时功能 视频播放 使用保利威云视频服务来对视频进 ...

  6. Html5视频加密/html5播放器视频加密应用实例

    说说html5的视频加密,HTML5因无需插件可跨平台使用.开发免费.对搜索引擎友好等,深受广大开发者的喜爱,成为主流播放器的发展趋势. 市面上常见的H5加密,采用标准的Apple HLS Encry ...

  7. java调用保利威视频文件数据信息同步

    先阐述一下,我们公司开通了直播模块,采用的就是保利威的平台,直播这一块主要是公司php那边负责的,我们这边需要把他们上传到保利威视频的信息存档,并且可以通过存档的链接在我们自己的平台上播放,这个文档的 ...

  8. SaaS化MR直播正式上线!保利威开启轻量化虚拟直播时代

    今年3月份,保利威在Service+战略会上发布了SaaS化的MR直播系统. 坦白说,包括小编在内的绝大多数保利威人,都觉得这"事"没想象中的那么简单. ▲ 保利威发布SaaS化的 ...

  9. 第三方直播云平台(保利威和阿里云)直播集成demo

    第三方直播云平台(保利威和阿里云)直播集成文档整理. 保利威: 保利威帮助中心 js demo <div id="player"></div> <sc ...

最新文章

  1. Java虚拟机13:Java类加载机制
  2. java.sql.sqlexception: 无效的名称模式:_PSQLException:错误:关系&ldquo; TABLE_NAME&rdquo;不存在...
  3. 【Python】疯狂的加速函数!
  4. C++调用Go方法的字符串传递问题及解决方案
  5. Qt创建多线程的两种方法
  6. Python项目实践:绘制玫瑰花
  7. 20145226夏艺华 后门原理与实践
  8. 吴恩达CS 230深度学习课开学了!秋季视频全部上线,课件小抄应有尽有
  9. c语言线程池源代码下载,C语言实现线程池(示例代码)
  10. 关于如何将DB2中的非空约束删除
  11. mybatis操作mysql的奇淫技巧总结(代码库)
  12. Navicat for MySQL触发器更新和插入操作
  13. Java、JSP在线问卷调查系统
  14. Kubernetes Kubeadm init 与 join 原理分析
  15. ABOUT DOTA
  16. 【Java编程练习】司机肇事后逃跑,现场三人半瞎系列
  17. 计算机网络(二)Linux网络编程
  18. 汇编语言统计字符串中字符的个数
  19. matlab 毕业论文题目,matlab论文题目
  20. uniapp 登入功能 vuex使用 通俗易懂

热门文章

  1. 浏览器访问linux服务器上tomcat中的pdf文件时报404,无法访问的问题
  2. 【Python虫师】多窗口定位
  3. Copy BOM and Rounting 说明
  4. 【Oracle 12c Flex Cluster专题】—节点角色转换
  5. 微信小程序--自定义组件之搜索框
  6. ebay php,php – Ebay PN-Link-Generator – gt; Ebay API
  7. UI开发第一篇——android的九宫格式实现
  8. 证明:两个积性函数的狄利克雷乘积为积性函数
  9. 【EMNLP20 论文笔记】HGN:基于分层图网络的多跳阅读理解模型
  10. npm太慢, 淘宝npm镜像使用方法