开发指南

更新时间：2025-02-27

更换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，可通过在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参考。

使用指南

接口速查

智能视频SDK

开发指南

更换Logo

设置播放类型

实现HEVC/H.265播放

实现VVC/H.266播放

实现字幕功能

添加字幕

定制字幕样式

实现列表播放

清晰度切换

显示贴片广告

实现跑马灯功能

设置视频buffer控制

弹幕功能

播放HLS加密视频

UI自定义

水印

画中画

自适应码率

纯音频播放

WebRTC拉流播放

实现AV1播放

直播时移

自定义header

多语言

记忆播放

从指定位置播放

视频镜像

视频旋转

实现DASH播放

实现VR播放

插件属性说明如下

API

animateTo

enterVR

exitVR

gyro(陀螺仪控制)

isAvailable

requestSensorPermission

enable

disable

支持打点及缩略图

实现HLS、DASH多音轨切换

支持HEVC/H.265自动降级

支持SEI 信息解析

SEI信息解析事件监听代码

sei信息返回参数说明

切换播放地址

API说明