开发指南

更新时间：2023-08-31

更换Logo

通过在header中设置Logo url，您可以将默认的百度Logo替换为个人/组织的个性化Logo。Logo图片的大小建议为：15*15像素。

<style>
    .jwplayer .jw-icon-barlogo-new:before {
        content: none;
    }
    .jw-icon-barlogo-new {
        background: url('<newLogo>') no-repeat;
        background-position: center;
    }
</style>

下面是一段自定义Logo的简易Web播放器的完整代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>简单的html示例</title>
    <style>
        .jwplayer .jw-icon-barlogo-new:before {
            content: none;
        }
        .jw-icon-barlogo-new {
            background: url('http://cyberplayer.bcelive.com/icon/logo.png') no-repeat;
            background-position: center;
        }
    </style>
</head>
<body>
    <div id="playercontainer"></div>
    <script type="text/javascript" src="./Baidu-T5Player-SDK-Web-v2.1.1/player/cyberplayer.js"></script>
    <script type="text/javascript">
        var player = cyberplayer("playercontainer").setup({
        width : 580,
        height : 433,
        backcolor : "#FFFFFF",
        stretching : "uniform",

        file : "<Media_Source_In_BOS_Bucket>",
        ak : "<AK>",
        autoStart : true,
        repeat : false,
        volume : 100,
        controls : "over"
        });
        </script>
</body>
</html>

设置播放类型

播放器 SDK 支持通过 type 参数设置播放类型。默认情况下，播放器 SDK 会根据视频文件的后缀名判断视频类型，进而按照视频文件本身的类型进行播放；设置 type 参数后，播放器 SDK 强制按照设置类型播放视频。

语法：

type: "{mp4 | flv | m3u8 | rtmp}"

下面的代码示例表示用mp4格式播放存于"http://domain/path/file"的音视频文件：

file: "http://domain/path/file",
type: "mp4",

实现HEVC/H.265播放

播放器SDK支持H.265/HEVC 编码格式通过软解进行播放，添加软解配置useSoftDecoding参数，即可播放。

部分浏览器不支持 H.265 编码格式，如果需要播放该编码格式的视频，请开启软解；
针对火狐浏览器不支持 H.265 编码格式，内部已优先开启软解模式；
软解播放的解码操作依赖设备 CPU，播放高码率、高分辨率的视频时，对 CPU 占用率非常高。

开发者可以通过在setup方法中添加下面的代码使用软解功能：

useSoftDecoding: true, //是否使用软解，默认为fasle
liveInfoPanel: {
    showH265Info: true  //是否显示面板信息，默认为false
},

可通过监听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); })

代码示例：

    var player = cyberplayer('mp4-container').setup({
        width: 640,
        height: 360,
        autostart: true,
        stretching: 'uniform',
        repeat: false,
        volume: 100,
        controls: true,
        file: 'https://bdcloud-player.cdn.bcebos.com/testvideo/hls/265/1080p/liulangdiqiu/liulangdiqiu-265-1080.m3u8',
        useSoftDecoding: true,
        liveInfoPanel: {
            showH265Info: true
        },
        ak: 'XXX',
     });
    player.on('performance', (info) => {
        console.log(info);
    })

实现字幕功能

使用SDK，可以为视频添加字幕以及进行字幕样式的定制。

添加字幕

播放器Web SDK支持SRT格式的字幕。开发者可以通过在setup方法中添加下面的代码实现字幕功能。

tracks : [{
    //字幕文件的URL，注意：需要考虑SDK跨域访问的局限性。
    file: "中文.srt",
    //字幕的标签
    label: "Chinese",
    //true表示默认显示字幕，false则相反。注意：default要有双引号。
    "default": true
}]

定制字幕样式

播放器 SDK 提供两种定制方式：

captions选项块
HTML标签

在setup方法中添加captions选项块

开发者可以通过在setup方法中添加captions选项块实现对字幕样式的定制。代码如下：

captions: {
    //false表示背景透明，true表示背景黑色
    back: false,
    //设置字幕字体颜色
    color: 'cc0000',
    //设置字幕字体大小
    fontsize: 20
}

在字幕文件中添加基本的HTML标签

开发者可以通过在字幕文件中添加基本的HTML标签实现对字幕样式的定制。下面以SRT格式字幕为例，代码如下：

1
00:01:11,050 --> 00:01:12,300
<b>Duke</b>?

