所有文档

          音视频处理 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-并播放音视频
          下一篇
          播放器常见问题