Skip to content

Latest commit

 

History

History
 
 

customComponents

README.md

Custom-component demo of HTML5-based ApsaraVideo Player

Other Languages: 简体中文

This demo illustrates the custom components of HTML5-based ApsaraVideo Player and can be used as a reference to implement custom components. In this demo, you can find some common custom components, including third-party components.

Introduction

Examples

  • ES6 example

  • ApsaraVideo Player component example

Component list

Demo

Components of this demo

Others

Usage

If you need to use only a single component, reference the JS file of the component. To use a component in the ApsaraVideo Player component library, you can reference the AliPlayerComponent.XXX.js file.

Package components

In Windows, set the environment variable NODE_ENV to a value different from that in macOS and Linux. Modify the build_customize command in package.json as follows:

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

Package all components

You can run either of the following commands to package all components. The packaged file is /disk/aliplayer-components/aliplayercomponents.min.js.

$ npm run build 
# Or
$ npm run build all

Package components as required

To reduce the size of the packaged file, you can package only required components. To do so, run the following command:

$ npm run build componentsName # componentsName indicates the component name.

componentsName indicates the component name. Separate multiple component names with spaces. Example:

$ npm run build AliplayerDanmu BulletScreen # Package the danmu and scrolling text components only.

You can set componentsName to any of the following values:

  • AliplayerDanmu: the damu component.
  • BulletScreen: the scrolling text component.
  • MemoryPlay: the last position component.
  • PauseAD: the pause ad component.
  • PlayerNext: the play next component.
  • Playlist: the playlist component.
  • Preview: the preview component.
  • RotateMirror: the rotation and mirroring component.
  • StartAD: the start ad component.
  • Staticad: the static ad component:
  • VideoAD: the video ad component.

The packaged file is /disk/aliplayer-components/aliplayercomponents.min.js file, which can be referenced in your page.

Reference a specific component

  • Reference the specific JS file in your HTML file.
<script type="text/javascript" src="js/staticAdComponent.min.js"></script>
  • Inject a component to the player
var option = {
     id: "J_prismPlayer",
     autoplay: true,
     isLive:false,
     playsinline:true,
     width:"100%",
     height:"100%",
     useH5Prism:true, // Enable the HTML5 player.
     useFlashPrism:false,
     source:source,
     vid:vid,
     playauth:playauth,
     cover:"",
     components:[{type:StaticAdComponent,args:['http://cdnoss.youkouyang.com/cover.png',
     'http://player.alicdn.com']}]                 
};

var player = new Aliplayer(option);

Reference the ApsaraVideo Player component library

  • Reference the specific JS file in your HTML file.
<script type="text/javascript" src="js/aliplayerComponents.min.js"></script>
  • Inject a component to the player

The following table lists the parameters for injecting a component.

Parameter Description
name The component name. You can obtain a component by its name.
type The component type.
args The component parameters. 
var option = {
     id: "J_prismPlayer",
     autoplay: true,
     isLive:false,
     playsinline:true,
     width:"100%",
     height:"100%",
     useH5Prism:true, // Enable the HTML5 player.
     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);
Parameter Description
name The component name. You can obtain a component by its name.
type The component type.
args The component parameters. 
var player = new Aliplayer({
    id: "J_prismPlayer",
     autoplay: true,
     isLive:false,
     playsinline:true,
     controlBarVisibility:"click",
     cover:"",
     components:[
     {name:'adComponent',type:StaticAdComponent,args:['http://cdnoss.youkouyang.com/cover.png']},
     notParameComponent,
     {name:'adComponent1',type:notParameComponent}
     ]                 
    });

Obtain a component

You can use the getComponent method to obtain the instance of a component. The parameter is the component name.

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

Install dependencies

This demo uses technologies such as ES6, webpack, and gulp.

$ cd customComponents
$ npm install

Compile the code

Compile compressed components

$ cd customComponents
$ npm run prod

Compile uncompressed components

$ cd customComponents
$ npm run dev