开发指南

更新时间：2022-04-22

更换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播放

引入文件

<!-- HEVC/H265 播放引入 missile.js ; wasm文件需要和missile.js同目录 -->
<script type="text/javascript" src="./cyberplayer-4.1.6.1/missile.js"></script>
<script type="text/javascript" src="./cyberplayer-4.1.6.1/cyberplayer.js"></script>

初始化播放器对象

<script type="text/javascript">
var player = cyberplayer("playercontainer").setup({
    hevc: true, // HEVC播放内核为 true
    width : 580,
    height : 433,
    backcolor : "#FFFFFF",
    stretching : "uniform",
    file : "<play url>",
    ak : "<AK>",
    autoStart : false,
    repeat : false,
    volume : 100,
    controls : "over"
});
</script>

实现字幕功能

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

添加字幕

播放器Web SDK支持SRT和WebVTT两种格式的字幕。开发者可以通过在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>

实现列表播放

开发者可以使用SDK在一个播放器中添加多个资源实现列表播放。下面的代码实现了列表播放，多码率播放，多国字幕，以及列表栏显示等诸多功能。具体的配置如下：

playlist: [{
    //代表播放条目的海报图片。
    image: "ABC.jpg",
    //对播放条目的描述，在播放器左上角显示。
    description: ”This is ABC”,
    //播放条目媒体资源的地址, 支持统一视频不同码率的播放，但视频类型必须一致
    sources: [{
        file: "ABC.m3u8",
        label: ”360 p”,
        width: 640
     }, {   
        file: "ABC_720.m3u8",
        label: ”720 p”,
        width: 1280
    }],
    //播放条目的标题，首次出现播放按钮的时候在播放器左上角显示
    title: "M3U8",
    //播放条目对应的字幕配置,这里包络中英文字幕。开发者可以根据需要添加任意数量的字幕。
    tracks: [{
        file: "M3U8Chinese.srt",
        label: "Chinese",
        kind: "captions",
        "default": true
    }, {
        file: "FLVEnglish.srt",
        label: "English",
        kind: "captions",
        "default": false
    }, {
        file: 'chapters.vtt', // 视频打点配置文件
        kind: 'chapters',
    }, {
        file: " thumbs.vtt", // 视频缩略图配置文件
        kind: "thumbnails"
    }]
}, {
    //另一个播放条目的配置
    image: "images/DEF.jpg",
    description: ”This is DEF”,
    sources: [{
        file: "DEF.flv"
    }],
    title: "FLV",
    tracks: [{
        file: "M3U8Chinese.srt",
        label: "Chinese",
        kind: "captions",
        "default": false
    }, {
        file: "FLVEnglish.srt",
        label: "English",
        kind: "captions",
        "default": true
    }]
}]

另外，type属性为可选属性，指定资源的媒体格式。仅仅用在文件属性中不包含可识别的扩展名的时候使用。

显示贴片广告

在视频片头、片尾和播放暂停时显示图片广告，支持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"
    }
}

实现MP4和FLV伪流

Flash player支持MP4和FLV伪流，实现对网络视频的拖动播放。

具体的用法是在播放器setup时，将startParam参数设置为“start”启用伪流功能：

startParam : "start",

启用伪流功能时，播放器会在播放视频url后面添加start参数，表示从视频文件的某个字节处开始传输数据。

播放器使用伪流功能，要求服务器端也支持MP4和FLV伪流功能。建议使用百度CDN进行视频分发，支持MP4和FLV伪流。

实现跑马灯功能

代码示例如下：

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

设置重连与备用机制处理直播异常

直播过程中可能出现各种异常，可通过下述参数增强可用性：

reconnecttime（单位为秒）：设置重连时间。无直播推流时，播放器按照设置时间间隔不间断进行重试。例如，暂未开始直播时，用户已打开播放器，这时可配置合理的重连时间进行缓冲。
fallbackfile：设置备用资源。当web播放器检测到主资源的格式不支持时，会自动切换到备用资源上。

代码示例：

    var player = cyberplayer('mp4-container').setup({
            flashplayer: 'Player.swf',
            width: 500,
            height: 260,
            autostart: true,
            repeat: false,
            volume: 0,
            primary: 'flash',
            startparam: 'start',
            rtmp: {
                reconnecttime: 5
            },
			hls: {
                reconnecttime: 5    //HLS的配置方式与RTMP相同
            },
            file: 'rtmp: //play.bcelive.com/live/lve-abcdefghijklmn',
            fallbackfile: 'http: //xxxx/demo_ahls.m3u8'
        });

设置提示点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'
    });

跨域访问的局限性

由于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参考。

使用指南

接口速查

百度智能云

音视频处理 MCP