全部产品
Search
文档中心

视频点播:插件组件

更新时间:Jul 31, 2023

本文介绍H5模式的Web播放器SDK的常用组件,以及自定义组件的实现。

内置组件

说明
  • 组件功能演示请参见功能演示

  • 移动端浏览器可能劫持Web播放器SDK播放视频的行为,导致部分功能不可用。

  • Web播放器SDK的常用组件存放在GitHub上供用户下载,GitHub属于第三方搭建的网站。访问该网站时,可能存在部分用户无法打开网站或访问延迟的问题。

记忆播放

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

说明

记忆播放组件使用localStorage记录播放位置,不支持localStorage的浏览器将不生效。

播放器动态水印(ID跑马灯)

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

开始广告(图片)

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

暂停广告(图片)

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

多视频广告

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

播放下一个

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

播放列表

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

旋转和镜像

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

视频广告

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

弹幕

说明

本组件集成了CommentCoreLibrary弹幕库,更多信息请参见CommentCoreLibrary文档

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

试看

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

进度条标记

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

字幕

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

音轨

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

引入组件

  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引用具体的组件。

打包组件

如果是Windows环境,NODE_ENV环境变量的设置和在macOS和Linux下的设置不同,要将package.json下的build_customize命令更改为:

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

安装依赖项

本Demo使用了ES6、webpack、gulp等技术。

$ cd customComponents
$ npm install