This topic describes the frequently used components of the HTML5 player provided by ApsaraVideo Player SDK for Web and how to add specific components as needed.

Built-in components

Note For more information about how to use the components, see the Functions tab.
Resume playback component

This component allows you to resume playback from the previous playback position. If you select Remember Played Position (Manual), you are notified of the previous playback position. You can click on the progress bar to seek to the playback position. If you select Remember Played Position (Auto Play), the video is automatically played from the previous playback position. For more information, see Resume playback component.

Animated watermark (Marquee component)

This component is used to add a text watermark that contains user information such as the user ID to videos. This helps reduce copyright infringements. You can specify the watermark location and the color and size of the text. For more information, see Marquee component.

Start ad component

This component is used to display an image ad before video playback starts. For more information, see Start ad component.

Pause ad component

This component is used to display an image ad when video playback is paused. For more information, see Pause ad component.

Video ad sequence component

This component is used to play multiple video ads before video playback starts. For more information, see Video ad sequence component.

Play next component

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

Playlist component

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

Rotation and mirroring component

This 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 Specific features of ApsaraVideo Player SDK for Web cannot be used in built-in browsers on mobile devices.

The video ad component plays a video ad before video playback starts. For more information, see Video ad component.

Live comment component
Note This component is integrated with the CommentCoreLibrary library. For more information, 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 Danmu component.

Preview component

This 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 play the entire video. For more information, see Preview component.

Progress marker component

This 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

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

Audio track component

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

Add components

  1. Add the components to ApsaraVideo Player SDK for Web.
    <scripttype="text/javascript"charset="utf-8"src="/aliplayercomponents-1.0.8.min.js"></script>
    Note Alibaba Cloud CDN resources are not included in ApsaraVideo Player SDK for Web. If you want to use CDN resources, add them after you download them to your local PC. To download the JS files, visit the AliyunPlayer_Web page.
  2. Mount the components to ApsaraVideo Player SDK for Web.
    Note The following sample code provides an example. Configurations vary for different 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 one component, add the reference to the JS file in your project. To use a component in the ApsaraVideo Player component library, call AliPlayerComponent.XXX to add the component to your player.

Package components

The value of the NODE_ENV environment variable in Windows is different from that in macOS and Linux. In Windows, modify the build_customize command in the package.json to 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 for ApsaraVideo Player SDK for Web. The component package is stored in /disk/aliplayer-components/aliplayercomponents.min.js.
    $ npm run build
    # or
    $ npm run build all
  • Package specific components
    To reduce the size of the component package, run the following command to add only the components that you need to the package:
    $ 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 for componentsName:
    • AliplayerDanmu: the live comment component.
    • BulletScreen: the marquee component.
    • MemoryPlay: the resume playback 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 pause ad component.
    • VideoAD: the video ad component.
    • Caption: the subtitle component.
    • Track: the audio track component.
    • ManyVideoAD: the video ad sequence component.

    The component package aliplayercomponents.min.js is stored in /disk/aliplayer-components. Add the reference to the file to your project to use the components.

Add a specific component
  • Add the reference to the JS file in your HTML file.
    
    <script type="text/javascript" src="js/staticAdComponent.min.js"></script>
                        
  • Add the 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.example.com/cover****.png',
         'http://player.alicdn.com']}]
    };
    
    var player = new Aliplayer(option);
                        
Add the ApsaraVideo Player component library
  • Add the reference to the JS file in your HTML file.
    <script type="text/javascript" src="js/aliplayerComponents.min.js"></script>
  • Add the component to the player. The following table describes the parameters used in the configuration.
    Parameter 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

Call the getComponent method and set the name parameter to obtain a component.

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