This topic describes the frequently used components of the HTML5 player provided by ApsaraVideo Player SDK for web. This topic also describes how to reference the components as needed.

Built-in components

Note For more information about the demonstration of the features, visit the Functions page of the Aliplayer website.
Last played position component

The last played position component allows you to resume the playback from the last played position of a video. This component can notify you of the last played position so that you can seek to this position. Alternatively, this component can automatically seek to the last played position and start the playback from this position. For more information, see Last played position component.

Marquee component

The marquee component is used to display scrolling text. You can set the text position, color, and font size. For more information, see Marquee component.

Start ad component

The start ad component is used to display an image ad before a video is played. For more information, see Start ad component.

Pause ad component

The pause ad component is used to display an image ad when a video is paused. For more information, see Pause ad component.

Video ad sequence component

The video ad sequence component plays a series of video ads before a video is played. For more information, see Video ad sequence component.

Play next component

The play next component adds the Play Next button to the control bar of the player. You can customize the click event for the button and pass the click event as a component parameter. For more information, see Play next component.

Playlist component

The playlist component adds the button for displaying the playlist and buttons for switching among videos to the control bar of the player and displays a playlist in the player. For more information, see Playlist component.

Rotation and mirroring component

The rotation and mirroring component adds the buttons for rotating and mirroring a video to the control bar of the player. For more information, see Rotation and mirroring component.

Video ad component
Note On a mobile device, internal browsers may modify the settings of ApsaraVideo Player SDK for web without your authorization or knowledge. In this case, specific features of ApsaraVideo Player SDK for web cannot be used.

The video ad component plays a video ad before a video is played. For more information, see Video ad component.

Live comment component
Note The live comment component is integrated with the CommentCoreLibrary library. For more information about the CommentCoreLibrary library, see CommentCoreLibrary.

The live comment component adds a text input box and the buttons for enabling, disabling, and sending live comments to the control bar of the player. For more information, see Live comment component.

Preview component

The preview component allows you to preview a video for a period of time. After the preview ends, this component notifies you of the conditions that need to be met to watch the full video. For more information, see Preview component.

Progress marker component

The progress marker component marks the key points of a video. When you move the pointer over a marked key point, the specified image is displayed. For more information, see Progress marker component.

Subtitle component

The subtitle component allows you to switch subtitles in different languages. For more information, see Subtitle component.

Audio track component

The audio track component is used to switch audio tracks. For more information, see Audio track component.

Reference the components

  1. Reference the components in ApsaraVideo Player SDK for web.
    <scripttype="text/javascript"charset="utf-8"src="/aliplayercomponents-1.0.8.min.js"></script>
    Note No Alibaba Cloud Content Delivery Network (CDN) resources are available. Therefore, you can reference the .js files of the components only from your on-premises device rather than by using CDN. To download the aliplayercomponents-1.0.8.min.js file, visit the AliyunPlayer_Web page.
  2. Mount the components.
    Note The following sample code is only for your reference. Configurations vary based on different types of components.
    var player = new Aliplayer({
            id: "player-con",
            source: "//player.alicdn.com/video/editor.mp4",
            components: [{
                name: 'xxxComponent',
                type: AliPlayerComponent.xxxComponent
            }]
         }, function (player) {
     });

Manage components

If you need to use only a single component, reference the .js file of this 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 NODE_ENV environment variable to a value different from that in macOS and Linux. Modify the build_customize command in the package.json file by using the following content:
"build_customize": set NODE_ENV=production&&webpack --config webpack.config.customize.js --progress
  • Package all components
    You can run one 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 needed
    To reduce the size of the packaged file, you can package only the components that you want to use. To do so, run the following command:
    $ npm run build componentsName # componentsName indicates the component name.
    Note componentsName indicates the component name. Separate multiple component names with spaces. For example, to package the live comment component and marquee component, run the $ npm run build AliplayerDanmu BulletScreen command. Valid values of the componentsName parameter:
    • AliplayerDanmu: the live comment component.
    • BulletScreen: the marquee component.
    • MemoryPlay: the last played 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.
    • Caption: the subtitle component.
    • Track: the audio track component.
    • ManyVideoAD: the video ad sequence component.

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

Reference a specific component
  • Reference a specific .js file in your HTML file.
    
    <script type="text/javascript" src="js/staticAdComponent.min.js"></script>
                        
  • Add the component to the configurations of 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.example.com/cover****.png',
         'http://player.alicdn.com']}]
    };
    
    var player = new Aliplayer(option);
                        
Reference the ApsaraVideo Player component library
  • Reference a specific .js file in your HTML file.
    <script type="text/javascript" src="js/aliplayerComponents.min.js"></script>
  • Add the component to the configurations of the player.
    Attribute Description
    name The name of the component. The player obtains the component by the component name.
    type The type of the component.
    args The parameters of the component.
    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);
                        
Obtain a component

You can call the getComponent method and set the name parameter to obtain a component.

var component = player.getComponent('adComponent');
Install dependencies
ECMAScript 6, webpack, and gulp are used in the demo of this topic. You can go to the download pages by clicking the following links:
$ cd customComponents
$ npm install