CDN加速

HTML5播放器

更新时间:2021-10-18 17:41:04

!注意:HTML5播放器免费提供,不再提供技术支持

一、HTML5播放器下载地址

1、HTML5播放器SDK下载
2、KEY获取地址

二、简介

  网宿HTML5播放器,只需通过简单的参数配置即可实现视频直播和点播服务。当前HTML5播放器支持FLV、MP4、M3U8格式的点播,支持HLS、HTTP-FLV协议的直播,VR点直播。

三、文件清单

文件名 说明
demo/xxxx.html 相关demo展示页面
demo/xxxx.js 相关引用js文件
demo/xxxx.css 相关引用css文件
lang/en.js 国际化英文界面
lang/Zh-CN.js 国际化中文界面
wsplayer.min.js SDK库文件
wsplayer.min.css SDK样式文件
wsplayer-vr.min.js SDK-VR库文件
wsplayer-vr.min.css SDK-VR样式文件
网宿HTML5播放器使用说明书Vxxx 使用说明书

四、使用说明

1、SDK嵌入说明

<head>
  <link id="wsskin" href="wsplayer.min.css" rel="stylesheet">
<!-- VR播放,引入相应文件
<link href="wsplayer-vr.min.css" rel="stylesheet">
-->
</head>
<body>
<!-- id/class属性必须提供,且class值必须为video-js -->
<video id="my-player" class="video-js"></video>
  <script src="./wsplayer.min.js"></script>
  <!-- 国际化中文样式,引入相应文件
<script src="./lang/zh-CN.js"></script>
-->
<!-- VR播放,引入相应文件
<script src="./vr/wsplayer-vr.min.js"></script>
-->
  <script>
        const player = WSPlayer('my-player', {
              // 播放配置, 详见参数说明
           muted:true, autoplay:true, controls:true,
          sources:[{
           src: 'https://xxxxx.mp4',
                type: WSPlayer.CODEC.MP4,
                label: '480P'
      }],
           ......
}, () => {
            console.log('Your player is ready!');
            player.on(WSPlayer.WSEvent.PLAY.ENDED, function() {
                console.log('video ended.');
            });
            player.on(WSPlayer.WSEvent.PLAY.ERROR, function(event, error) {
                console.log('video error: ', error);
            });
            // VR播放
       // const vr = player.vr({
       //     debug: true,
       //     projection: '360',
       //     forceCardboard: false
            // });
        });
  </script>
</body>

五、播放配置

  播放配置为传入播放器SDK内部的一系列参数组合,通过设置相关参数即可启用播放器SDK提供的相应功能。详细参数说明如下:

上海网信办联合网宿成功举办第14期网络安全技术沙龙

1、音视频源

上海网信办联合网宿成功举办第14期网络安全技术沙龙
其中,sourceN详细参数说明如下:

上海网信办联合网宿成功举办第14期网络安全技术沙龙

2、右键菜单

上海网信办联合网宿成功举办第14期网络安全技术沙龙

3、倍速播放

上海网信办联合网宿成功举办第14期网络安全技术沙龙

4、水印

上海网信办联合网宿成功举办第14期网络安全技术沙龙

5、广告

上海网信办联合网宿成功举办第14期网络安全技术沙龙

6、配置HDL

上海网信办联合网宿成功举办第14期网络安全技术沙龙

其中媒体播放配置,详细如下:

上海网信办联合网宿成功举办第14期网络安全技术沙龙


其中重连机制配置,详细如下:

上海网信办联合网宿成功举办第14期网络安全技术沙龙

7、配置HLS

上海网信办联合网宿成功举办第14期网络安全技术沙龙
其中媒体播放配置,详细如下:

上海网信办联合网宿成功举办第14期网络安全技术沙龙
其中重连机制配置,详细如下:

上海网信办联合网宿成功举办第14期网络安全技术沙龙

8、清晰度

上海网信办联合网宿成功举办第14期网络安全技术沙龙

9、跑马灯