2
00:01:13,380 --> 00:01:15,290
<font color=”#3333CC”>Jack, <i>how</i> are you ? </font>

3
00:01:15,290 --> 00:01:17,370
Well, <font size=”30” color=”#FF0000”>sorry to bother you, but Sam Verdreaux called.</font>

示例代码：

    var player = cyberplayer('mp4-container').setup({
         width: 640,
        height: 360,
        autostart: true,
        stretching: 'uniform',
        repeat: false,
        volume: 100,
        controls: true,
        file: 'http://cyberplayer.bcelive.com/videoworks/mda-kbuhu4wqdi08dwix/cyberplayer/mp4/cyberplayer-demo.mp4',
        tracks: [
            {file: "//playertest.longtailvideo.com/captions/sintel-ch.srt", label: "Chinese"}, // 字幕srt配置文件
            {file: "//playertest.longtailvideo.com/captions/sintel-fa.srt", label: "Farsi"},
            {file: "//playertest.longtailvideo.com/captions/sintel-gr.srt", label: "Greek"}
        ],
        captions: {
            back: true, // false表示背景透明，true表示背景黑色
            fontSize: 18, // 字体大小
            fontFamily: 'Arial,sans-serif', // 字体样式
            fontOpacity: 100, // 字体透明度
            color: '#666', // 字体颜色
            backgroundColor: '#000', // 字幕背景颜色
            backgroundOpacity: 100 // 字幕背景透明度
        },
        ak: 'XXX'
   });

实现列表播放

播放器SDK支持中添加多个资源实现列表播放。实现了列表播放，以及列表栏显示等诸多功能。具体的参数配置如下：

playlist: [
            {
                sources: [   // 播放源信息，其参数包括file
                    {
                        file: 'XX.mp4'  // 播放源链接，例如：XXX.mp4
                    }
                ],
                title: '线路1'   //播放列表中显示的标题
            },
            {
                sources: [
                    {
                        file: 'XX.mp4'
                    }
                ],
                title: '线路2'
            }
        ]

接口及事件说明：

接口：

    cyberplayer::getPlaylist() 
        参数列表：无
        返回类型：Array
        接口功能：获取当前的播放列表。
        代码示例：
        var playlist = myPlayer. getPlaylist();
        
    cyberplayer::getPlaylistIndex() 
        参数列表：无
        返回类型：Number
        接口功能：获取当前正在播放视频在播放列表中的位置，0代表第一个，依次类推。
        代码示例：
        var playlistIndex = myPlayer. getPlaylistIndex();
        
    cyberplayer::getPlaylistItem
        参数列表：无
        返回类型：Object
        接口功能：获取当前正在播放的视频对象。
        代码示例：
        var playlistItem = myPlayer. getPlaylistItem();
        
    cyberplayer::playlistItem
        参数列表：Number
        返回类型：Object
        接口功能：播放指定的播放条目，并返回该项对象，条目从0开始计数。
        代码示例：
        var item = myPlayer.playlistItem(2);
        
    cyberplayer::playlistNext
        参数列表：无
        返回类型：Object
        接口功能：播放当前播放条目的后一项，并返回该项对象。
        代码示例：
        var item = myPlayer.playlistNext();
        
     cyberplayer::playlistPrev
        参数列表：无
        返回类型：Object
        接口功能：播放当前播放条目的前一项，并返回该项对象。
        代码示例：
        var item = myPlayer.playlistPrev()

事件:

  cyberplayer::onPlaylist
    参数列表：Function
    返回类型：无
    接口功能：设置播放器播放列表接收函数。
    代码示例：
      player.onPlaylist(function(event){ 
           console.log(event)
      });
      或使用on监听：
      player.on('playlist',(event)=>{
          console.log(event)
      })
      
 cyberplayer::onPlaylistItem
    参数列表：Function
    返回类型：无
    接口功能：设置播放器当前播放条目变化监听函数。
    代码示例：
       player.onPlaylistItem(function(event){ 
               console.log(event)
       });
       或使用on监听：
       player.on('playlistItem',(event)=>{
            console.log(event)
       })

