Official components

Alibaba Cloud provides common components for typical use cases. You can use these components directly or customize them as needed.

Background

The source code of components is available on GitHub.
For more information about how to use the components, see the Functions tab.
Some features of Web SDK cannot be used in built-in browsers on mobile devices.
GitHub is a third-party website. Connection failures or increased latency may occur when you access it.

Component name	Type	Description	Effect
Bullet comment	`AliplayerDanmuComponent`	The bullet 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.
Animated watermark (Marquee component)	`BulletScreenComponent`	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, text color, and font size. For more information, see Marquee component.
Subtitle	`CaptionComponent`	The subtitle component allows you to switch subtitles in different languages. For more information, see Subtitle component.
Video ad pod	`ManyVideoADComponent`	This component is used to display a sequence of video ads before the main video content begins to play. For more information, see Video ad pod component.
Resume playback	`MemoryPlayComponent`	This component automatically saves the user's last playback position in a video. It offers two modes of operation: Click-to-Play: When the user presses play, they are prompted with their last viewed position and can choose to seek to it. Auto-play: When playback begins, the video automatically seeks to the last saved position. For more information, see Resume playback component. Note This component uses localStorage to save the playback position. It will not function in browsers that do not support localStorage.
Pause ad (image)	`PauseADComponent`	This component displays an image ad as an overlay in the center of the player when the video is paused. For more information, see Pause ad component.
Video playlist	`PlaylistComponent`	This component adds a playlist button to the player's control bar and displays a list of videos within the player, allowing users to switch between them. For more information, see Video playlist component.
Preview	`PreviewVodComponent`	This component allows users to watch a limited-time preview of a video. After the preview period ends, it prompts the user with the conditions required to watch the full version (e.g., subscribing or purchasing). For more information, see Preview component.
Progress marker	`ProgressComponent`	The progress marker component allows you to add markers for key points on the video's progress bar. When a user hovers over a marker, a thumbnail image for that point is displayed. For more information, see Progress marker component.
Definition	`QualityComponent`	The definition component is used to quickly switch video definitions. For more information, see Definition component.
Playback speed	`RateComponent`	This component is used to adjust the playback speed of videos. For more information, see Playback speed component
Rotation and mirroring	`RotateMirrorComponent`	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.
Start ad (image)	`StartADComponent`	The start ad component is used to display an image ad before a video is played. For more information, see Start ad component.
Audio track switching	`TrackComponent`	The audio track component is used to switch audio tracks in different languages. For more information, see Audio track switching component.	-
Video ad	`VideoADComponent`	The video ad component displays a time-limited video ad before the main video content begins to play. For more information, see Video ad component.
Play next	PlayerNextComponent	This component adds a Play Next button to the control bar of the player. The click event for this button can be custom-defined and passed in as a parameter to the component. For more information, see Play next component.

Use components

Add the components to Web Player SDK. A CDN URL is not currently available for the components. Download the components package locally and include it in your project. We recommend using the latest version.
```
<script type="text/javascript" src="your-public-path/aliplayercomponents-1.0.9.min.js"></script>
```

Mount the components to Web Player SDK.

var player = new Aliplayer(
  {
    id: "player-con",
    source: "//player.alicdn.com/video/editor.mp4",
    components: [
      {
        name: "StartADComponent",
        type: AliPlayerComponent.StartADComponent,
        args: [
          "https://img.alicdn.com/tfs/TB1byi8afDH8KJjy1XcXXcpdXXa-1920-514.jpg",
          "https://promotion.aliyun.com/ntms/act/videoai.html",
          3,
        ],
      },
      {
        name: "BulletScreenComponent",
        type: AliPlayerComponent.BulletScreenComponent,
        args: [
          "Welcome to use Aliplayer",
          { fontSize: "16px", color: "#00c1de" },
          "random",
        ],
      },
    ],
  },
  function (player) {}
);

Each component configuration object has three properties:

Property	Description
name	A unique name for the component, which can be used to retrieve its instance.
type	The component's class or type.
args	The arguments to be passed to the component's constructor. Ensure they match the required parameters.

Create a custom build

All components

Run the following command to build all player components. The bundled output file will be located at /dist/aliplayer-components/aliplayercomponents-[version].min.js

$ npm run build

Custom set of components

To reduce the final bundle size, you can choose to build only the components you need by running the command below:

$ npm run build componentsName # componentsName is the component name

Where componentsName is a space-separated list of the component names you want to include. Example:

$ npm run build AliplayerDanmu BulletScreen # Package the AliplayerDanmu and BulletScreen components.