阿里云视频播放器SDK开发指南

更换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_阿里云对象存储_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格式字幕为例,代码如下:

100:01:11,050 --> 00:01:12,300<b>Duke</b>?200:01:13,380 --> 00:01:15,290<font color=”#3333CC”>Jack, <i>how</i> are you ? </font>300:01:15,290 --> 00:01:17,370Well, <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点播视频
  • 限制:视频须存储在阿里云对象存储并通过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>