Components of ApsaraVideo Player SDK for Web and how to customize components - ApsaraVideo VOD

This topic describes how to use components of ApsaraVideo Player SDK for Web.

Built-in components

Note

The source code of components is provided on GitHub. You can develop and build components based on the source code. For more information, see Project description.
For more information about how to use the components, see the Functions tab.
Specific features of ApsaraVideo Player SDK for Web cannot be used in built-in browsers on mobile devices.
Components of ApsaraVideo Player SDK for Web are stored on GitHub for users to download. GitHub is a third party website. Connection failures or latency may occur when you access GitHub.

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.

Note

The localStorage property is used to record the playback position in the resume playback component. The component cannot be used in browsers that do not support localStorage.

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

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

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

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

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 Danmu 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.

Add components

Add the components to ApsaraVideo Player SDK for web.
```
<script type="text/javascript"charset="utf-8"src="/aliplayercomponents-1.0.9.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.

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) {
 });