CDN加速

HTML5播放器

更新时间:2021-07-22 14:01:06

一、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提供的相应功能。详细参数说明如下:

网宿科技云备份及云网盘通过可信云认证

1、音视频源

网宿科技云备份及云网盘通过可信云认证
其中,sourceN详细参数说明如下:

网宿科技云备份及云网盘通过可信云认证

2、右键菜单

网宿科技云备份及云网盘通过可信云认证

3、倍速播放

网宿科技云备份及云网盘通过可信云认证

4、水印

网宿科技云备份及云网盘通过可信云认证

5、广告

网宿科技云备份及云网盘通过可信云认证

6、配置HDL

网宿科技云备份及云网盘通过可信云认证

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

网宿科技云备份及云网盘通过可信云认证


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

网宿科技云备份及云网盘通过可信云认证

7、配置HLS

网宿科技云备份及云网盘通过可信云认证
其中媒体播放配置,详细如下:

网宿科技云备份及云网盘通过可信云认证
其中重连机制配置,详细如下:

网宿科技云备份及云网盘通过可信云认证

8、清晰度

网宿科技云备份及云网盘通过可信云认证

9、跑马灯

网宿科技云备份及云网盘通过可信云认证

10、视频打点

网宿科技云备份及云网盘通过可信云认证

11、视频缩略图

网宿科技云备份及云网盘通过可信云认证

12、直播图片显示

网宿科技云备份及云网盘通过可信云认证

13、系统时间显示

网宿科技云备份及云网盘通过可信云认证

14、控制栏自定义

网宿科技云备份及云网盘通过可信云认证

15、配置SEI

网宿科技云备份及云网盘通过可信云认证

16、记忆播放

网宿科技云备份及云网盘通过可信云认证

17、延迟追赶

网宿科技云备份及云网盘通过可信云认证

18、质量日志上报功能

网宿科技云备份及云网盘通过可信云认证

19、缓冲阈值功能

网宿科技云备份及云网盘通过可信云认证

20、播放卡顿回调通知

网宿科技云备份及云网盘通过可信云认证

六、WSPlayer说明

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

网宿科技云备份及云网盘通过可信云认证
WSPlayer含有的属性和接口信息,详细如下

1、属性

1.1 版本号

网宿科技云备份及云网盘通过可信云认证

1.2 视频类型

网宿科技云备份及云网盘通过可信云认证

1.3 事件类型

网宿科技云备份及云网盘通过可信云认证

事件PLAY

网宿科技云备份及云网盘通过可信云认证
通过定义各相关事件的侦听函数,可捕获相关回调数据,详细如下:

网宿科技云备份及云网盘通过可信云认证

事件CLARITY

网宿科技云备份及云网盘通过可信云认证
通过定义各相关事件的侦听函数,可捕获相关回调数据,详细如下:

网宿科技云备份及云网盘通过可信云认证

2、接口

2.1 侦听事件

网宿科技云备份及云网盘通过可信云认证

2.2 侦听一次事件

网宿科技云备份及云网盘通过可信云认证

2.3 移除侦听事件

网宿科技云备份及云网盘通过可信云认证

2.4 触发事件

网宿科技云备份及云网盘通过可信云认证

2.5 静默处理

网宿科技云备份及云网盘通过可信云认证

2.6 日志外抛

网宿科技云备份及云网盘通过可信云认证

2.7 日志级别

网宿科技云备份及云网盘通过可信云认证

2.8 日志打印

debug

网宿科技云备份及云网盘通过可信云认证

info

网宿科技云备份及云网盘通过可信云认证

warn

网宿科技云备份及云网盘通过可信云认证

error

网宿科技云备份及云网盘通过可信云认证

七、Player说明

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

1、接口

1.1 播放

网宿科技云备份及云网盘通过可信云认证

1.2 暂停播放

网宿科技云备份及云网盘通过可信云认证

1.3 跳转播放

网宿科技云备份及云网盘通过可信云认证

1.4 音量设置

网宿科技云备份及云网盘通过可信云认证

1.5 静音切换

网宿科技云备份及云网盘通过可信云认证

1.6 是否全屏

网宿科技云备份及云网盘通过可信云认证

1.7 切换全屏

网宿科技云备份及云网盘通过可信云认证

1.8 退出全屏

网宿科技云备份及云网盘通过可信云认证

1.9 切换网页全屏

网宿科技云备份及云网盘通过可信云认证

1.10 退出网页全屏

网宿科技云备份及云网盘通过可信云认证

1.11 改变音视频源

网宿科技云备份及云网盘通过可信云认证

1.12 开始加载

网宿科技云备份及云网盘通过可信云认证

1.13 当前流地址

网宿科技云备份及云网盘通过可信云认证

1.14 当前流类型

网宿科技云备份及云网盘通过可信云认证

1.15 当前流信息

网宿科技云备份及云网盘通过可信云认证

1.16 切换控制栏

网宿科技云备份及云网盘通过可信云认证

1.17 视频宽度

网宿科技云备份及云网盘通过可信云认证

1.18 视频高度

网宿科技云备份及云网盘通过可信云认证

1.19 清晰度地址更新

网宿科技云备份及云网盘通过可信云认证

1.20事件

侦听事件

网宿科技云备份及云网盘通过可信云认证

侦听一次事件

网宿科技云备份及云网盘通过可信云认证

移除侦听事件

网宿科技云备份及云网盘通过可信云认证

触发事件

网宿科技云备份及云网盘通过可信云认证

1.21 VR播放

网宿科技云备份及云网盘通过可信云认证

八、说明

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能力播放。