Official components

Overview

• Source code is available on GitHub.

• Try the components in the Functions tab.

• Some features do not work in built-in mobile browsers.

• GitHub is a third-party site. Connection issues may occur.

Component list

Component name	Type	Description	Effect
Bullet comment	AliplayerDanmuComponent	Adds a text input box and control bar buttons for enabling, disabling, and sending live comments. Danmu component.
Animated watermark (Marquee component)	BulletScreenComponent	Adds a scrolling text watermark (such as a user ID) to deter unauthorized copying. Supports custom position, color, and font size. Marquee component. By default, the marquee animation lasts 10 seconds. To customize the scroll interval (for example, to 4 seconds), override the animation with CSS: .bullet-screen { animation: bullet 4s linear infinite !important; }. The !important flag is required to override the component's built-in style.
Subtitle	CaptionComponent	Switches subtitles between languages. Subtitle component.
Video ad pod	ManyVideoADComponent	Plays a sequence of video ads before the main content. Video ad pod component.
Resume playback	MemoryPlayComponent	Saves the last playback position automatically. Two modes: Click-to-Play: Shows the last position on play with an option to seek. Auto-play: Seeks to the last saved position on playback start. Resume playback component. Note Requires localStorage support in the browser.
Pause ad (image)	PauseADComponent	Displays an image ad overlay in the center of the player when paused. Pause ad component.
Video playlist	PlaylistComponent	Adds a playlist button to the control bar for switching between videos. Video playlist component.
Preview	PreviewVodComponent	Limits playback to a preview duration, then prompts for full access (e.g., subscribe or purchase). Preview component.
Progress marker	ProgressComponent	Adds markers to the progress bar for key points. Hovering a marker shows a thumbnail preview. Progress marker component.	The complete player interface example demonstrates the integration of multiple official components, including: Thumbnail preview tooltip (displaying title and description) Resume playback bar (Last watched at 00:34, click to resume) Subtitle display Bottom control bar (pause, progress bar, volume, settings, CC subtitle, fullscreen buttons)
Definition	QualityComponent	Switches video definitions (resolution). Definition component.
Playback speed	RateComponent	Adjusts video playback speed. Playback speed component
Rotation and mirroring	RotateMirrorComponent	Adds rotate and mirror buttons to the control bar. Rotation and mirroring component.
Start ad (image)	StartADComponent	Displays an image ad before video playback starts. Start ad component.
Audio track switching	TrackComponent	Switches audio tracks between languages. Audio track switching component.	-
Video ad	VideoADComponent	Plays a time-limited video ad before the main content. Video ad component.
Play next	PlayerNextComponent	Adds a Play Next button to the control bar. The click event can be custom-defined and passed as a parameter. Play next component.

Use components

1. Add the components to Web Player SDK. No CDN URL is currently available. Download the components package and include it in your project. Use the latest version.

   <script type="text/javascript" src="your-public-path/aliplayercomponents-1.0.9.min.js"></script>

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

   Component properties:

   Property	Description
   name	Unique name for the component, used to retrieve its instance.
   type	Component class.
   args	Constructor arguments. Must match the required parameters.

Create a custom build

All components

Builds all components. Output: /dist/aliplayer-components/aliplayercomponents-[version].min.js

$ npm run build

Custom set of components

To reduce bundle size, build only specific components:

$ npm run build componentsName # componentsName is the component name

componentsName is a space-separated list. Example:

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