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

绿色云图李棒:浸没式液冷数据中心爆发的“拐点”在哪?

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