集成Aliplayer_Web播放器的自定义组件

步骤一：打包Aliplayer_Web播放器组件

Alipplay_Web播放器已实现记忆播放、播放列表、视频广告、弹幕、字幕组件和多视频广告等，您可以直接打包全部组件或者按需打包对应功能的组件。

• 打包全部组件：

  执行以下任意一个命令都可以打包全部播放器组件。

  $ npm run build

  $ npm run build all

• 自定义打包组件：
  • 打包单个组件。

    $ npm run build componentsName  # 单个组件 例如：弹幕组件AliplayerDanmu

  • 打包多个组件，多个组件名称以空格隔开。

    $ npm run build VideoAD ManyVideoAD # 打包视频广告组件和多视频广告组件

  componentsName的可选的值有：

  组件名称	描述
  StartAD	开始广告组件
  PauseAD	暂停广告组件
  VideoAD	视频广告组件 说明 移动端使用，视频可能会被浏览器劫持播放。
  Staticad	静态广告组件
  ManyVideoAD	多视频广告组件
  AliplayerDanmu	弹幕组件
  BulletScreen	跑马灯组件
  MemoryPlay	记忆播放组件
  PlayerNext	播放下一个视频组件
  Playlist	播放列表组件
  Preview	试看组件
  RotateMirror	旋转镜像组件
  Caption	字幕组件
  Track	音轨组件

步骤二：引用具体的组件

1. 在您的项目中引入具体的JS文件。

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

2. 给播放器注入组件。

   var videoAdClose = function (videoAd) {
     /* 暂停视频广告 */
     videoAd.pauseVideoAd()
     var result = confirm('确定开通会员关闭广告吗？')
     if (result) {
       /* 关闭视频广告 */
       videoAd.closeVideoAd()
     } else {
       /* 播放视频广告 */
       videoAd.playVideoAd()
     }
   }
   var player = new Aliplayer({
     id: "player-con",
     source: "//player.alicdn.com/video/editor.mp4",
     width: "100%",
     height: "500px",
     autoplay: true,
     isLive: false,
     components: [{
       /*以视频广告组件为例：*/
       name: 'VideoADComponent',
       type: AliPlayerComponent.VideoADComponent,
       /*
        * adVideoSource：String类型，广告视频的视频地址。
        * adLink：String 类型，广告视频的链接地址。
        * adCloseFunction：函数类型，关闭广告的点击事件处理函数，可选参数，不传则默认关闭广告视频。
        * closeText：String类型，关闭广告的文字内容，可选参数，不传则默认为“关闭广告”。
        */
       args: ['https://player.alicdn.com/ad/citybrain.mp4', 'https://et.aliyun.com/brain/city', videoAdClose, 'VIP关闭广告']
     }]
   }, function (player) {
     console.log("The player is created");
   });