开发指南
更新时间：2025-08-22
更换Logo
通过在header中设置Logo url，您可以将默认的百度Logo替换为个人/组织的个性化Logo。Logo图片的大小建议为：15*15像素。
Plain Text
1<style>
2 .jwplayer .jw-icon-barlogo-new:before {
3 content: none;
4 }
5 .jw-icon-barlogo-new {
6 background: url('<newLogo>') no-repeat;
7 background-position: center;
8 }
9</style>下面是一段自定义Logo的简易Web播放器的完整代码：
Plain Text
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>简单的html示例</title>
6 <style>
7 .jwplayer .jw-icon-barlogo-new:before {
8 content: none;
9 }
10 .jw-icon-barlogo-new {
11 background: url('http://cyberplayer.bcelive.com/icon/logo.png') no-repeat;
12 background-position: center;
13 }
14 </style>
15</head>
16<body>
17 <div id="playercontainer"></div>
18 <script type="text/javascript" src="https://bce-cdn.bj.bcebos.com/jwplayer/4.4.0.1/cyberplayer.js"></script>
19 <script type="text/javascript">
20 var player = cyberplayer("playercontainer").setup({
21 width : 580,
22 height : 433,
23 backcolor : "#FFFFFF",
24 stretching : "uniform",
25 appid:'XXXXp', // appid对应百度智能云控制台申请 License 后的licenseID
26 licenseUrl:'./lib/XXX.license', // license文件路径，百度智能云控制台申请后，将下载下来的.license存放到项目目录中，以静态资源方式传入。注意：.license文件名不能更改。
27
28 file : "<Media_Source_In_BOS_Bucket>",
29 autoStart : true,
30 repeat : false,
31 volume : 100,
32 controls : "over"
33 });
34 </script>
35</body>
36</html>设置播放类型
播放器 SDK 支持通过 type 参数设置播放类型。默认情况下，播放器 SDK 会根据视频文件的后缀名判断视频类型，进而按照视频文件本身的类型进行播放；设置 type 参数后，播放器 SDK 强制按照设置类型播放视频。
语法：
Plain Text
1type: "{mp4 | flv | m3u8 }"下面的代码示例表示用mp4格式播放存于"http://domain/path/file"的音视频文件：
Plain Text
1file: "http://domain/path/file",
2type: "mp4",实现HEVC/H.265播放
播放器SDK支持H.265/HEVC 编码格式通过软解进行播放，添加软解配置useSoftDecoding参数，即可播放。
- 播放器内部优先使用硬解播放；
- 针对不支持H.265硬解的浏览器，内部已优先开启软解模式；
- 可以通过配置enableDecoderDegrade开启或关闭解码兼容模式；
- 软解播放的解码操作依赖设备 CPU，播放高码率、高分辨率的视频时，对 CPU 占用率非常高。
开发者可以通过在setup方法中配置enableDecoderDegrade开启或关闭H.265解码兼容模式。
开启解码兼容模式：（默认）
enableDecoderDegrade: true
- 注意：开启H.265兼容模式后，播放器会在不支持 H.265 硬解的浏览器环境下，自动降级为软解兼容模式。
关闭解码兼容模式：
enableDecoderDegrade: false
- 注意：关闭解码兼容模式后，对于不支持 H.265 硬解的浏览器会抛出错误，开发者可以根据错误信息进行相关的容错处理。
player.onError((error)=>{ console.log('解码错误,播放失败',error) })
开发者可以通过在setup方法中添加下面的代码直接使用软解功能：
Plain Text
1useSoftDecoding: true, //是否使用软解，默认为fasle
2liveInfoPanel: {
3 showInfo: true //是否显示面板信息，默认为false
4},可通过监听performance获取的面板信息，其中面板信息参数包括：
- frameRate：帧率，单位为fps
- buffer：水位线，单位为s
- bitRate：码率，单位为kbps
- decodeFrameRate：解码帧率，单位为fps
- playStyle：播放格式：flv_live,hls_live,hls_vod,flv_vod
- height：分辨率，高度
- width：分辨率，宽度
- code：编码格式
- broken：loading记录，数组类型，其参数包括如下：
broken参数说明
- pts：当前loading pts
- time：loading时长
performance事件监听代码示例：
player.on('performance', (info) => { console.log(info); })
代码示例：
Plain Text
1 var player = cyberplayer('mp4-container').setup({
2 width: 640,
3 height: 360,
4 autostart: true,
5 stretching: 'uniform',
6 repeat: false,
7 volume: 100,
8 controls: true,
9 file: 'https://bdcloud-player.cdn.bcebos.com/testvideo/hls/265/1080p/liulangdiqiu/liulangdiqiu-265-1080.m3u8',
10 useSoftDecoding: true,
11 liveInfoPanel: {
12 showInfo: true
13 },
14 appid:'XXXXp', // appid对应百度智能云控制台申请 License 后的licenseID。 注意：此功能为高级版，请使用高级版appid和对应.license文件
15 licenseUrl:'./lib/XXX.license', // license文件路径，百度智能云控制台申请后，将下载下来的.license存放到项目目录中，以静态资源方式传入。注意：.license文件名不能更改
16 });
17 player.on('performance', (info) => {
18 console.log(info);
19 })
20 实现VVC/H.266播放
播放器SDK支持VVC/H.266 编码格式通过软解进行播放，添加软解配置useSoftDecoding参数，即可播放。
开发者可以通过在setup方法中添加下面的代码直接使用软解功能：
Plain Text
1useSoftDecoding: true, //是否使用软解，默认为fasle
2liveInfoPanel: {
3 showInfo: true //是否显示面板信息，默认为false
4},可通过监听performance获取的面板信息，其中面板信息参数包括：
- frameRate：帧率，单位为fps
- buffer：水位线，单位为s
- bitRate：码率，单位为kbps
- decodeFrameRate：解码帧率，单位为fps
- playStyle：播放格式：flv_live,hls_live,hls_vod,flv_vod
- height：分辨率，高度
- width：分辨率，宽度
- code：编码格式
- broken：loading记录，数组类型，其参数包括如下：
broken参数说明
- pts：当前loading pts
- time：loading时长
performance事件监听代码示例：
player.on('performance', (info) => { console.log(info); })
代码示例：
Plain Text
1 var player = cyberplayer('mp4-container').setup({
2 width: 640,
3 height: 360,
4 autostart: true,
5 stretching: 'uniform',
6 repeat: false,
7 volume: 100,
8 controls: true,
9 file: 'XXX-vvc.mp4',
10 useSoftDecoding: true,
11 liveInfoPanel: {
12 showInfo: true
13 },
14 appid:'XXXXp', // appid对应百度智能云控制台申请 License 后的licenseID。 注意：此功能为高级版，请使用高级版appid和对应.license文件
15 licenseUrl:'./lib/XXX.license', // license文件路径，百度智能云控制台申请后，将下载下来的.license存放到项目目录中，以静态资源方式传入。注意：.license文件名不能更改
16 });
17 player.on('performance', (info) => {
18 console.log(info);
19 })实现字幕功能
使用SDK，可以为视频添加字幕以及进行字幕样式的定制。
添加字幕
播放器Web SDK支持SRT、VTT格式的字幕。开发者可以通过在setup方法中添加下面的代码实现字幕功能。
Plain Text
1tracks : [{
2 //字幕文件的URL，注意：需要考虑SDK跨域访问的局限性。
3 file: "中文.srt",
4 //字幕的标签
5 label: "Chinese",
6 //true表示默认显示字幕，false则相反。注意：default要有双引号。
7 "default": true
8}]定制字幕样式
播放器 SDK 提供两种定制方式：
- captions选项块
- HTML标签
在setup方法中添加captions选项块
开发者可以通过在setup方法中添加captions选项块实现对字幕样式的定制。代码如下：
Plain Text
1captions: {
2 //false表示背景透明，true表示背景黑色
3 back: false,
4 //设置字幕字体颜色
5 color: 'cc0000',
6 //设置字幕字体大小
7 fontsize: 20
8}在字幕文件中添加基本的HTML标签
开发者可以通过在字幕文件中添加基本的HTML标签实现对字幕样式的定制。下面以SRT格式字幕为例，代码如下：
Plain Text
11
200:01:11,050 --> 00:01:12,300
3<b>Duke</b>?
4
52
600:01:13,380 --> 00:01:15,290
7<font color=”#3333CC”>Jack, <i>how</i> are you ? </font>
8
93
1000:01:15,290 --> 00:01:17,370
11Well, <font size=”30” color=”#FF0000”>sorry to bother you, but Sam Verdreaux called.</font>示例代码：
Plain Text
1 var player = cyberplayer('mp4-container').setup({
2 width: 640,
3 height: 360,
4 autostart: true,
5 stretching: 'uniform',
6 repeat: false,
7 volume: 100,
8 controls: true,
9 file: 'XXX.mp4',
10 tracks: [
11 {file: "XXX-ch.srt", label: "Chinese"}, // 字幕srt配置文件
12 {file: "XXX-fa.srt", label: "Farsi"},
13 {file: "XXX-gr.srt", label: "Greek"}
14 ],
15 captions: {
16 back: true, // false表示背景透明，true表示背景黑色
17 fontSize: 18, // 字体大小
18 fontFamily: 'Arial,sans-serif', // 字体样式
19 fontOpacity: 100, // 字体透明度
20 color: '#666', // 字体颜色
21 backgroundColor: '#000', // 字幕背景颜色
22 backgroundOpacity: 100 // 字幕背景透明度
23 },
24 appid:'XXXXp', // appid对应百度智能云控制台申请 License 后的licenseID
25 licenseUrl:'./lib/XXX.license', // license文件路径，百度智能云控制台申请后，将下载下来的.license存放到项目目录中，以静态资源方式传入。注意：.license文件名不能更改
26 });
27 实现列表播放
播放器SDK支持中添加多个资源实现列表播放。实现了列表播放，以及列表栏显示等诸多功能。具体的参数配置如下：
可配置sources为多个链接如下配置即可实现线路、清晰度切换。其中label和title为自定义。
Plain Text
1playlist: [
2 {
3 sources: [ // 播放源信息,以数组的形式可传入多个链接，其参数包括file、label
4 {
5 file: '01-1.mp4' // 播放源链接，例如：XXX.mp4
6 label:'高清'
7 },
8 {
9 file: '01-2.mp4' // 播放源链接，例如：XXX.mp4
10 label:'标清'
11 }
12 ],
13 title: '线路1' //播放列表中显示的标题
14 },
15 {
16 sources: [
17 {
18 file: '02-1.mp4',
19 label:'高清'
20 },
21 {
22 file: '02-2.mp4',
23 label:'标清'
24 }
25 ],
26 title: '线路2'
27 }
28 ]如果sources数组仅有一个值时，则可以已播放列表形式展示，即没有清晰度切换按钮
Plain Text
1playlist: [
2 {
3 sources: [ // 播放源信息
4 {
5 file: '01-1.mp4' // 播放源链接，例如：XXX.mp4
6 }
7 ],
8 title: '线路1' //播放列表中显示的标题
9 },
10 {
11 sources: [
12 {
13 file: '02-1.mp4',
14 label:'高清'
15 }
16 ],
17 title: '线路2'
18 }
19 ]接口及事件说明：
接口：
Plain Text
1 cyberplayer::getPlaylist()
2 参数列表：无
3 返回类型：Array
4 接口功能：获取当前的播放列表。
5 代码示例：
6 var playlist = myPlayer. getPlaylist();
7
8 cyberplayer::getPlaylistIndex()
9 参数列表：无
10 返回类型：Number
11 接口功能：获取当前正在播放视频在播放列表中的位置，0代表第一个，依次类推。
12 代码示例：
13 var playlistIndex = myPlayer. getPlaylistIndex();
14
15 cyberplayer::getPlaylistItem
16 参数列表：无
17 返回类型：Object
18 接口功能：获取当前正在播放的视频对象。
19 代码示例：
20 var playlistItem = myPlayer. getPlaylistItem();
21
22 cyberplayer::playlistItem
23 参数列表：Number
24 返回类型：Object
25 接口功能：播放指定的播放条目，并返回该项对象，条目从0开始计数。
26 代码示例：
27 var item = myPlayer.playlistItem(2);
28
29 cyberplayer::playlistNext
30 参数列表：无
31 返回类型：Object
32 接口功能：播放当前播放条目的后一项，并返回该项对象。
33 代码示例：
34 var item = myPlayer.playlistNext();
35
36 cyberplayer::playlistPrev
37 参数列表：无
38 返回类型：Object
39 接口功能：播放当前播放条目的前一项，并返回该项对象。
40 代码示例：
41 var item = myPlayer.playlistPrev()
42 事件:
Plain Text
1 cyberplayer::onPlaylist
2 参数列表：Function
3 返回类型：无
4 接口功能：设置播放器播放列表接收函数。
5 代码示例：
6 player.onPlaylist(function(event){
7 console.log(event)
8 });
9 或使用on监听：
10 player.on('playlist',(event)=>{
11 console.log(event)
12 })
13
14 cyberplayer::onPlaylistItem
15 参数列表：Function
16 返回类型：无
17 接口功能：设置播放器当前播放条目变化监听函数。
18 代码示例：
19 player.onPlaylistItem(function(event){
20 console.log(event)
21 });
22 或使用on监听：
23 player.on('playlistItem',(event)=>{
24 console.log(event)
25 })代码示例：
Plain Text
1 var player = cyberplayer('mp4-container').setup({
2 width: 640,
3 height: 360,
4 autostart: true,
5 stretching: 'uniform',
6 repeat: false,
7 volume: 100,
8 controls: true,
9 starttime: 0,
10 playlist: [
11 {
12 sources: [{file: 'XXX.mp4'},
13 title: '线路1'
14 },
15 {
16 sources: [{file: 'XXX.mp4'}],
17 title: '线路2'
18 }
19 ],
20 appid:'XXXXp', // appid对应百度智能云控制台申请 License 后的licenseID
21 licenseUrl:'./lib/XXX.license', // license文件路径，百度智能云控制台申请后，将下载下来的.license存放到项目目录中，以静态资源方式传入。注意：.license文件名不能更改
22 });
23 // 获取播放列表信息
24 const Playlist = player.getPlaylist(); //获取当前的播放列表
25 const PlaylistIndex = player.getPlaylistIndex();//获取当前正在播放视频在播放列表中的位置，0代表第一个，依次类推。
26 const getPlaylistItem = player.getPlaylistItem();//获取当前正在播放的视频对象
27 // 设置
28 var item = player.playlistItem(1); //播放指定的播放条目，并返回该项对象，条目从0开始计数。
29 var item = player.playlistNext(); //播放当前播放条目的后一项，并返回该项对象。
30 var item = player.playlistPrev(); // 播放当前播放条目的后一项，并返回该项对象。
31 // 事件监听
32 player.on('playlist', (event) => {
33 console.log(event)
34 })
35 player.on('playlistItem', (event) => {
36 console.log(event)
37 })
38 player.onPlaylist(function (event) {
39 console.log(event)
40 });
41 player.onPlaylistItem(function (event) {
42 console.log(event)
43 });清晰度切换
播放器SDK支持清晰度切换，支持用户自行切换清晰度。
示例代码：
Plain Text
1 var player = cyberplayer('container').setup({
2 width: 640,
3 height: 360,
4 autostart: true,
5 stretching: 'uniform',
6 repeat: false,
7 volume: 100,
8 controls: true,
9 playlist:[{"sources": [
10 {"file":"XXX.m3u8","label":"高清"},
11 {"file":"XXX.m3u8","label":"标清"}],
12 }],
13
14 appid:'XXXXp', // appid对应百度智能云控制台申请 License 后的licenseID
15 licenseUrl:'./lib/XXX.license', // license文件路径，百度智能云控制台申请后，将下载下来的.license存放到项目目录中，以静态资源方式传入。注意：.license文件名不能更改
16 });显示贴片广告
在视频片头、片尾和播放暂停时显示图片广告，支持gif、png、jpeg格式图片。
其中start是片头广告参数，pause是暂停广告参数，end是片尾广告参数。Image参数表示显示图片地址，url表示链接地址，time表示片头广告显示时长，单位为秒。
暂停广告图片显示时会被缩放到400x300，推荐使用宽高比为4:3的图片作为暂停广告。
Plain Text
1imageAdvs : {
2 start : {
3 image : "http://xxxx/abc.gif",
4 url : "http://xxxx",
5 time : 10
6 },
7 pause : {
8 image : " http://xxxx/abc.gif ",
9 url : " http://xxxx"
10 },
11 end : {
12 image : " http://xxxx/abc.gif ",
13 url : " http://xxxx"
14 }
15}实现跑马灯功能
代码示例如下：
Plain Text
1marquee: {
2 show: false, // 显示与否，默认不显示
3 text:'中国善良的解放路的时间', // 跑马灯文字，默认‘百度智能云’
4 fontSize:20, // 字体大小
5 color:' #990033' // 字体颜色
6}设置视频buffer控制
您可通过maxBufferLength配置项设置最大缓存长度，单位为秒。
- 视频类型：HLS点播视频
示例代码：
Plain Text
1var player = cyberplayer('mp4-container').setup({
2 width: 500,
3 height: 260,
4 autostart: true,
5 repeat: false,
6 volume: 0,
7 primary: 'flash',
8 startparam: 'start',
9 maxBufferLength: 30,
10 file: 'http://demo/test.m3u8'
11 });弹幕功能
播放器SDK支持显示弹幕、智能蒙版弹幕。通过在setup中配置参数支持此功能。配置弹幕后可以在播放器内部显示弹幕样式，可以设置弹幕样式，比如字体大小，字体透明度，弹幕速度，弹幕显示区域。
蒙版弹幕：可以配置支持蒙版弹幕，弹幕的播放源需要经过百度智能云服务合成的带有SEI字幕信息的MP4格式。
使用过程中可以配置如下参数：
- show（布尔类型）：是否显示弹幕开关按钮，默认false
- useMask（布尔类型）：是否配置使用蒙版弹幕，默认false
- opacity（Number类型）：配置弹幕透明度，默认为1， 取值为0-1
- fontSize（Number类型）：配置弹幕字体大小，默认为24
- speed（Number类型）：配置弹幕速度：默认为1，可配置0.25，0.5，0.74，1
- area（Number类型）：配置弹幕显示区域：默认为0.5 可配置0.25，0.5，0.74，1
- active（布尔类型）：配置默认是否开启弹幕，默认为false
- items（数据）：配置弹幕列表bulletList
bulletList配置弹幕列表，其参数为：
- show（String类型）：设置默认发送的文本
- time（String类型）：设置默认弹幕显示的时间，单位为秒
提供发送弹幕方法：
Plain Text
1player.sendDanmu({text:'欢迎使用cyberplayer',time:10});示例代码：
Plain Text
1var player = cyberplayer('mp4-container').setup({
2 width: 640,
3 height: 360,
4 autostart: true,
5 stretching: 'uniform',
6 repeat: false,
7 volume: 100,
8 controls: true,
9 file:'XXX.mp4'
10 danmaku: {
11 show: true,
12 fontSize: 24,
13 speed: 1,
14 area: 0.5,
15 opacity: 1,
16 items: {text:'XXX',time:'1'},
17 active: false,//是否开启，默认为false
18 useMask:false
19 },
20 appid:'XXXXp', // appid对应百度智能云控制台申请 License 后的licenseID
21 licenseUrl:'./lib/XXX.license', // license文件路径，百度智能云控制台申请后，将下载下来的.license存放到项目目录中，以静态资源方式传入。注意：.license文件名不能更改
22 });
23
24
25
26 播放HLS加密视频
播放器SDK支持百度智能云DRM 加密视频播放。支持播放通过百度智能云视频版权保护服务（https://cloud.baidu.com/doc/MCT/s/Skmylkuy2）进行加密的HLS视频源。其中加密方式有3种：
- Open：开放密钥，系统自动生成加密密钥，密钥公开，不设访问控制。
- PlayerBinding：绑定播放器，系统自动生成加密密钥，密钥设有访问控制。 PlayerBinding模式下密钥设有访问控制，安全性比较高，推荐使用PlayerBinding模式。
- Token: 临时口令播放授权，系统根据userKey生成密钥加密视频；播放时按照规则生成Token并发送给密钥服务验证，校验通过才能播放，安全性比较高。
其中Open和PlayerBinding模式对于播放器不需要传参数，播放器内部实现解密播放。对于Token模式，需要给播放器传入token口令用作校验，通过后才可以播放。同时需要在setup方法中传入tokenEncrypt:true作为使用token加密标识。
示例代码：
Plain Text
1var player = cyberplayer('mp4-container').setup({
2 width: 640,
3 height: 360,
4 autostart: true,
5 stretching: 'uniform',
6 repeat: false,
7 volume: 100,
8 controls: true,
9 file: 'XXX.m3u8',
10 tokenEncrypt:true, // 说明使用token加密
11 appid:'XXXXp', // appid对应百度智能云控制台申请 License 后的licenseID
12 licenseUrl:'./lib/XXX.license', // license文件路径，百度智能云控制台申请后，将下载下来的.license存放到项目目录中，以静态资源方式传入。注意：.license文件名不能更改
13 });
14 // token需要从服务器端获取
15 var token = '485aa70XXXec3ac_74c18025680XXXb81d53_169XXX0273';
16 player.on('beforePlay', function (e) {
17 player.setToken(e.file, token);
18 });UI自定义
播放器SDK支持在setup中配置参数skin控制按钮及进度条进行背景颜色、激活或者悬浮颜色、未激活颜色的设置。配置参数controlbar控制是否显示进度条上的logo、logo跳转地址、进度条是否允许拖动功能。
开发者可以通过配置controlbar来控制控制条配置，代码如下：
Plain Text
1controlbar: {
2 barLogo: true, // 进度条上的logo显示与否,默认true
3 barLogoUrl: "https://www.baidu.com/", // 进度条上的logo的跳转地址可配置
4 canDrag: true, // 进度条是否允许拖动,默认true
5}开发者可以通过配置skin来控制控制条样式的显示，代码如下：
Plain Text
1skin: {
2 name: "bce", // 默认皮肤-bce，其他可选项有beelden, bekle, five, glow, roundster, seven, six, stormtrooper, vapor
3 background: "#108cee", // 背景色设置
4 inactive: "#FFF", // 未激活时的颜色
5 active: "red", // 悬浮或激活的严责
6}示例代码：
Plain Text
1var player = cyberplayer('mp4-container').setup({
2 width: 640,
3 height: 360,
4 autostart: true,
5 stretching: 'uniform',
6 repeat: false,
7 volume: 100,
8 controls: true,
9 file: 'XXX.m3u8',
10 controlbar: {
11 barLogo: true, // 进度条上的logo显示与否,默认true
12 barLogoUrl: "https://www.baidu.com/", // 进度条上的logo的跳转地址可配置
13 canDrag: true, // 进度条是否允许拖动,默认true
14 },
15 skin: {
16 name: "bce", // 默认皮肤-bce，其他可选项有beelden, bekle, five, glow, roundster, seven, six, stormtrooper, vapor
17 background: "#108cee", // 背景色设置
18 inactive: "#FFF", // 未激活时的颜色
19 active: "red", // 悬浮或激活的严责
20 },
21 appid:'XXXXp', // appid对应百度智能云控制台申请 License 后的licenseID
22 licenseUrl:'./lib/XXX.license', // license文件路径，百度智能云控制台申请后，将下载下来的.license存放到项目目录中，以静态资源方式传入。注意：.license文件名不能更改
23 });水印
播放器SDK支持水印的显示，通过在setup中配置参数支持此功能。配置水印内容及样式后可以在播放器内部显示水印，可以对水印的类型、位置、字体颜色、透明度、速度等进行配置。参数说明及配置如下：
开发者可以通过配置watermark来控制水印样式显示，参数配置及说明如下：
- type（String类型）：水印类型，值可为：‘text’ or ‘image，默认为‘text’
- speed（Number类型）：水印运行速度，0-1 默认为0可理解为静态
- content（String类型）：水印内容 默认为空。type等于‘text’时，值为文本信息，type等于‘image’时，值为在线图片链接。格式可 为：’png‘、‘jpg’、‘svg’等浏览器支持的图片格式
- fontSize（Sting类型）：字体大小 默认为12px,格式为浏览器支持设置的字体大小可以为：‘px’、‘em’、‘rem’
- color（String类型）：水印颜色 默认为‘#fffff’
- left（String类型）：水印位置距离左侧位置 可以设置百分比或“Xpx”距离
- top（String类型）：水印位置距离顶部位置 可以设置百分比或“Xpx”距离
- rotate（String类型）：水印旋转角度 值为：'Xdeg'
示例代码：
Plain Text
1var player = cyberplayer('container').setup({
2 width: 640,
3 height: 360,
4 autostart: true,
5 stretching: 'uniform',
6 repeat: false,
7 volume: 100,
8 controls: true,
9 file: 'XXX.m3u8',
10 watermark:{
11 type:"text",
12 speed:0.5,
13 content:"这里是水印",
14 opacity:1,
15 fontSize:"12px",
16 color:"#fff",
17 left:"10px",
18 bottom:"100px",
19 rotate:"0deg"
20 }，
21 appid:'XXXXp', // appid对应百度智能云控制台申请 License 后的licenseID
22 licenseUrl:'./lib/XXX.license', // license文件路径，百度智能云控制台申请后，将下载下来的.license存放到项目目录中，以静态资源方式传入。注意：.license文件名不能更改
23 });画中画
播放器SDK支持画中画配置，配置画中画后，可通过点击播放器画中画按钮进行画中画模式切换。
开发者可以通过在setup方法中添加pictinpict属性来配置显示画中画切换icon。代码如下：
Plain Text
1var player = cyberplayer('container').setup({
2 width: 640,
3 height: 360,
4 autostart: true,
5 stretching: 'uniform',
6 repeat: false,
7 volume: 100,
8 controls: true,
9 file: 'XXX.mp4',
10 appid:'XXXXp', // appid对应百度智能云控制台申请 License 后的licenseID
11 licenseUrl:'./lib/XXX.license', // license文件路径，百度智能云控制台申请后，将下载下来的.license存放到项目目录中，以静态资源方式传入。注意：.license文件名不能更改
12 pictinpict:true
13 });自适应码率
播放器SDK支持播放HLS自适应码流，可根据网络带宽自动选择合适的码率进行播放，并且支持用户手动切换 HLS 视频的多路清晰度流，其中切换到自动模式时自动选择合适的码率进行播放，默认为自动。
示例代码：
Plain Text
1var player = cyberplayer('container').setup({
2 width: 640,
3 height: 360,
4 autostart: true,
5 stretching: 'uniform',
6 repeat: false,
7 volume: 100,
8 controls: true,
9 file: 'XXX.m3u8',
10 appid:'XXXXp', // appid对应百度智能云控制台申请 License 后的licenseID
11 licenseUrl:'./lib/XXX.license', // license文件路径，百度智能云控制台申请后，将下载下来的.license存放到项目目录中，以静态资源方式传入。注意：.license文件名不能更改
12 });提供分辨率更新时事件触发，代码如下：
Plain Text
1player.on('hls_level_updated',(data)=>{
2 console.log(data,'hls_level_updated');
3 console.log(player.getHlsCurrentLevel(),'hls_level_updated')
4 })提供获取当前hls level接口可通过调用：player.getHlsCurrentLevel()获取 其返回参数及说明如下：
- bitrate（Number类型）：当前选择的播放文件对应的bitrate
- height（Number类型）：当前选择的播放文件对应的分辨率
- id（String类型）：当前选择的播放文件对应的id
- label（Sting类型）：当前选择的播放文件对应的播放器显示label
- width（Number类型）：当前选择的播放文件对应的分辨率
纯音频播放
播放器SDK支持纯音频播放包括格式：mp3、aac、flac、ogg、wav、opus。
（注意：其兼容性取决于浏览器是否可以解码播放）
示例代码：
Plain Text
1var player = cyberplayer('container').setup({
2 width: 640,
3 height: 360,
4 autostart: true,
5 stretching: 'uniform',
6 repeat: false,
7 volume: 100,
8 controls: true,
9 file: 'XXX.mp3',
10 appid:'XXXXp', // appid对应百度智能云控制台申请 License 后的licenseID
11 licenseUrl:'./lib/XXX.license', // license文件路径，百度智能云控制台申请后，将下载下来的.license存放到项目目录中，以静态资源方式传入
12 });WebRTC拉流播放
播放器SDK支持WebRTC协议播放，通过在setup中配置RtcPlugin对象，其中参数包括serverUrl、usedatachannel、reConnectTimeOut、reConnectTime。参数说明及配置如下：
开发者可以通过配置RtcPlugin来进行WebRTC拉流播放，参数配置及说明如下：
| 参数 | 类型 | 是否必填 | 说明 |
|---|---|---|---|
| serverUrl | String | 是 | 播放链接 |
| usedatachannel | Boolean | 否 | 是否开启datachannel传输数据，默认为false |
| reConnectTimeOut | Number | 否 | 断线重连超时时间，默认30s |
| reConnectTime | Number | 否 | 断线重连次数，默认6次 |
| usehttps | Boolean | 否 | 是否开启https访问，默认为false |
事件监听：
开发者可通过player.on('rtcEvent',callback)来监听WebRTC事件。其中callback返回数据对象参数包括event、type。其中type值为'rtcEvent',
event值及说明如下：
| 参数值 | 说明 |
|---|---|
| onDataChannelOpen | 使用datachannel时触发、DataChannel通道已连接 |
| onDataChannelMsg | 使用datachannel时触发、收到对等端发送的消息 |
| onDataChannelError | 使用datachannel连接失败 |
| onDataChannelClose | 使用datachannel连接关闭 |
| canplay | 可播放 |
| pause | 播放已暂停 |
| play | 已播放 |
| volumechange | 音量发生改变 |
| reConnecting | rtc断线正在重连中 |
| reConnectFailed | rtc重连失败 |
| reConnectSuccess | rtc播放错误 |
| destroy | rtc被销毁 |
示例代码：
Plain Text
1 function defaultOpt() {
2 return {
3 title:'RTC',
4 image:'http://cyberplayer.bcelive.com/thumbnail.jpg',
5 width:640,
6 height:360,
7 autostart:true,
8 stretching:'uniform',
9 repeat:false,
10 volume:100,
11 controls:true,
12 appid:'XXXXp', // appid对应百度智能云控制台申请 License 后的licenseID
13 licenseUrl:'./lib/XXX.license', // license文件路径，百度智能云控制台申请后，将下载下来的.license存放到项目目录中，以静态资源方式传入。注意：.license文件名不能更改
14 RtcPlugin:{"serverUrl":"webrtc:XXX","usedatachannel":true}
15 }
16 }
17 const player = cyberplayer('container').setup(defaultOpt());
18 player.on('rtcEvent',(data)=>{
19 console.log(data,'rtcEvent');
20 })
21 实现AV1播放
播放器SDK支持mp4封装的AV1视频播放。优先使用硬解播放，对于不支持硬解（例如：safari浏览器）的浏览器，使用wasm软解能力，在setup方法中添加软解配置useSoftDecoding参数，即可播放。
- 播放器内部优先使用硬解播放；
- 部分浏览器不支持 AV1 编码格式，如果需要播放该编码格式的视频，请开启软解；
- 可以通过配置enableDecoderDegrade开启或关闭解码兼容模式；
- 针对不支持 AV1 编码格式的浏览器，内部已优先开启软解模式；
- 软解播放的解码操作依赖设备 CPU，播放高码率、高分辨率的视频时，对 CPU 占用率非常高。
开发者可以通过在setup方法中配置enableDecoderDegrade开启或关闭AV1解码兼容模式。
开启解码兼容模式：（默认）
enableDecoderDegrade: true
- 注意：开启AV1兼容模式后，播放器会在不支持AV1硬解的浏览器环境下，自动降级为软解兼容模式。
关闭解码兼容模式：
enableDecoderDegrade: false
- 注意：关闭解码兼容模式后，对于不支持AV1硬解的浏览器会抛出错误，开发者可以根据错误信息进行相关的容错处理。
player.onError((error)=>{ console.log('解码错误,播放失败',error) })
开发者可以通过在setup方法中配置useSoftDecoding:true使用软解功能：
| 参数 | 类型 | 是否必填 | 说明 |
|---|---|---|---|
| useSoftDecoding | Boolean | 否 | 是否使用软解，默认为fasle |
代码示例：
Plain Text
1 var player = cyberplayer('container').setup({
2 title:'AV1播放',
3 width: 640,
4 height: 360,
5 autostart: true,
6 stretching: 'uniform',
7 repeat: false,
8 volume: 100,
9 controls: true,
10 file: 'https:XXX.mp4',
11 useSoftDecoding: true,
12 appid:'XXXXp', // appid对应百度智能云控制台申请 License 后的licenseID。注意：此功能为高级版，请使用高级版appid和对应.license文件
13 licenseUrl:'./lib/XXX.license', // license文件路径，百度智能云控制台申请后，将下载下来的.license存放到项目目录中，以静态资源方式传入。注意：.license文件名不能更改
14 });
15 直播时移
播放器支持时移功能，开启直播时移后，在直播期间观众可以拖动进度条跳转至任意过去时间点观看直播内容。通过在setup中配置timeShift对象来控制时移时间，其中参数包括liveStartTime。
- 直播时移链接需要通过百度智能云直播服务中配置生成。
开发者可以配置timeShift时移时间，参数配置及说明如下：
| 参数 | 类型 | 是否必填 | 说明 |
|---|---|---|---|
| liveStartTime | Number | 是 | 时移的开始时间绝对时间：Unix 时间，例如：1698836590； 例如：Date.now() / 1000 - 60, 则表示观众可以看 1 分钟前的直播回放 |
*liveStartTime 需使用浏览器本地时间
代码示例：
Plain Text
1 var player = cyberplayer('container').setup({
2 width: 640,
3 height: 360,
4 autostart: true,
5 stretching: 'uniform',
6 repeat: false,
7 volume: 100,
8 controls: true,
9 file: 'https:XXX.m3u8',
10 timeShift:{ //直播时移参数配置
11 liveStartTime:Date.now() / 1000 - 60, //则表示观众可以看 1 分钟前的直播回放
12 },
13 appid:'XXXXp', // appid对应百度智能云控制台申请 License 后的licenseID
14 licenseUrl:'./lib/XXX.license', // license文件路径，百度智能云控制台申请后，将下载下来的.license存放到项目目录中，以静态资源方式传入
15 });
16 自定义header
播放器支持添加自定义header，可通过在setup方法中添加headers:Object，其中参数为自己定义的对象及值。
示例代码：
Plain Text
1 function defaultOpt() {
2 return {
3 title:'自定义header',
4 image:'http://cyberplayer.bcelive.com/thumbnail.jpg',
5 width:640,
6 height:360,
7 autostart:true,
8 stretching:'uniform',
9 repeat:false,
10 volume:100,
11 controls:true,
12 file: 'https:XXX.m3u8',
13 headers:{ //自定义header，可传入多个参数。
14 authToken:'XXXX',
15 Token:'XXXXX'
16 },
17 appid:'XXXXp', // appid对应百度智能云控制台申请 License 后的licenseID
18 licenseUrl:'./lib/XXX.license', // license文件路径，百度智能云控制台申请后，将下载下来的.license存放到项目目录中，以静态资源方式传入
19 }
20 }
21 const player = cyberplayer('container').setup(defaultOpt());多语言
播放器支持对可视文字进行多语言配置，并且提供切换语言API接口。 使用多语言功能可以在setup方法中配置如下参数：
| 参数 | 是否 必填 |
类型 | 说明 |
|---|---|---|---|
| lang | 必填 | String | 默认选择的语言：值可以为:'zh'、'en' |
| languages | 选填 | Object | 配置的多语言项：值见languages配置项 |
| showLang | 选填 | Boolean | 是否在控制栏显示多语言切换选项，默认为false。 根据languages属性中的语言配置进行选择，默认为lang对应的配置。 |
languages配置项说明:
| 参数 | 类型 | 说明 |
|---|---|---|
| zh | Object | 多语言的配置项，包含自定义的多语言中文配置项及 播放列表中lineTextKey线路、definitionTextKey清晰度 对应的配置项 |
| en | Object | 多语言的配置项，包含自定义的多语言英文配置项及 播放列表中lineTextKey线路、definitionTextKey清晰度 对应的配置项 |
languages配置项可配置一项也可以配置多项
对于多线路和多清晰度切换可自定义设置多语言值
例如可以自定义definitionTextKey 、lineTextKey 对应的值用来指定多语言的 key，其值对应languages配置的参数。
示例代码如下：
Plain Text
1 const player = cyberplayer('container').setup({
2 title: "多语言",
3 width: 640,
4 height: 360,
5 volume: 10,
6 controls: true,
7 appid:'XXXXp', // appid对应百度智能云控制台申请 License 后的licenseID
8 licenseUrl:'./lib/XXX.license', // license文件路径，百度智能云控制台申请后，将下载下来的.license存放到项目目录中，以静态资源方式传入
9 lang: "en",
10 showLang: true,
11 playlist: [
12 {
13 sources: [
14 {
15 file: "XXX.m3u8",
16 definitionTextKey: "HDKEY",
17 },
18 {
19 file: "XXX.m3u8",
20 definitionTextKey: "SDKEY",
21 },
22 ],
23 lineTextKey: "LINENAME_ONE",
24 },
25 {
26 sources: [
27 {
28 file: "XXX.m3u8",
29 definitionTextKey: "HDKEY",
30 },
31 {
32 file: "XXX.m3u8",
33 definitionTextKey: "SDKEY",
34 },
35 ],
36 lineTextKey: "LINENAME_TWO",
37 },
38 ],
39 languages: {
40 en: {
41 LINENAME_ONE: "Line 1",
42 LINENAME_TWO: "Line 2",
43 SDKEY: "SD",
44 HDKEY: "HD",
45 PLAYLIST_TITLE: "play list",
46 en: "english",
47 zh: "chinese",
48 fa: "fa",
49 },
50 zh: {
51 LINENAME_ONE: "线路一",
52 LINENAME_TWO: "线路二",
53 SDKEY: "标清",
54 HDKEY: "高清",
55 PLAYLIST_TITLE: "播放列表",
56 en: "英文",
57 zh: "中文",
58 fa: "法语",
59 },
60 fa: {
61 LINENAME_ONE: "Ligne un",
62 LINENAME_TWO: "Ligne deux",
63 SDKEY: "Le standard Clear",
64 HDKEY: "Haute définition",
65 PLAYLIST_TITLE: "Playlist",
66 en: "Anglais",
67 zh: "Chinois",
68 fa: "Français",
69 },
70 },
71})记忆播放
播放器支持记忆播放功能，记忆播放开启后，可以在您上次观看视频离开后的时间点继续播放。通过在setup方法中配置isMemoryPlay开启记忆播放。
- 播放器默认使用浏览器的 localStorage API 存储播放时间，即默认情况下不能实现跨端跨平台共享存储记忆的播放时间点。
- 与从指定位置播放配置冲突，如果都配置的情况下默认选择记忆播放
开发者可以配置isMemoryPlay，参数配置及说明如下
| 参数 | 类型 | 是否必填 | 说明 |
|---|---|---|---|
| isMemoryPlay | Boolean | 否 | 是否开启记忆播放，默认为false |
代码示例：
Plain Text
1 var player = cyberplayer('container').setup({
2 title:'记忆播放',
3 width: 640,
4 height: 360,
5 autostart: true,
6 stretching: 'uniform',
7 repeat: false,
8 volume: 100,
9 controls: true,
10 file: 'https:XXX.m3u8',
11 isMemoryPlay:true,
12 appid:'XXXXp', // appid对应百度智能云控制台申请 License 后的licenseID
13 licenseUrl:'./lib/XXX.license', // license文件路径，百度智能云控制台申请后，将下载下来的.license存放到项目目录中，以静态资源方式传入
14 });
15 从指定位置播放
播放器支持从指定位置播放，通过在setup中配置starttime用来指定开始播放的时间。
- 与记忆播放配置冲突，如果都配置的情况下，默认选择记忆播放
- 设置的播放开始时间不合法，例如：配置starttime参数值大于视频总时长，播放器会选择从头开始播放
开发者可以配置starttime，参数配置及说明如下
| 参数 | 类型 | 是否必填 | 说明 |
|---|---|---|---|
| starttime | Number | 否 | 配置起播开始时间，默认为0。单位：s |
代码示例：
Plain Text
1 var player = cyberplayer('container').setup({
2 title:'从指定位置播放',
3 width: 640,
4 height: 360,
5 autostart: true,
6 stretching: 'uniform',
7 repeat: false,
8 volume: 100,
9 controls: true,
10 file: 'https:XXX.m3u8',
11 starttime:10,
12 appid:'XXXXp', // appid对应百度智能云控制台申请 License 后的licenseID
13 licenseUrl:'./lib/XXX.license', // license文件路径，百度智能云控制台申请后，将下载下来的.license存放到项目目录中，以静态资源方式传入
14 });
15 视频镜像
播放器支持配置视频镜像功能，通过在setup方法中设置isMirror参数，配置开启后会在播放器内显示镜像切换按钮，点击后进行切换。
开发者可以配置isMirror，参数配置及说明如下
| 参数 | 类型 | 是否必填 | 说明 |
|---|---|---|---|
| isMirror | Boolean | 否 | 是否开启镜像，默认为false |
代码示例：
Plain Text
1 var player = cyberplayer('container').setup({
2 title:'视频镜像',
3 width: 640,
4 height: 360,
5 autostart: true,
6 stretching: 'uniform',
7 repeat: false,
8 volume: 100,
9 controls: true,
10 file: 'https:XXX.m3u8',
11 isMirror:true,
12 appid:'XXXXp', // appid对应百度智能云控制台申请 License 后的licenseID
13 licenseUrl:'./lib/XXX.license', // license文件路径，百度智能云控制台申请后，将下载下来的.license存放到项目目录中，以静态资源方式传入
14 });
15 视频旋转
播放器支持配置开启视频旋转功能，可以在setup设置rotate参数用来指定视频旋转。其中rotate参数包括clockwise、innerRotate。配置开启后会在播放器内显示旋转按钮，点击后会按照配置进行旋转。
开发者可以配置rotate，其参数包括clockwise、innerRotate，配置说明如下
| 参数 | 类型 | 是否必填 | 说明 |
|---|---|---|---|
| clockwise | Boolean | 否 | 指定旋转方向，true表示顺时针，false表示逆时针。默认为true。每次操作旋转90度 |
| innerRotate | Boolean | 否 | 是否只旋转内部 video或canvas（软解使用）。默认为true。为false时则与控制条一起旋转 |
代码示例：
Plain Text
1 var player = cyberplayer('container').setup({
2 title:'视频旋转',
3 width: 640,
4 height: 360,
5 autostart: true,
6 stretching: 'uniform',
7 repeat: false,
8 volume: 100,
9 controls: true,
10 file: 'https:XXX.m3u8',
11 rotate:{"clockwise":false,"innerRotate":true}
12 appid:'XXXXp', // appid对应百度智能云控制台申请 License 后的licenseID
13 licenseUrl:'./lib/XXX.license', // license文件路径，百度智能云控制台申请后，将下载下来的.license存放到项目目录中，以静态资源方式传入
14 });
15 实现DASH播放
播放器SDK支持DASH协议播放，通过在setup中设置file值为.mpd格式链接。
示例代码：
Plain Text
1 function defaultOpt() {
2 return {
3 title:'dash点播',
4 width:640,
5 height:360,
6 autostart:true,
7 stretching:'uniform',
8 appid:'XXXXp', // appid对应百度智能云控制台申请 License 后的licenseID
9 licenseUrl:'./lib/XXX.license', // license文件路径，百度智能云控制台申请后，将下载下来的.license存放到项目目录中，以静态资源方式传入。注意：.license文件名不能更改
10 repeat:false,
11 volume:100,
12 controls:true,
13 file:"XXX.mpd"
14 }
15 }
16 let player = cyberplayer('playerContainer').setup(defaultOpt());
17
18 实现VR播放
播放器SDK支持VR全景视频播放，播放中可以通过陀螺仪转动或手势操作来改变视角。
支持视频封装格式
| 播放协议 | 浏览器 |
|---|---|
| HLS | 支持 |
| MP4 | 支持 |
| FLV | 支持 |
| TS | 支持 |
| DASH | 支持 |
初始化播放器实例时，可通过声明 VrPlugin 插件的方法开启 VR 播放能力。
示例代码：
Plain Text
1`
2 function defaultOpt() {
3 return {
4 width:640,
5 height:360,
6 stretching:'uniform',
7 VRPlugin:{
8 yaw:0, // 初始化左右视角角度，单位为度。
9 ... //其他参数详见：插件属性说明
10 },
11 appid:'XXXXp', // appid对应百度智能云控制台申请 License 后的licenseID。 注意：此功能为高级版，请使用高级版appid和对应.license文件
12 licenseUrl:'./lib/XXX.license', // license文件路径，百度智能云控制台申请后，将下载下来的.license存放到项目目录中，以静态资源方式传入。注意：.license文件名不能更改
13 }
14 }
15 window.player = cyberplayer('playerContainer').setup(defaultOpt());
16 `
17 插件属性说明如下
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| initialYaw | Number | 0 | 初始化左右视角角度，单位为度。取值范围-360~360。 |
| initialPitch | Number | 0 | 初始化上下视角角度，单位为度。取值范围-180~180。 |
| fov | Number | 90 | 水平视场 (FOV) 角度。改变前后视角。取值范围0~180。 |
| yawRange | Object | {min:-360,max:360} | 限制左右视角活动的范围。单位为度。 |
| pitchRange | Object | {min:-180,max:180} | 限制上下视角活动的范围。单位为度。 |
| initialZoom | Number | 1 | 相机变焦范围。例如：zoom: 2将图像水平放大 200%。 |
| zoomChange | Object | {min:0.6,max:10} | 限制相机变焦范围。 |
API
animateTo
在一段时间通过动画形式移动到特定角度的视角。
player.VR().animateTo({ yaw: 30,pitch:20,fov:30,zoom:5 }, 1000)
enterVR
进入VR，可通过陀螺仪转动或手势操作来改变视角。
player.VR().enterVR()
exitVR
退出VR
player.VR().exitVR()
gyro(陀螺仪控制)
isAvailable
获取陀螺仪是否可用，返回值true为可用，false为不可用。
const gyroAvailable = await player.VR().gyro().isAvailable();
requestSensorPermission
请求陀螺仪权限。
await player.VR().gyro().requestSensorPermission();
enable
陀螺开启，进入后可以通过陀螺仪转动或手势操作来改变视角。
player.VR().gyro().enable()
disable
陀螺关闭，退出将以手势操作来改变视角。
player.VR().gyro().disable()
说明
- 在浏览器劫持播放的环境，无法支持 VR 视频的播放。
- Android 端播放器初始化后会默认进入 VR 模式，并开启陀螺仪。
-
iOS 端根据系统版本不同，表现会有差异：
- 系统版本13+，需要手动点击页面，触发人机交互并获取权限后，才能打开陀螺仪。
- 系统版本12.2 - 13，需进入系统设置手动开启运动传感器。通常来说开启路径一般为设置 > Safari > 动作与方向访问，开启传感器后刷新页面，即可打开。
- Gyroscope陀螺仪传感器仅在安全上下文中工作。也就是本地环境：localhost，http://127.0.0.1/， 及https:// 环境。 其余环境例如： http://baidu.com/XX/XX 不生效。
支持打点及缩略图
播放器SDK支持设置打点及缩略图，可在监听onReady后通过setCues()接口进行配置。
setCues()
设置打点及缩略图
参数说明
| 参数 | 类型 | 是否必填 | 默认值 | 说明 |
|---|---|---|---|---|
| begin | Number | 是 | 无 | 打点的时间，单位：s |
| text | String | 否 | 无 | 打点标题内容 |
| describe | String | 否 | 无 | 打点描述内容 |
| img | String | 否 | 无 | 缩略图路径 |
代码示例
Plain Text
1 function defaultOpt() {
2 return {
3 title:'打点及缩略图',
4 width:640,
5 height:360,
6 autostart:true,
7 stretching:'uniform',
8 file: 'https:XXX.mp4',
9 appid:'XXXXp', // appid对应百度智能云控制台申请 License 后的licenseID
10 licenseUrl:'./lib/XXX.license', // license文件路径，百度智能云控制台申请后，将下载下来的.license存放到项目目录中，以静态资源方式传入。注意：.license文件名不能更改
11 repeat:false,
12 volume:100,
13 controls:true,
14 }
15 }
16 let player = cyberplayer('playerContainer').setup(defaultOpt());
17 player.onReady(function () {
18 // 动态设置打点及缩略图。
19 player.setCues([
20 { begin: 19.5, text: '我的信息1',img:'./assets/img1.jpg',describe:'describe1' },
21 { begin: 50, text: '我的信息2',img:'./assets/img2.jpg',describe:'describe2' },
22 ]);
23 })实现HLS、DASH多音轨切换
播放器SDK支持HLS、DASH多音轨切换，通过在setup中设置file值为带多音轨.m3u8/.mpd格式链接。
代码示例：
Plain Text
1 function defaultOpt() {
2 return {
3 title:'多音轨切换',
4 width:640,
5 height:360,
6 autostart:true,
7 stretching:'uniform',
8 appid:'XXXXp', // appid对应百度智能云控制台申请 License 后的licenseID
9 licenseUrl:'./lib/XXX.license', // license文件路径，百度智能云控制台申请后，将下载下来的.license存放到项目目录中，以静态资源方式传入。注意：.license文件名不能更改
10 repeat:false,
11 volume:100,
12 controls:true,
13 file:"XXX.mpd" //带多音轨.m3u8/.mpd格式链接
14 }
15 }
16 let player = cyberplayer('playerContainer').setup(defaultOpt());支持HEVC/H.265自动降级
播放器SDK支持同时传入 HEVC 和其它视频编码格式。 当浏览器不支持 HEVC 格式时，自动降级为配置的其它编码格式（如： H.264 ）的视频播放。
Plain Text
1 function defaultOpt() {
2 return {
3 title:'HEVC/H.265自动降级',
4 width:640,
5 height:360,
6 autostart:true,
7 stretching:'uniform',
8 appid:'XXXXp', // appid对应百度智能云控制台申请 License 后的licenseID
9 licenseUrl:'./lib/XXX.license', // license文件路径，百度智能云控制台申请后，将下载下来的.license存放到项目目录中，以静态资源方式传入。注意：.license文件名不能更改
10 repeat:false,
11 volume:100,
12 controls:true,
13 playlist:[{"sources":[{"file":"XXX/265.mp4","label":"h265"},{"file":"XXX/h264.mp4","label":"h264"}]}],
14 enableDecoderDegrade:false,
15 }
16 }
17 let player = cyberplayer('playerContainer').setup(defaultOpt());支持SEI 信息解析
播放器SDK支持MP4、HLS、MPEG-TS、FLV封装格式的SEI信息解析。
SEI信息解析事件监听代码
player.on('sei_parsed', (sei) => { console.log(sei,'这里是SEI信息'); })
sei信息返回参数说明
| 参数 | 说明 |
|---|---|
| uuid | 返回sei信息的uuid |
| pts | sei信息插入时间戳。单位：s |
| userData | sei信息内容 |
| userDataBytes | sei信息内容，格式为Uint8Array |
| payloadType | sei信息类型，5为自定义sei信息 |
代码示例：
Plain Text
1 function defaultOpt() {
2 return {
3 title:'SEI解析',
4 width:640,
5 height:360,
6 autostart:true,
7 stretching:'uniform',
8 file: 'https:XXX.mp4',
9 appid:'XXXXp', // appid对应百度智能云控制台申请 License 后的licenseID
10 licenseUrl:'./lib/XXX.license', // license文件路径，百度智能云控制台申请后，将下载下来的.license存放到项目目录中，以静态资源方式传入。注意：.license文件名不能更改
11 repeat:false,
12 volume:100,
13 controls:true,
14 }
15 }
16 let player = cyberplayer('playerContainer').setup(defaultOpt());
17 player.on('sei_parsed',(data)=>{
18 console.log(data,'sei_parsed');
19 })切换播放地址
播放器支持在不销毁播放器的情况下更换视频源，可调用播放器实例的 playNext 方法
普通地址切换
playerSdk.playNext({url:'XXX.mp4',starttime:10});
参数说明：
| 参数 | 类型 | 是否必填 | 说明 |
|---|---|---|---|
| url | String | 是 | 播放链接 |
| starttime | Number | 否 | 切换链接从starttime开始播放，单位：S |
webrtc拉流地址切换
Plain Text
1 player.playNext({RtcPlugin:{"serverUrl":"webrtc://by-test.bj-webrtc-pl001.bigenemy.cn/XXX/XXX","usedatachannel":true}});RtcPlugin参数说明：
| 参数 | 类型 | 是否必填 | 说明 |
|---|---|---|---|
| serverUrl | String | 是 | webrtc播放链接 |
| usedatachannel | Boolean | 否 | 是否开启datachannel传输数据，默认为false |
| reConnectTimeOut | Number | 否 | 断线重连超时时间，默认30s |
| reConnectTime | Number | 否 | 断线重连次数，默认6次 |
| usehttps | Boolean | 否 | 是否开启https访问，默认为false |
API说明
详情请参见API参考。