上海网信办联合网宿成功举办第14期网络安全技术沙龙

10、视频打点

上海网信办联合网宿成功举办第14期网络安全技术沙龙

11、视频缩略图

上海网信办联合网宿成功举办第14期网络安全技术沙龙

12、直播图片显示

上海网信办联合网宿成功举办第14期网络安全技术沙龙

13、系统时间显示

上海网信办联合网宿成功举办第14期网络安全技术沙龙

14、控制栏自定义

上海网信办联合网宿成功举办第14期网络安全技术沙龙

15、配置SEI

上海网信办联合网宿成功举办第14期网络安全技术沙龙

16、记忆播放

上海网信办联合网宿成功举办第14期网络安全技术沙龙

17、延迟追赶

上海网信办联合网宿成功举办第14期网络安全技术沙龙

18、质量日志上报功能

上海网信办联合网宿成功举办第14期网络安全技术沙龙

19、缓冲阈值功能

上海网信办联合网宿成功举办第14期网络安全技术沙龙

20、播放卡顿回调通知

上海网信办联合网宿成功举办第14期网络安全技术沙龙

六、WSPlayer说明

WSPlayer为整个播放器SDK文件对外提供的全局库名,外部可通过该库名调用SDK。
创建一个播放器实例对象,需要用WSPlayer构造返回,如:
const player = WSPlayer(playerId=’’, config={}, callback=null);
其中对应各子参数说明如下:

上海网信办联合网宿成功举办第14期网络安全技术沙龙
WSPlayer含有的属性和接口信息,详细如下

1、属性

1.1 版本号

上海网信办联合网宿成功举办第14期网络安全技术沙龙

1.2 视频类型

上海网信办联合网宿成功举办第14期网络安全技术沙龙

1.3 事件类型

上海网信办联合网宿成功举办第14期网络安全技术沙龙

事件PLAY

上海网信办联合网宿成功举办第14期网络安全技术沙龙
通过定义各相关事件的侦听函数,可捕获相关回调数据,详细如下:

上海网信办联合网宿成功举办第14期网络安全技术沙龙

事件CLARITY

上海网信办联合网宿成功举办第14期网络安全技术沙龙
通过定义各相关事件的侦听函数,可捕获相关回调数据,详细如下:

上海网信办联合网宿成功举办第14期网络安全技术沙龙

2、接口

2.1 侦听事件

上海网信办联合网宿成功举办第14期网络安全技术沙龙

2.2 侦听一次事件

上海网信办联合网宿成功举办第14期网络安全技术沙龙

2.3 移除侦听事件

上海网信办联合网宿成功举办第14期网络安全技术沙龙

2.4 触发事件

上海网信办联合网宿成功举办第14期网络安全技术沙龙

2.5 静默处理

上海网信办联合网宿成功举办第14期网络安全技术沙龙

2.6 日志外抛

上海网信办联合网宿成功举办第14期网络安全技术沙龙

2.7 日志级别

上海网信办联合网宿成功举办第14期网络安全技术沙龙

2.8 日志打印

debug

上海网信办联合网宿成功举办第14期网络安全技术沙龙

info

上海网信办联合网宿成功举办第14期网络安全技术沙龙

warn

上海网信办联合网宿成功举办第14期网络安全技术沙龙

error

上海网信办联合网宿成功举办第14期网络安全技术沙龙

七、Player说明

Player为播放器实例对象,需要用WSPlayer构造返回,如:
const player = WSPlayer(playerId=’’, config={}, callback=null);
Player含有的属性和接口信息,详细如下:

1、接口

1.1 播放

上海网信办联合网宿成功举办第14期网络安全技术沙龙

1.2 暂停播放

上海网信办联合网宿成功举办第14期网络安全技术沙龙

1.3 跳转播放

上海网信办联合网宿成功举办第14期网络安全技术沙龙

1.4 音量设置

上海网信办联合网宿成功举办第14期网络安全技术沙龙

1.5 静音切换

