音视频处理MCT

    播放器-Web-SDK-开发指南

    通过在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",

    实现字幕功能

    使用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参考

    上一篇
    部署播放器-Web-SDK-并播放音视频
    下一篇
    播放器常见问题