代码示例：

    var player = cyberplayer('mp4-container').setup({
        width: 640,
        height: 360,
        autostart: true,
        stretching: 'uniform',
        repeat: false,
        volume: 100,
        controls: true,
        starttime: 0,
        playlist: [
            {
                sources: [{file: 'XXX.mp4'},
                title: '线路1'
            },
            {
                sources: [{file: 'XXX.mp4'}],
                title: '线路2'
            }
        ],
        ak: 'XXX'
        });
         // 获取播放列表信息
        const Playlist = player.getPlaylist(); //获取当前的播放列表
        const PlaylistIndex = player.getPlaylistIndex();//获取当前正在播放视频在播放列表中的位置，0代表第一个，依次类推。
        const getPlaylistItem = player.getPlaylistItem();//获取当前正在播放的视频对象
        // 设置
         var item = player.playlistItem(1);  //播放指定的播放条目，并返回该项对象，条目从0开始计数。
         var item = player.playlistNext();  //播放当前播放条目的后一项，并返回该项对象。
         var item = player.playlistPrev(); // 播放当前播放条目的后一项，并返回该项对象。
        // 事件监听
        player.on('playlist', (event) => {
            console.log(event)
        })
        player.on('playlistItem', (event) => {
            console.log(event)
        })
        player.onPlaylist(function (event) {
            console.log(event)
        });
        player.onPlaylistItem(function (event) {
            console.log(event)
        });

显示贴片广告

在视频片头、片尾和播放暂停时显示图片广告，支持gif、png、jpeg格式图片。

其中start是片头广告参数，pause是暂停广告参数，end是片尾广告参数。Image参数表示显示图片地址，url表示链接地址，time表示片头广告显示时长，单位为秒。

暂停广告图片显示时会被缩放到400x300，推荐使用宽高比为4:3的图片作为暂停广告。

imageAdvs : {
    start : {
        image : "http://xxxx/abc.gif",
        url : "http://xxxx",
        time : 10
    },
    pause : {
        image : " http://xxxx/abc.gif ",
        url : " http://xxxx"
    },
    end : {
        image : " http://xxxx/abc.gif ",
        url : " http://xxxx"
    }
}

实现跑马灯功能

代码示例如下：

marquee: {
    show: false,　　// 显示与否，默认不显示
    text:'中国善良的解放路的时间',　　// 跑马灯文字，默认‘百度智能云’
    fontSize:20,  //　字体大小
    color:' #990033'　//　字体颜色
}

设置提示点cuepoint

视频直播过程中可通过插入提示点(cuepoint)实现插入广告等功能。

初始化 cyberplayer 时，通过配置 cuepoints 参数，可以监听 RTMP 流中的 cuepoint 事件。cuepoints 是一个字符串数组，数组的每一项是一个cuepoint事件名。

注意：cuepoint事件名不能与协议已有命令重名，包括但不仅限于：

{"connect", "createStream", "closeStream", "play", "pause", "onBWDone", "onStatus", "_result", "_error", "releaseStream", "FCPublish", "FCUnpublish", "publish", "|RtmpSampleAccess", "@setDataFrame", "onMetaData"}

代码示例：

    var player = cyberplayer('mp4-container').setup({
            flashplayer : 'Player.swf',
            width: 500,
            height: 260,
            autostart: true,
            repeat: false,
            volume: 0,
            primary: 'flash',
            startparam: 'start',
            file: 'rtmp://play.bcelive.com/live/lve-abcdefghijklmn',
            cuepoints: ['ppt', 'ads']
        });
        player.on('ppt', function (data) {
            console.log('show ppt');
        });
        player.on('ads', function (data) {
            console.log('show ads');
        });

设置视频buffer控制

您可通过minBufferLength配置项设置最小缓存长度。

视频类型：HLS点播视频、FLV点播视频
限制：视频须存储在BOS并通过CDN加速

示例代码：

var player = cyberplayer('mp4-container').setup({
        width: 500,
        height: 260,
        autostart: true,
        repeat: false,
        volume: 0,
        primary: 'flash',
        startparam: 'start',
        listbar: {
            position: 'right'
        },
        minBufferLength: 30,
        file: 'http://demo/test.flv'
    });

弹幕功能

播放器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类型）：设置默认弹幕显示的时间，单位为秒

提供发送弹幕方法：

player.sendDanmu({text:'欢迎使用cyberplayer',time:10});

示例代码：

var player = cyberplayer('mp4-container').setup({
        width: 640,
        height: 360,
        autostart: true,
        stretching: 'uniform',
        repeat: false,
        volume: 100,
        controls: true,
        file:'XXX.mp4'
        danmaku: {
			show: true,
			fontSize: 24,
			speed: 1,
			area: 0.5,
			opacity: 1,
			items: {text:'XXX',time:'1'},
			active: false,//是否开启，默认为false
            useMask:false
	    },
        ak: 'XXX'
    });

播放HLS加密视频

播放器SDK支持百度智能云DRM 加密视频播放。支持播放通过百度智能云视频版权保护服务（https://cloud.baidu.com/doc/MCT/s/Skmylkuy2）进行加密的HLS视频源。其中加密方式有3种：

Open：开放密钥，系统自动生成加密密钥，密钥公开，不设访问控制。
PlayerBinding：绑定播放器，系统自动生成加密密钥，密钥设有访问控制。 PlayerBinding模式下密钥设有访问控制，安全性比较高，推荐使用PlayerBinding模式。
Token: 临时口令播放授权，系统根据userKey生成密钥加密视频；播放时按照规则生成Token并发送给密钥服务验证，校验通过才能播放，安全性比较高。

其中Open和PlayerBinding模式对于播放器不需要传参数，播放器内部实现解密播放。对于Token模式，需要给播放器传入token口令用作校验，通过后才可以播放。

示例代码：

var player = cyberplayer('mp4-container').setup({
        width: 640,
        height: 360,
        autostart: true,
        stretching: 'uniform',
        repeat: false,
        volume: 100,
        controls: true,
        file: 'XXX.m3u8',
        ak: 'XXX',
    });
    // token需要从服务器端获取
    var token = '485aa70XXXec3ac_74c18025680XXXb81d53_169XXX0273';
    player.on('beforePlay', function (e) {
        player.setToken(e.file, token);
    });

UI自定义

播放器SDK支持在setup中配置参数skin控制按钮及进度条进行背景颜色、激活或者悬浮颜色、未激活颜色的设置。配置参数controlbar控制是否显示进度条上的logo、logo跳转地址、进度条是否允许拖动功能。

开发者可以通过配置controlbar来控制控制条配置，代码如下：

controlbar: {
    barLogo: true, // 进度条上的logo显示与否,默认true
    barLogoUrl: "https://www.baidu.com/", // 进度条上的logo的跳转地址可配置
    canDrag: true, // 进度条是否允许拖动,默认true
}

开发者可以通过配置skin来控制控制条样式的显示，代码如下：

skin: {
    name: "bce", // 默认皮肤-bce，其他可选项有beelden, bekle, five, glow, roundster, seven, six, stormtrooper, vapor
    background: "#108cee", // 背景色设置
    inactive: "#FFF", // 未激活时的颜色
    active: "red", // 悬浮或激活的严责
}

示例代码：

var player = cyberplayer('mp4-container').setup({
        width: 640,
        height: 360,
        autostart: true,
        stretching: 'uniform',
        repeat: false,
        volume: 100,
        controls: true,
        file: 'XXX.m3u8',
        controlbar: {
            barLogo: true, // 进度条上的logo显示与否,默认true
            barLogoUrl: "https://www.baidu.com/", // 进度条上的logo的跳转地址可配置
            canDrag: true, // 进度条是否允许拖动,默认true
        },
        skin: {
            name: "bce", // 默认皮肤-bce，其他可选项有beelden, bekle, five, glow, roundster, seven, six, stormtrooper, vapor
            background: "#108cee", // 背景色设置
            inactive: "#FFF", // 未激活时的颜色
            active: "red", // 悬浮或激活的严责
        },
        ak: 'XXX',
    });

跨域访问的局限性

由于flash插件自身安全限制，播放器使用HTTP跨域访问时，需要目标服务器在根目录提供 crossdomain.xml 许可文件，许可文件采用utf-8编码，格式如下：

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
    <allow-access-from domain="*" />
</cross-domain-policy>

API说明

详情请参见API参考。

使用指南

接口速查

百度智能云

智能视频SDK

智能视频SDK

开发指南

更换Logo

设置播放类型

实现HEVC/H.265播放

实现字幕功能

添加字幕

定制字幕样式

实现列表播放

显示贴片广告

实现跑马灯功能

设置提示点cuepoint

设置视频buffer控制

弹幕功能

播放HLS加密视频

UI自定义

跨域访问的局限性

API说明