上海网信办联合网宿成功举办第14期网络安全技术沙龙

1.6 是否全屏

上海网信办联合网宿成功举办第14期网络安全技术沙龙

1.7 切换全屏

上海网信办联合网宿成功举办第14期网络安全技术沙龙

1.8 退出全屏

上海网信办联合网宿成功举办第14期网络安全技术沙龙

1.9 切换网页全屏

上海网信办联合网宿成功举办第14期网络安全技术沙龙

1.10 退出网页全屏

上海网信办联合网宿成功举办第14期网络安全技术沙龙

1.11 改变音视频源

上海网信办联合网宿成功举办第14期网络安全技术沙龙

1.12 开始加载

上海网信办联合网宿成功举办第14期网络安全技术沙龙

1.13 当前流地址

上海网信办联合网宿成功举办第14期网络安全技术沙龙

1.14 当前流类型

上海网信办联合网宿成功举办第14期网络安全技术沙龙

1.15 当前流信息

上海网信办联合网宿成功举办第14期网络安全技术沙龙

1.16 切换控制栏

上海网信办联合网宿成功举办第14期网络安全技术沙龙

1.17 视频宽度

上海网信办联合网宿成功举办第14期网络安全技术沙龙

1.18 视频高度

上海网信办联合网宿成功举办第14期网络安全技术沙龙

1.19 清晰度地址更新

上海网信办联合网宿成功举办第14期网络安全技术沙龙

1.20事件

侦听事件

上海网信办联合网宿成功举办第14期网络安全技术沙龙

侦听一次事件

上海网信办联合网宿成功举办第14期网络安全技术沙龙

移除侦听事件

上海网信办联合网宿成功举办第14期网络安全技术沙龙

触发事件

上海网信办联合网宿成功举办第14期网络安全技术沙龙

1.21 VR播放

上海网信办联合网宿成功举办第14期网络安全技术沙龙

八、说明

1、自动播放

  1. 由于受各浏览器自动播放策略的影响,autoplay参数配置并不一定生效,但在要求自动播放的场景下必须启用该参数;
  2. 当前PC上可通过配置静音和自动播放等两个参数值为true,再在播放器准备就绪回调中重新设置音量的方案来绕过浏览器限制,该方案兼容性无法保证;
  3. 为使得移动端和PC端保持同样的自动播放效果,建议网页加载时通过引导用户与网页做次授权交互,再启用步骤2方案来实现自动播放效果。

2、视频类型

  视频支持类型,其中点播视频本文档只以常用的MP4视频为例,真正的依据各浏览器格式支持情况,如还可以支持WEBM/OGG等格式视频,详细可查看相关链接:
  http://www.w3school.com.cn/html5/html_5_video.asp

3、流播放

3.1 证书问题

  当流播放出现证书异常时,如合流地址请求返回错误提示如出现
net::ERR_INSECURE_RESPONSE,则此时手动添加信任下流所在域名:
  如流地址为 https://test.com/live.flv ,则新开一个页面,在该页面的地址栏输入 https://test.com ,然后根据提示操作选择信任网址。
  同理,其他涉及证书问题均可使用此方法解决,除非本身证书不可用。

3.2 流地址协议

  HDL流地址支持 https://xxxxx.flv 和 wss://xxxxx.flv 形式的地址,其中默认 https:xxxx 会调用Fetch请求方式,wss:xxxx 会调用Websocket 请求方式。点播只能用 https:xxx 形式地址,直播可用 https://xxx 和 wss://xxx 等两种形式。

4、跨域

网络请求如出现Access to xxx at xxx from origin xxx has been blocked by CORS policy:No ‘Access-Control-Allow-Origin’ header xxxx等错误日志提示即为跨域问题,此处被请求的资源文件域名所在服务器需要配置相关服务即可。

5、HLS说明

由于移动端主流浏览器和Safari浏览器基本默认都原生支持HLS协议播放,因此SDK在判断浏览器原生支持HLS协议播放的话就会用原生HLS能力播放。