Player-Web-SDK-Developer Guide

Last Updated：2020-09-21

Change Logo

By setting Logo url in header, you can change the default Baidu Logo to a personalized Logo of an individual/organization. The size of the Logo image is suggested to be: 15*15 pixel.

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

The following is the complete code of a simple Web player with customized Logo:

<!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>Simple html example</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>

Set Playback Type

Set the play type through type parameter of the player SDK support. By default, the player SDK judges the video type according to the video file suffix name to play based on the video file type; after setting type parameters, the player SDK forcedly play the video according to the setting types.

Syntax:

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

The following code example means to play the AV files in "http://domain/path/file" with mp4 format:

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

Realize Subtitle Feature

With SDK, you can add subtitles to videos and customize subtitle styles.

Add subtitles

Player Web SDK supports two types of subtitle formats of SRT and WebVTT. The developer can add the following code in setup method to realize subtitle feature.

tracks : [{ 
    //The URL of the subtitle files, please notice: You have to consider the limitations of SDK cross-domain access. 
    file: "Chinese.srt", 
    //Subtitle tags 
    label: "Chinese", 
    //true means displaying subtitle by default, and false is opposite. Note Double quotation marks should be added to default. 
    "default": true 
}]

Customize the subtitle styles

Player SDK provides two customization methods:

captions option blocks
HTML tag

Add captions option block in setup method

The developer can add captions option block in setup method to realize subtitle style customization. The codes are as follows:

captions: { 
    //false means the background is transparent and true means the background is black 
    back: false, 
    //Set the subtitle font color 
    color: 'cc0000', 
    //Set subtitle font size 
    fontsize: 20 
}

Add basic HTML tag in the subtitle files

The developer can add the basic HTML tags in the subtitle file to realize customized subtitle styles. Take SRT format subtitle for instance, the code is as follows:

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>

Fulfill List Playback

The developer can use SDK to add multiple resource in a player to realize list play. The following codes realize the features of list play, multi-rate play, multinational subtitles and list bar display. The specific configuration is as follows:

playlist: [{ 
    //Represent the poster photo for playing the item 
    image: "ABC.jpg", 
    //The description of playing item is displayed on the top left corner. 
    description: ”This is ABC”, 
    //Play item media resource address, which supports the play of the same video of different code rates, but the video type should be the same 
    sources: [{ 
        file: "ABC.m3u8", 
        label: ”360 p”, 
        width: 640 
        file: "ABC_720.m3u8", 
        label: ”720 p”, 
        width: 1280 
    }], 
    //Title of the played item, which is displayed on the left top of the player when the play button first appears 
    title: "M3U8", 
    //Subtitle configuration responding to the play items, including Chinese and English subtitle. The developer can add the subtitles of any amount as required. 
    tracks: [{ 
        file: "M3U8Chinese.srt", 
        label: "Chinese", 
        kind: "captions", 
        "default": true 
    }, { 
        file: "FLVEnglish.srt", 
        label: "English", 
        kind: "captions", 
        "default": false 
    }, { 
        file: 'chapters.vtt', //Video dotted configuration file 
        kind: 'chapters', 
    }, { 
        file: " thumbs.vtt", //Video thumbnail configuration file 
        kind: "thumbnails" 
    }] 
}, { 
    //Configurations of another playing item 
    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 
    }] 
}]

Also, the attribute of type is the selectable attribute, specifying the media format of the resource. Used only when the file attribute does not contain an identifiable extension.

Display the Pre-movie Advertisements

Display the image ads at the beginning, end and pause of the video, with the image in the format of gif, png and jpeg supported.

Among it, start is the start advertisement parameter, pause is the pause advertisement parameter, and end is the end advertisement parameter. Image parameter means to display the image address, url means link address and time means the opening advertisement display duration, with the unit of second.

When displaying the pausing advertisement image, it is zoomed to be 400x300, you are suggested to use the image with the width and height proportion of 4:3 as the pausing advertisement.

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" 
    } 
}

Realize MP4 and FLV False Traffic

Flash player supports MP4 and FLV false traffic, which realizes the dragging play for the online videos.

The specific method is to set the startParam parameter as “start” to activate false traffic feature when the player is setup:

startParam : "start",

When enabling false traffic feature, the player adds start parameter after playing video url, meaning to transmit data from a certain byte of the video file.

The player uses false traffic and the server is also required to support MP4 and FLV false traffic feature. You are suggested to use Baidu CDN for video distribution, and it supports MP4 and LV pseudo-streaming.

Realize Marquee Feature

The code example is as follows:

marquee: { 
    show: false,  // Whether to display, it defaults not to display 
    text:'Time in Jiefang Road, Shaanxi, China',  // Marquee characters, which are ‘Baidu AI Cloud’ by default 
    fontSize:20,  // 　Font size 
    color:' #990033' // 　Font color 
}

Set Reconnection and Backup Mechanism Processing Live Exception

A variety of exceptions may occur during the LVB, and the availability can be enhanced by the following parameters:

reconnecttime(the unit is second): Set the reconnection time. In case of no LVB push, the player will make uninterrupted retry according to the set interval. For example, when the live broadcast has not been started yet, the user has opened the player; at this point, the proper reconnection time can be configured for buffering.
fallbackfile： Set backup resources. When the web player detects that the main resource format is not supported, it automatically switches to the standby resource.

Code example:

    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    //The HLS configuration method is the same as RTMP 
            }, 
            file: 'rtmp: //play.bcelive.com/live/lve-abcdefghijklmn', 
            fallbackfile: 'http: //xxxx/demo_ahls.m3u8' 
        });

Set the Cuepoint

During the live streaming, insert cuepoint to realize the feature of advertisement insertion.

When initializing cyberplayer, you can monitor cuepoint events in the RTMP stream by configuring the cuepoints parameter. cuepoints is a character string array, and every item of the array is a cuepoint event name.

Note: cuepoint event name should not be a duplicate of the existing command name, which includes but not limited to:

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

Code example:

    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'); 
        });

Set the Video Buffer Control

You can set the minimum cache length through the configuration item of minBufferLength.

Video type: HLS on-demand video, FLV on-demand video
Limit: The video shall be stored in BOS and accelerated through CDN

Sample code:

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' 
    });

Limitation of Cross-domain Access

Due to the limitation on the safety of flash plug-in itself, when the player uses HTTP for cross-domain access, the target server is required to be provided in root directory crossdomain.xml permission file, which adopts utf-8 coding with the following format:

<?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 Description

Please refer to API Reference for details.

Deploy Player -Web-SDK-Play Audio and Video

FAQs Concerning Player

百度智能云

Multimedia Cloud Processing