音视频终端SDK：扩展组件

内置组件

记忆播放

自动记忆用户上一次播放的视频位置，记忆播放组件分两种，一种点击播放（会提示用户上次播放的位置，用户可以点击seek），另一种是自动播放（自动seek到上次播放位置）。更多信息请参见记忆播放组件。

播放器动态水印（ID跑马灯）

根据终端用户特性，将ID等信息以文字水印的形式展示在视频画面上，震慑侵权行为。用户可以自定义文字水印出现的位置，文字颜色和字体大小。更多信息，请参见跑马灯组件。

开始广告（图片）

视频即将开始播放时显示的图片广告。更多信息，请参见开始广告组件。

暂停广告（图片）

暂停视频时在播放器的中间显示图片广告。更多信息，请参见暂停广告组件。

多视频广告

在视频即将播放时，实现多视频广告。更多信息，请参见多视频广告组件。

播放下一个

在Web播放器SDK的控制条上添加播放下一个视频按钮，按钮的点击事件用户可以自定义并作为组件参数传入。更多信息，请参见播放下一个组件。

播放列表

在Web播放器SDK控制条上增加视频列表，视频切换的按钮，并在播放器上显示视频列表。更多信息，请参见播放列表组件。

旋转和镜像

在Web播放器SDK控制条上添加旋转和镜像按钮，用于视频旋转和镜像变换。更多信息，请参见旋转和镜像组件。

视频广告

在视频即将播放时，限时的视频广告。更多信息，请参见视频广告组件。

弹幕

在控制条上增加了弹幕关闭和开启按钮，以及发送弹幕的输入框，和发送弹幕的按钮。更多信息，请参见弹幕组件。

试看

用于用户试看，试看结束后提示用户，观看完整版的条件。更多信息，请参见试看组件。

进度条标记

对视频的关键点进行打点，鼠标移动到关键点时能够查看当前用户设置的图片等标注信息。更多信息，请参见进度打点组件。

字幕

用于快速切换不同语言的字幕。更多信息，请参见字幕组件。

音轨

用于切换不同版本的音轨。更多信息，请参见音轨组件。

引入组件

1. 引入Web播放器SDK组件。

   <script type="text/javascript"charset="utf-8"src="/aliplayercomponents-1.0.9.min.js"></script>

   说明

   目前没有CDN资源，请将播放器组件下载到本地后引入。下载地址请参见播放器组件下载。

2. Web播放器SDK挂载组件。

   说明

   本文仅提供示例代码，不同组件细节不同，需要具体配置。

   var player = new Aliplayer({
    id: "player-con",
    source: "//player.alicdn.com/video/editor.mp4",
    components: [{
    name: 'xxxComponent',
    type: AliPlayerComponent.xxxComponent
    }]
    }, function (player) {
    });

组件使用

当只需要单独的某个组件时，只需要引用对应组件的JS文件，如果引用的是Web播放器SDK组件库文件，则通过AliPlayerComponent.XXX引用具体的组件。

打包组件

"build_customize": set NODE_ENV=production&&webpack --config webpack.config.customize.js --progress

• 打包全部组件

  下面的两个指令中的任意一个都可以打包全部Web播放器SDK组件，打包之后的文件是/disk/aliplayer-components/aliplayercomponents.min.js。

  $ npm run build
  # 或者
  $ npm run build all

• 打包自定义组件

  为了减少体积，用户可以自己选择需要打包的组件，只要执行以下命令：

  $ npm run build componentsName # componentsName 是组件名称

  说明

  componentsName 是组件的名称，多个组件名称以空格隔开，例如$ npm run build AliplayerDanmu BulletScreen # 打包弹幕组件和跑马灯组件，componentsName 可选的值有：

  • AliplayerDanmu：弹幕组件

  • BulletScreen：跑马灯组件

  • MemoryPlay：记忆播放组件

  • PauseAD：暂停广告（图片）组件

  • PlayerNext：播放下一个视频组件

  • Playlist：播放列表组件

  • Preview：试看组件

  • RotateMirror：旋转镜像组件

  • StartAD：开始广告（图片）组件

  • Staticad：静态广告（图片）组件

  • VideoAD：视频广告组件

  • Caption：字幕组件

  • Track：音轨组件

  • ManyVideoAD：多视频广告组件

  • RateComponent：倍速组件

  打包之后的文件是/disk/aliplayer-components/aliplayercomponents.min.js，引用到用户的页面中即可。

引用具体的组件

• 在HTML文件中引用具体的JS文件

  <script type="text/javascript" src="js/staticAdComponent.min.js"></script>
   

• 给Web播放器SDK注入组件

  var option = {
   id: "J_prismPlayer",
   autoplay: true,
   isLive:false,
   playsinline:true,
   width:"100%",
   height:"100%",
   useH5Prism:true, //启用H5播放器
   useFlashPrism:false,
   source:source,
   vid:vid,
   playauth:playauth,
   cover:"",
   components:[{type:StaticAdComponent,args:['http://cdnoss.example.com/cover****.png',
   'http://player.alicdn.com']}]
  };
  
  var player = new Aliplayer(option);
   

引入Web播放器SDK组件库

• 在HTML文件中引用具体的JS文件

  <script type="text/javascript" src="js/aliplayerComponents.min.js"></script>

• 给Web播放器SDK注入组件

  名称	说明
  name	组件名称，可以通过名称得到组件
  type	组件类型
  args	组件的参数

  var option = {
   id: "J_prismPlayer",
   autoplay: true,
   isLive:false,
   playsinline:true,
   width:"100%",
   height:"100%",
   useH5Prism:true, //启用H5播放模式
   useFlashPrism:false,
   source:source,
   vid:vid,
   playauth:playauth,
   cover:"",
   components:[{type:AliPlayerComponent.StaticAdComponent,args:['http://cdnoss.youkouyang.com/cover.png',
   'http://player.alicdn.com']},
   notParameComponent,
   {name:'adComponent1',type:notParameComponent}
   ]
  };
  
  var player = new Aliplayer(option);
   

获取组件

提供getComponent方法获取实例组件，参数为组件的名字。

var component = player.getComponent('adComponent');

安装依赖项

$ cd customComponents
$ npm install