### Install Dependencies

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/README.md

Instructions to install the necessary dependencies for developing custom components.

```APIDOC
## Install dependencies

```sh

$ cd customComponents
$ npm install

```
```

--------------------------------

### Start Development Server

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/README.md

Commands to start the development server, with an option to specify a component name.

```APIDOC
## Start

```sh

$ npm run dev
# or you may want
$ npm run dev componentsName # componentsName indicates the component name.

```
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/h5VodDemo/README.md

Commands to navigate to the project directory and install required Node.js dependencies.

```bash
cd h5VodDemo
npm install
```

--------------------------------

### Compile and Run Project

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/h5VodDemo/README.md

Commands to start the development server or build the project for production across different operating systems.

```bash
# Development
cd h5demo
npm run dev

# Production (macOS/Linux)
cd h5demo
npm run prod

# Production (Windows)
cd h5demo
npm run prod_win
```

--------------------------------

### Start Development Server with npm

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/H5VodVueDemo/README.md

Starts the Vite development server, enabling hot module replacement and other development features. This command is used for local development and testing.

```bash
npm run dev
```

--------------------------------

### Install Dependencies with npm

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/H5VodVueDemo/README.md

Installs all necessary project dependencies using npm. This command should be run in the project's root directory after cloning the repository.

```bash
npm install
```

--------------------------------

### Package Components

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/README.md

Guides on how to package all components or specific components for production.

```APIDOC
## Package components

#### Package all components

You can run either of the following commands to package all components. The packaged file is `/dist/aliplayer-components/aliplayercomponents-[version].min.js.`

```sh
$ npm run build
```

#### Package components as required

To reduce the size of the packaged file, you can package only required components. To do so, run the following command:

```sh
$ npm run build componentsName # componentsName indicates the component name.
```

componentsName indicates the component name. Separate multiple component names with spaces. Example:

```sh
$ npm run build AliplayerDanmu BulletScreen # Package the danmu and scrolling text components only.
```

You can set componentsName to any of the following values:

- AliplayerDanmu: the damu component.
- BulletScreen: the scrolling text component.
- MemoryPlay: the last 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.
- VideoAD: the video ad component.

The packaged file is `/dist/aliplayer-components/aliplayercomponents-[version].min.js` file, which can be referenced in your page.
```

--------------------------------

### Start Development Server for Custom Components

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/README.md

Starts the development server for building custom ApsaraVideo Player components. You can specify a component name to focus development on a particular component.

```sh
npm run dev
# or
npm run dev componentsName
```

--------------------------------

### Implement StartADComponent for Pre-Roll Ads

Source: https://context7.com/aliyunvideo/aliyunplayer_web/llms.txt

Displays an image advertisement before the video starts, including a countdown timer and click-through navigation.

```javascript
const player = new Aliplayer({
  id: "J_prismPlayer",
  source: "https://player.alicdn.com/video/editor.mp4",
  components: [{
    name: 'StartADComponent',
    type: AliPlayerComponent.StartADComponent,
    args: [
      'https://example.com/ad-banner-1920x514.jpg',
      'https://promotion.example.com/campaign',
      5
    ]
  }]
});
```

--------------------------------

### Configure Start AD Component in Player

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/src/components/StartADComponent/README.md

This JavaScript snippet demonstrates how to configure the StartADComponent within the AliyunPlayer's player configuration. It specifies the component type, its name, and the arguments required for initialization: cover image URL, ad click-through URL, and display duration.

```javascript
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]
}]
```

--------------------------------

### Install Dependencies for Custom Components

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/README.md

Installs the necessary Node.js dependencies for developing custom ApsaraVideo Player components. This command should be run within the 'customComponents' directory.

```sh
cd customComponents
npm install
```

--------------------------------

### Implement Video Quality Selector with Aliplayer

Source: https://context7.com/aliyunvideo/aliyunplayer_web/llms.txt

This example shows how to add a video quality selector to the Aliplayer control bar using the QualityComponent. It's designed to work with multi-bitrate streams, allowing users to switch between different resolutions. The code also includes an event listener to update the component's display when the source is loaded.

```javascript
const player = new Aliplayer({
  id: "J_prismPlayer",
  source: "https://player.alicdn.com/video/hls/master.m3u8",
  components: [{
    name: 'QualityComponent',
    type: AliPlayerComponent.QualityComponent
  }]
});

player.on('sourceloaded', function(params) {
  const paramData = params.paramData;
  const desc = paramData.desc;
  const definition = paramData.definition;

  player.getComponent('QualityComponent').setCurrentQuality(desc, definition);
});
```

--------------------------------

### Setup PreviewVodComponent for Paywall Previews

Source: https://context7.com/aliyunvideo/aliyunplayer_web/llms.txt

Limits video playback to a specific duration, after which a custom HTML overlay is displayed. It provides methods to programmatically close the preview layer once a subscription is verified.

```javascript
const previewDuration = 30;
const previewEndHtml = `<div class="preview-end"><h2>Preview Ended</h2><p>Subscribe to watch the full video</p><button onclick="handleSubscribe()">Subscribe Now</button></div>`;
const previewBarHtml = `<div class="preview-notice">Free preview: 30 seconds</div>`;

const player = new Aliplayer({
  id: "J_prismPlayer",
  source: "https://player.alicdn.com/video/premium.mp4",
  components: [{
    name: 'PreviewVodComponent',
    type: AliPlayerComponent.PreviewVodComponent,
    args: [previewDuration, previewEndHtml, previewBarHtml]
  }]
});

function handleSubscribe() {
  const previewComponent = player.getComponent('PreviewVodComponent');
  previewComponent.closePreviewLayer();
}
```

--------------------------------

### Enable Video Rotation and Mirroring in Aliplayer

Source: https://context7.com/aliyunvideo/aliyunplayer_web/llms.txt

This code example shows how to add the RotateMirrorComponent to Aliplayer, which introduces buttons for rotating the video (90, 180, 270 degrees) and applying mirroring effects (horizontal/vertical).

```javascript
const player = new Aliplayer({
  id: "J_prismPlayer",
  source: "https://player.alicdn.com/video/editor.mp4",
  components: [{
    name: 'RotateMirrorComponent',
    type: AliPlayerComponent.RotateMirrorComponent
  }]
});
```

--------------------------------

### GET /player/getComponent

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/README.md

Retrieves an instance of a specific player component by its name.

```APIDOC
## GET /player/getComponent

### Description
Retrieves the instance of a component from the player object using the component name.

### Method
GET

### Endpoint
player.getComponent(componentName)

### Parameters
#### Path Parameters
- **componentName** (string) - Required - The name of the component to retrieve (e.g., 'BulletScreenComponent').

### Request Example
let component = player.getComponent('BulletScreenComponent');

### Response
#### Success Response (200)
- **component** (Object) - The instance of the requested component.

#### Response Example
{
  "component": "BulletScreenComponentInstance"
}
```

--------------------------------

### Initialize Aliyun Player Instance

Source: https://context7.com/aliyunvideo/aliyunplayer_web/llms.txt

Demonstrates how to instantiate the Aliplayer object with basic configuration parameters and event listeners for playback status.

```javascript
const player = new Aliplayer({
  id: "J_prismPlayer",
  width: "100%",
  height: "500px",
  autoplay: true,
  source: "https://player.alicdn.com/video/editor.mp4",
  cover: "https://example.com/cover.jpg"
}, function(player) {
  console.log("Player ready");
  player.on("ended", () => {
    console.log("Video playback completed");
  });
  player.on("error", (e) => {
    console.error("Playback error:", e);
  });
});
```

--------------------------------

### Configure StartADComponent

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/src/components/StartADComponent/README.md

How to register and configure the StartADComponent within the AliyunPlayer component array.

```APIDOC
## StartADComponent Configuration

### Description
This component displays an image advertisement when a video is about to be played.

### Method
N/A (Component Configuration)

### Endpoint
AliPlayerComponent.StartADComponent

### Parameters
#### Arguments (args)
- **coverUrl** (String) - Required - The URL of the image ad.
- **adUrl** (String) - Required - The URL of the ad landing page.
- **adDuration** (Number) - Required - The display duration of the ad in seconds.

### Request Example
```js
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]
}]
```

### Response
#### Success Response
- **Component Initialization** - The component is successfully mounted and the ad will display before video start.
```

--------------------------------

### Initialize Aliplayer and Handle Track Updates (JavaScript)

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/demo/track-component.html

This snippet demonstrates how to initialize the Aliplayer with specified configurations, including video source and components. It also shows how to listen for the 'selectorUpdateList' event and update the current audio track based on the event data.

```javascript
var player = new Aliplayer({
  id: "player-con",
  source: "https://vod.h5video.vip/e7feffa0d46471edbfc00675a0ec0102/multiple.m3u8",
  width: "100%",
  height: "500px",
  autoplay: true,
  isLive: false,
  components: [{
    name: 'TrackComponent',
    type: AliPlayerComponent.TrackComponent
  }]
}, function (player) {
  console.log("The player is created");
});

player.on('selectorUpdateList', ({paramData}) => {
  let { text, type } = paramData;
  if (type === 'audio') {
    player.getComponent('TrackComponent').setCurrentTrack(text, type);
  }
});
```

--------------------------------

### Initialize Danmu Component

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/src/components/AliplayerDanmuComponent/README.md

Configuring the Danmu component within the Aliyun Player settings.

```APIDOC
## Configuration

### Description
Add the AliplayerDanmuComponent to the player configuration to enable bullet comments.

### Request Body
- **name** (string) - Required - The component name identifier.
- **type** (object) - Required - The component class reference.
- **args** (array) - Required - An array containing the initial list of comment objects.

### Example
```js
components: [{
  name: 'AliplayerDanmuComponent',
  type: AliPlayerComponent.AliplayerDanmuComponent,
  args: [danmukuList]
}]
```
```

--------------------------------

### Danmu Comment Object Structure

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/src/components/AliplayerDanmuComponent/README.md

An example of the danmu comment object structure used by the Danmu component, based on CommentCoreLibrary's CommentObject. It includes properties like mode, text, display time, size, and color.

```javascript
[{
  "mode": 1,
  "text": "test",
  "stime": 1000,
  "size": 25,
  "color": 0xffffff
}]
```

--------------------------------

### Configuration of ProgressMarker

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/src/components/ProgressComponent/README.md

This documentation describes how to configure the ProgressMarker component within the AliyunPlayer configuration object.

```APIDOC
## CONFIGURATION ProgressMarker

### Description
The ProgressMarker component enables visual markers on the video progress bar. When a user hovers over a marker, a preview image and descriptive text are displayed.

### Method
Configuration Object

### Parameters
#### Request Body
- **progressMarkers** (Array) - Required - A list of marker objects.
  - **offset** (Number) - Required - The timestamp in seconds where the marker is placed.
  - **isCustomized** (Boolean) - Required - Whether the marker uses custom styling.
  - **coverUrl** (String) - Required - The URL of the image to display on hover.
  - **title** (String) - Required - The title text for the marker.
  - **describe** (String) - Required - The description text for the marker.
- **components** (Array) - Required - The list of components to initialize.
  - **name** (String) - Required - Set to 'ProgressMarker'.
  - **type** (Object) - Required - Set to AliPlayerComponent.ProgressMarker.

### Request Example
{
  "progressMarkers": [{
    "offset": 30,
    "isCustomized": true,
    "coverUrl": "https://example.com/image.png",
    "title": "test title",
    "describe": "test string"
  }],
  "components": [{
    "name": "ProgressMarker",
    "type": "AliPlayerComponent.ProgressMarker"
  }]
}
```

--------------------------------

### Initialize Aliplayer with TrackComponent

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/demo/audio-track.html

Configures and initializes the Aliplayer instance to support multiple audio tracks using the TrackComponent.

```APIDOC
## POST /initialize-player

### Description
Initializes the Aliplayer instance on the web page with specific configuration options, including the TrackComponent for handling multiple audio tracks.

### Method
POST

### Endpoint
/initialize-player

### Parameters
#### Request Body
- **id** (string) - Required - The DOM element ID where the player will be rendered.
- **source** (string) - Required - The URL of the video source (e.g., m3u8).
- **width** (string) - Optional - Player width (e.g., '100%').
- **height** (string) - Optional - Player height (e.g., '500px').
- **autoplay** (boolean) - Optional - Whether to start playback automatically.
- **components** (array) - Optional - List of components to load, including TrackComponent.

### Request Example
{
  "id": "player-con",
  "source": "https://vod.h5video.vip/multiple.m3u8",
  "autoplay": true,
  "components": [{"name": "TrackComponent", "type": "AliPlayerComponent.TrackComponent"}]
}

### Response
#### Success Response (200)
- **status** (string) - Confirmation message that the player has been created.

#### Response Example
{
  "status": "The player is created"
}
```

--------------------------------

### Configure PreviewVodComponent in Player

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/src/components/PreviewVodComponent/README.md

Demonstrates how to register the PreviewVodComponent within the player configuration object. It defines the required arguments for preview duration and UI prompt elements.

```javascript
components: [{
  name: 'PreviewVodComponent',
  type: AliPlayerComponent.PreviewVodComponent,
  args: [previewDuration, previewEndHtml, previewBarHtml]
}]
```

--------------------------------

### Integrate Aliyun Player in Vue 3

Source: https://context7.com/aliyunvideo/aliyunplayer_web/llms.txt

Demonstrates how to initialize the Aliyun Player in a Vue 3 component with TypeScript. It includes playlist management, memory playback functionality, and pre-roll advertisement configuration.

```typescript
<script setup lang="ts">
import { onMounted, ref } from "vue";
import Aliplayer from "aliyun-aliplayer";
import "aliyun-aliplayer/build/skins/default/aliplayer-min.css";

interface PlayInfo {
  VideoId: string;
  Title: string;
  Source: string;
  CoverURL: string;
  Duration: string;
}

const player = ref<typeof Aliplayer>(null);
const currentVideo = ref<PlayInfo | null>(null);

const videoList: PlayInfo[] = [
  { VideoId: "1", Title: "Introduction", Source: "https://example.com/intro.mp4", CoverURL: "https://example.com/cover1.jpg", Duration: "5:30" },
  { VideoId: "2", Title: "Tutorial", Source: "https://example.com/tutorial.mp4", CoverURL: "https://example.com/cover2.jpg", Duration: "12:45" }
];

const saveTime = (memoryVideo: string, currentTime: string) => {
  localStorage.setItem(memoryVideo, currentTime);
};

const getTime = (memoryVideo: string): string | null => {
  return localStorage.getItem(memoryVideo);
};

const createPlayer = (source: string, cover: string) => {
  player.value = new Aliplayer({
    id: "container",
    width: "100%",
    height: "485px",
    source: source,
    cover: cover,
    components: [
      {
        name: "StartADComponent",
        type: window.AliPlayerComponent.StartADComponent,
        args: ["https://example.com/ad.jpg", "https://promo.example.com", 3]
      },
      {
        name: "MemoryPlayComponent",
        type: window.AliPlayerComponent.MemoryPlayComponent,
        args: [false, getTime, saveTime]
      }
    ]
  }, (p: typeof Aliplayer) => {
    p.on("ended", () => {
      const idx = videoList.findIndex(v => v.VideoId === currentVideo.value?.VideoId);
      if (idx < videoList.length - 1) {
        switchVideo(videoList[idx + 1]);
      }
    });
  });
};

const switchVideo = (video: PlayInfo) => {
  currentVideo.value = video;
  player.value?.dispose();
  createPlayer(video.Source, video.CoverURL);
};

onMounted(() => {
  currentVideo.value = videoList[0];
  createPlayer(videoList[0].Source, videoList[0].CoverURL);
});
</script>

<template>
  <div id="container"></div>
</template>
```

--------------------------------

### Initialize Aliplayer with Quality Component

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/demo/quality-component.html

Initializes the Aliplayer with specified configurations, including the QualityComponent. It registers an event listener for 'sourceloaded' to dynamically set video quality based on available definitions.

```javascript
var player = new Aliplayer({
  id: "player-con",
  source: JSON.stringify({"HD":"//player.alicdn.com/resource/player/qupai.mp4", "SD":"//player.alicdn.com/video/editor.mp4"}),
  width: "100%",
  autoSize: true,
  clickPause: true,
  components: [{
    name: 'QualityComponent',
    type: AliPlayerComponent.QualityComponent,
    args: [function(definition,desc) { console.log(definition + '-----' + desc) }]
  }]
}, function(player) {
  console.log("The player is created");
  player.on('sourceloaded', function(params) {
    var paramData = params.paramData
    var desc = paramData.desc
    var definition = paramData.definition
    player.getComponent('QualityComponent').setCurrentQuality(desc, definition)
  })
});
```

--------------------------------

### Initialize Aliplayer with Track Component (JavaScript)

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/demo/audio-track.html

This snippet demonstrates how to initialize the Aliplayer in a web environment using JavaScript. It configures the player with a specific video source, dimensions, and enables the TrackComponent, which is essential for handling videos with multiple audio tracks. The player is set to autoplay and is not a live stream.

```javascript
var player = new Aliplayer({
  id: "player-con",
  source: "https://vod.h5video.vip/e7feffa0d46471edbfc00675a0ec0102/multiple.m3u8",
  width: "100%",
  height: "500px",
  autoplay: true,
  isLive: false,
  controlBarVisibility: 'always',
  components: [
    {
      name: 'TrackComponent',
      type: AliPlayerComponent.TrackComponent,
      args: []
    }
  ]
}, function (player) {
  console.log("The player is created");
});
```

--------------------------------

### Initialize Aliplayer with Playlist Component (JavaScript)

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/demo/play-list.html

This snippet shows how to initialize the Aliplayer with a video playlist. It configures player settings such as ID, source, dimensions, and autoplay. The PlaylistComponent is added to manage multiple video sources, each with a display name and URL. The player is then instantiated, and a callback function logs a message upon successful creation.

```javascript
var player = new Aliplayer({
  id: "player-con",
  source: "//player.alicdn.com/video/editor.mp4",
  width: "100%",
  height: "500px",
  autoplay: false,
  isLive: false,
  components: [
    {
      name: 'PlaylistComponent',
      type: AliPlayerComponent.PlaylistComponent,
      args: [
        [
          { name: '阿里云播放器介绍', source: '//player.alicdn.com/video/editor.mp4' },
          { name: '趣拍演示视频', source: '//player.alicdn.com/resource/player/qupai.mp4' },
          { name: '云栖大会', source: 'http://player.pier39.cn/video/yunxi.mp4' },
          { name: '4K 阿里视频云介绍', source: 'https://player.alicdn.com/video/apsaravideo4k.mp4' }
        ]
      ]
    }
  ]
}, function (player) {
  console.log("The player is created");
});
```

--------------------------------

### Configure Playlist Component in AliyunPlayer

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/src/components/PlaylistComponent/README.md

This JavaScript code demonstrates how to configure the PlaylistComponent within the AliyunPlayer. It specifies the component name, type, and provides an array of video objects, each with a name and source URL, to populate the playlist.

```javascript
components: [{
  name: 'PlaylistComponent',
  type: AliPlayerComponent.PlaylistComponent,
  args: [[{
    name: 'Alibaba Cloud ApsaraVideo',
    source: '//player.alicdn.com/video/editor.mp4'
  }, {
    name: 'Smart Video Demo',
    source: '//player.alicdn.com/resource/player/qupai.mp4'
  }, {
    name: 'Computing Conference',
    source: 'http://player.pier39.cn/video/yunxi.mp4'
  }, {
    name: 'ApsaraVideo Introduction',
    source: 'https://player.alicdn.com/video/apsaravideo4k.mp4'
  }]]
}]
```

--------------------------------

### Implement WeChat Mini-Program Video Player

Source: https://context7.com/aliyunvideo/aliyunplayer_web/llms.txt

Shows the implementation of a native video player in WeChat Mini-Programs. It uses WXML for the video component structure with custom cover-view overlays and JavaScript for managing playback state and quality switching.

```html
<video
  id="videoPlayer"
  autoplay
  bindplay="videoPlayHandle"
  class="vod-video"
  bindtap="tapVideo"
  bindpause="playPaused"
  bindended="playEnded"
  bindtimeupdate="timeUpdate"
  bindfullscreenchange="fullScreen"
  poster="{{currentPoster}}"
  src="{{currentResource}}"
  bindwaiting="videoWaiting">

  <cover-view class="video-control" hidden="{{controlHidden}}">
    <cover-view class="video-title">{{currentVideoTitle}}</cover-view>
    <cover-view class="multi" capture-catch:tap="switchResource">
      {{currentDefinition}}
    </cover-view>
    <cover-view class="multi rate" capture-catch:tap="showSwitchRate">
      x {{currentRate}}
    </cover-view>
  </cover-view>
</video>
```

```javascript
Page({
  data: {
    currentResource: '',
    currentPoster: '',
    currentVideoTitle: '',
    currentDefinition: 'HD',
    currentRate: 1.0,
    controlHidden: true
  },

  onLoad: function(options) {
    this.loadVideoInfo(options.videoId);
  },

  loadVideoInfo: async function(videoId) {
    const res = await wx.request({
      url: 'https://your-appserver.com/api/video/' + videoId
    });
    this.setData({
      currentResource: res.data.playUrl,
      currentPoster: res.data.coverUrl,
      currentVideoTitle: res.data.title
    });
  },

  tapVideo: function() {
    this.setData({ controlHidden: !this.data.controlHidden });
  },

  switchResource: function() {
    wx.showActionSheet({
      itemList: ['SD 480p', 'HD 720p', 'FHD 1080p'],
      success: (res) => {
        this.changeQuality(res.tapIndex);
      }
    });
  }
});
```

--------------------------------

### Configure QualityComponent in Player

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/src/components/QualityComponent/README.md

This snippet shows how to register the QualityComponent within the AliyunPlayer configuration. It's a prerequisite for enabling video definition switching.

```javascript
components: [{
  name: 'QualityComponent',
  type: AliPlayerComponent.QualityComponent
}]
```

--------------------------------

### Build Application for Production with npm

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/H5VodVueDemo/README.md

Builds the Vue.js application for production deployment. This command optimizes the code and assets for a production environment.

```bash
npm run build
```

--------------------------------

### Configure Progress Markers in AliyunPlayer

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/src/components/ProgressComponent/README.md

This snippet demonstrates how to define the progressMarkers array within the player configuration. It includes properties for offset, custom styling, cover image URLs, titles, and descriptions, and registers the ProgressMarker component.

```javascript
progressMarkers:[{
  offset: 30,
  isCustomized:true,
  coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/9A3F562E595E4764AD1DD546FA52C6E5-6-2.png',
  title: 'test title',
  describe: 'test string',
}, {
  offset:50,
  isCustomized:true,
  coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/1E7F402241CD4C0F94AD2BBB5CCC3EC7-6-2.png',
  title: 'test title',
  describe: 'test string',
}, {
  offset:150,
  isCustomized:true,
  coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/553AEA01161342C8A2B1756E83B69B5B-6-2.png',
  title: 'test title',
  describe: 'test string',
}, {
  offset:120,
  isCustomized:true,
  coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/553AEA01161342C8A2B1756E83B69B5B-6-2.png',
  title: 'test title',
  describe: 'test string',
}],
components: [{
  name: 'ProgressMarker',
  type: AliPlayerComponent.ProgressMarker
}]
```

--------------------------------

### Handle Video Definition Switching with QualityComponent

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/src/components/QualityComponent/README.md

This code registers an event listener for 'sourceloaded' to dynamically obtain and set the video definition using the QualityComponent. It requires the player instance and accesses video metadata to set the current quality.

```javascript
// Register the sourceloaded event of the player to obtain the definition of the current video, obtain the definition component, and call the setCurrentQuality method of the component to set the definition to be used by the player. 
player.on('sourceloaded', function(params) {
  var paramData = params.paramData
  var desc = paramData.desc
  var definition = paramData.definition
  // Obtain the definition component and call the setCurrentQuality() method of the component to set the definition to be used by the player. 
  player.getComponent('QualityComponent').setCurrentQuality(desc, definition)
})
```

--------------------------------

### PlaylistComponent Configuration

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/src/components/PlaylistComponent/README.md

Configuring the PlaylistComponent within the player initialization settings.

```APIDOC
## PlaylistComponent Configuration

### Description
Integrates the playlist component into the player control bar to allow users to switch between multiple video sources.

### Parameters
#### Request Body
- **name** (string) - Required - The identifier 'PlaylistComponent'.
- **type** (object) - Required - The component reference 'AliPlayerComponent.PlaylistComponent'.
- **args** (array) - Required - An array containing the playlist object.

### Request Example
{
  "components": [{
    "name": "PlaylistComponent",
    "type": "AliPlayerComponent.PlaylistComponent",
    "args": [[{
      "name": "Video Title",
      "source": "//url/to/video.mp4"
    }]]
  }]
}
```

--------------------------------

### Configure Play Next Component in AliyunPlayer

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/src/components/playerNextComponent/README.md

This snippet demonstrates how to register the PlayerNextComponent within the player configuration object. It requires passing a clickHandle function as an argument to define the behavior when the button is clicked.

```javascript
components: [{
  name: 'PlayerNextComponent',
  type: AliPlayerComponent.PlayerNextComponent,
  args: [clickHandle]
}]
```

--------------------------------

### Define Preview UI Elements

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/src/components/PreviewVodComponent/README.md

Shows two methods for defining custom HTML for preview prompts: using a template script tag with an ID reference or using ES6 template strings directly in the configuration.

```html
<script type="text/template" id="endPreviewTemplate">
  <div>Element inserted into previewEndHtml</div>
</script>
```

```javascript
// Method 1: ID reference
args: [previewDuration, '#endPreviewTemplate', previewBarHtml];

// Method 2: DOM string
args: [previewDuration, `<div>Element inserted into previewEndHtml</div>`, previewBarHtml];
```

--------------------------------

### Implement MemoryPlayComponent for Resume Playback

Source: https://context7.com/aliyunvideo/aliyunplayer_web/llms.txt

Enables automatic playback resumption by saving and retrieving the last watched position. Requires custom storage functions for persistence.

```javascript
const saveTime = function(memoryVideo, currentTime) {
  fetch('/api/save-progress', {
    method: 'POST',
    body: JSON.stringify({ videoId: memoryVideo, position: currentTime })
  });
};
const getTime = function(memoryVideo) {
  const saved = localStorage.getItem(memoryVideo);
  return saved ? parseInt(saved) : null;
};
const player = new Aliplayer({
  id: "J_prismPlayer",
  source: "https://player.alicdn.com/video/editor.mp4",
  components: [{
    name: 'MemoryPlayComponent',
    type: AliPlayerComponent.MemoryPlayComponent,
    args: [true, getTime, saveTime]
  }]
});
```

--------------------------------

### PauseADComponent Integration

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/src/components/PauseADComponent/README.md

This section details how to integrate the PauseADComponent into your Aliyun Player configuration. It explains the necessary parameters for displaying an image ad and linking to a URL when the video is paused.

```APIDOC
## Pause Ad Component

This component is used to display an image ad in the middle of the player when a video is paused.

### Usage

Reference this component and add the following code to the player configuration:

```js
components: [{
  name: 'PauseADComponent',
  type: AliPlayerComponent.PauseADComponent,
  args: ['https://img.alicdn.com/tfs/TB1byi8afDH8KJjy1XcXXcpdXXa-1920-514.jpg', 'https://promotion.aliyun.com/ntms/act/videoai.html']
}]
```

This component contains the following parameters:

> coverUrl and adUrl

- `coverUrl` (String) - The URL of the image ad.
- `adUrl` (String) - The URL of the ad page.
```

--------------------------------

### PreviewVodComponent - Video Preview with Paywall

Source: https://context7.com/aliyunvideo/aliyunplayer_web/llms.txt

Allows users to preview a video for a limited duration before displaying a paywall or subscription prompt.

```APIDOC
## PreviewVodComponent

### Description
Allows users to preview a video for a limited duration before displaying a paywall or subscription prompt. Customizable end-screen and progress bar messages.

### Parameters
#### Arguments
- **previewDuration** (number) - Required - Duration in seconds before the preview ends.
- **previewEndHtml** (string) - Required - HTML content for the end-screen overlay.
- **previewBarHtml** (string) - Required - HTML content for the progress bar notice.
```

--------------------------------

### Reference Component Library

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/README.md

Instructions on how to reference the ApsaraVideo Player component library in your HTML and inject components.

```APIDOC
### Reference the ApsaraVideo Player component library

- Reference the specific JS file in your HTML file.

```html
<script type="text/javascript" src="path/to/aliplayercomponents-[version].min.js"></script>
```

- Inject a component to the player

The following table lists the parameters for injecting a component.

|Parameter|Description
|-|- 
|name|The component name. You can obtain a component by its name.
|type|The component type.
|args|The component parameters.

```javascript
let option = {
    id: "J_prismPlayer",
    autoplay: true,
    width:"100%",
    height:"100%",
    source:source,
    components:[
    {
        name: 'BulletScreenComponent',
        type: AliPlayerComponent.BulletScreenComponent,
        args: ['Welcome to use Aliplayer', {fontSize: '16px', color: '#00c1de'}, 'random']
    }
    ]                 
};

let player = new Aliplayer(option);
```
```

--------------------------------

### AliplayerDanmuComponent

Source: https://context7.com/aliyunvideo/aliyunplayer_web/llms.txt

Integrates real-time scrolling comments (danmaku) overlay on the video player.

```APIDOC
## AliplayerDanmuComponent

### Description
Provides functionality to display, send, and schedule scrolling bullet comments (danmaku) over the video.

### Method
Component Initialization / Method Call

### Parameters
#### Request Body
- **mode** (number) - Required - 1 for scrolling
- **text** (string) - Required - The comment content
- **stime** (number) - Optional - Time in ms when the comment appears
- **size** (number) - Optional - Font size
- **color** (number) - Optional - Hex color code

### Request Example
{
  "mode": 1,
  "text": "Hello World",
  "stime": 1000,
  "size": 25,
  "color": 16777215
}

### Response
#### Success Response (200)
- **status** (string) - Returns success upon comment processing
```

--------------------------------

### Implement Native Video Component with Cover-View

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/vod-mini-program/README.md

This snippet demonstrates how to use the native WeChat video component and overlay custom controls using cover-view to ensure proper layering over the video element.

```html
<video
      id="videoPlayer"
      autoplay
      bindplay="videoPlayHandle"
      class="vod-video"
      bindtap="tapVideo"
      bindpause="playPaused"
      bindended="playPaused"
      bindtimeupdate="timeUpdate"
      bindfullscreenchange="fullScreen"
      poster="{{currentPoster}}"
      src="{{currentResource}}"
      bindwaiting="videoWaiting">
        <cover-view class="video-control" hidden="{{controlHidden}}" >
          <cover-view class="video-title">{{currentVideoTitle}}</cover-view>
          <cover-view class="multi" capture-catch:tap="switchResource">{{currentDefinition}}</cover-view>
          <cover-view class="multi rate" capture-catch:tap="showSwitchRate">x {{currentRate}}</cover-view>
        </cover-view>
  </video>
```

--------------------------------

### Configure Audio Track Switching Component in AliyunPlayer Web

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/src/components/TrackComponent/README.md

This JavaScript snippet demonstrates how to reference and add the TrackComponent to the AliyunPlayer configuration. This enables the audio track switching functionality for the video player. Ensure the AliPlayerComponent is accessible in your environment.

```javascript
components: [{
  name: 'TrackComponent',
  type: AliPlayerComponent.TrackComponent
}]
```

--------------------------------

### QualityComponent

Source: https://context7.com/aliyunvideo/aliyunplayer_web/llms.txt

Enables video quality/resolution selection for multi-bitrate streams.

```APIDOC
## QualityComponent

### Description
Allows users to switch between different video definitions (e.g., 1080p, 720p).

### Method
player.getComponent('QualityComponent').setCurrentQuality(desc, definition)
```

--------------------------------

### Configure Aliplayer for X5 Same-Layer Playback in WeChat (JavaScript)

Source: https://context7.com/aliyunvideo/aliyunplayer_web/llms.txt

Initializes the Aliplayer with specific X5 settings for same-layer playback in WeChat on Android. It enables X5 fullscreen and sets the orientation. Event listeners are included to manage entering and exiting fullscreen modes, and to close the WeChat window when the video exit fullscreen event is triggered.

```javascript
const player = new Aliplayer({
  id: "J_prismPlayer",
  source: "https://player.alicdn.com/video/editor.mp4",
  // Enable X5 same-layer playback
  x5_type: 'h5-page',
  x5_fullscreen: true,
  x5_orientation: 'portrait'
});

// Handle X5 full-screen events
player.tag.addEventListener("x5requestFullScreen", () => {
  console.log("Entering X5 same-layer fullscreen");
  // Adjust UI layout for full-screen mode
});

player.tag.addEventListener("x5cancelFullScreen", () => {
  console.log("Exiting X5 same-layer fullscreen");
  // Restore original UI layout
});

// Handle exit button in X5 player (closes WeChat webpage)
player.tag.addEventListener("x5videoexitfullscreen", () => {
  if (typeof WeixinJSBridge !== 'undefined') {
    WeixinJSBridge.call('closeWindow');
  }
});
```

--------------------------------

### Danmu Component Methods

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/src/components/AliplayerDanmuComponent/README.md

Methods available after obtaining the component instance via player.getComponent('AliplayerDanmuComponent').

```APIDOC
## Component Methods

### send(data: ICommentData)
Sends a comment in real time.

### insert(data: ICommentData)
Inserts a comment into the timeline. The system automatically calculates the display time.

### Comment Data Structure
- **mode** (number) - Required - Comment type.
- **text** (string) - Required - Comment content.
- **stime** (number) - Required - Display time in milliseconds.
- **size** (number) - Optional - Font size.
- **color** (number) - Optional - Hex color code.
```

--------------------------------

### Configure Danmu Component in Player

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/src/components/AliplayerDanmuComponent/README.md

This JavaScript code snippet shows how to integrate the AliplayerDanmuComponent into the Aliyun Player configuration. It requires an array of comment objects for initialization.

```javascript
components: [{
  name: 'AliplayerDanmuComponent',
  type: AliPlayerComponent.AliplayerDanmuComponent,
  args: [danmukuList]
}]
```

--------------------------------

### Integrate Danmaku (Bullet Comments) with Aliplayer

Source: https://context7.com/aliyunvideo/aliyunplayer_web/llms.txt

This snippet demonstrates how to integrate the AliplayerDanmuComponent to display real-time scrolling comments (danmaku) on the video player. It shows initialization with a danmuku list and how to send/insert comments dynamically. Dependencies include CommentCoreLibrary.

```javascript
const danmukuList = [
  { mode: 1, text: "Great video!", stime: 1000, size: 25, color: 0xffffff },
  { mode: 1, text: "Very helpful", stime: 5000, size: 25, color: 0x00ff00 },
  { mode: 1, text: "Amazing content", stime: 10000, size: 25, color: 0xff6600 }
];

const player = new Aliplayer({
  id: "J_prismPlayer",
  source: "https://player.alicdn.com/video/editor.mp4",
  components: [{
    name: 'AliplayerDanmuComponent',
    type: AliPlayerComponent.AliplayerDanmuComponent,
    args: [danmukuList]
  }]
});

const danmuComponent = player.getComponent('AliplayerDanmuComponent');

danmuComponent.send({
  mode: 1,
  text: "Sent in real-time!",
  size: 25,
  color: 0xff0000
});

danmuComponent.insert({
  mode: 1,
  text: "Scheduled comment",
  stime: 15000,
  size: 25,
  color: 0x0000ff
});

const cm = danmuComponent.CM;
```

--------------------------------

### Handle Playlist Events in AliyunPlayer

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/src/components/PlaylistComponent/README.md

These JavaScript code snippets show how to listen for and handle various events emitted by the PlaylistComponent in AliyunPlayer. These events include clicking on a video item, the previous button, the next button, and when the video changes.

```javascript
player.on('plugin-playlist-click-video', (event) => {
  // click on VideoItem in list
  console.log("click Item", event.paramData.currentIndex, event.paramData.clickedIndex);
})
```

```javascript
player.on('plugin-playlist-click-prev', (event) => {
  // click on 'Prev' button
  console.log("click Prev", event.paramData.currentIndex);
})
```

```javascript
player.on('plugin-playlist-click-next', (event) => {
  // click on 'Next' button
  console.log("click Next", event.paramData.currentIndex);
})
```

```javascript
player.on('plugin-playlist-change', (event) => {
  // after click, player starts loading a new video
  console.log("video change", event.paramData.currentIndex);
})
```

--------------------------------

### Package Specific Custom Components

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/README.md

Packages only the specified custom ApsaraVideo Player components to reduce the final file size. Multiple component names can be provided, separated by spaces.

```sh
npm run build componentsName # componentsName indicates the component name.
# Example:
npm run build AliplayerDanmu BulletScreen
```

--------------------------------

### Configure PauseADComponent in AliyunPlayer

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/src/components/PauseADComponent/README.md

This snippet demonstrates how to register the PauseADComponent within the player's configuration object. It requires the component name, type, and an arguments array containing the image URL and the target ad URL.

```javascript
components: [{
  name: 'PauseADComponent',
  type: AliPlayerComponent.PauseADComponent,
  args: ['https://img.alicdn.com/tfs/TB1byi8afDH8KJjy1XcXXcpdXXa-1920-514.jpg', 'https://promotion.aliyun.com/ntms/act/videoai.html']
}]
```

--------------------------------

### Implement PlaylistComponent for Video Management

Source: https://context7.com/aliyunvideo/aliyunplayer_web/llms.txt

Adds a playlist sidebar and navigation controls to the player. It supports automatic video switching and provides event listeners for tracking user interactions with the playlist.

```javascript
const playlist = [
  { name: 'Introduction', source: 'https://player.alicdn.com/video/intro.mp4' },
  { name: 'Chapter 1: Basics', source: 'https://player.alicdn.com/video/ch1.mp4' },
  { name: 'Chapter 2: Advanced', source: 'https://player.alicdn.com/video/ch2.mp4' },
  { name: 'Summary', source: 'https://player.alicdn.com/video/summary.mp4' }
];

const player = new Aliplayer({
  id: "J_prismPlayer",
  source: playlist[0].source,
  components: [{
    name: 'PlaylistComponent',
    type: AliPlayerComponent.PlaylistComponent,
    args: [playlist]
  }]
});

player.on('plugin-playlist-click-video', (event) => {
  console.log('Video clicked:', event.paramData.clickedIndex);
});
player.on('plugin-playlist-click-prev', (event) => {
  console.log('Previous clicked, current index:', event.paramData.currentIndex);
});
player.on('plugin-playlist-click-next', (event) => {
  console.log('Next clicked, current index:', event.paramData.currentIndex);
});
player.on('plugin-playlist-change', (event) => {
  console.log('Video changed to index:', event.paramData.currentIndex);
});
```

--------------------------------

### Add Audio Track Selector to Aliplayer

Source: https://context7.com/aliyunvideo/aliyunplayer_web/llms.txt

This snippet demonstrates the integration of the TrackComponent for Aliplayer, enabling users to switch between different audio tracks available in a video, typically used for multi-language content.

```javascript
const player = new Aliplayer({
  id: "J_prismPlayer",
  source: "https://player.alicdn.com/video/multilang.m3u8",
  components: [{
    name: 'TrackComponent',
    type: AliPlayerComponent.TrackComponent
  }]
});
```

--------------------------------

### Configure VideoADComponent for Pre-Roll Ads

Source: https://context7.com/aliyunvideo/aliyunplayer_web/llms.txt

Integrates a pre-roll advertisement into the player. It includes a custom close handler function that allows users to skip the ad based on subscription status.

```javascript
const adCloseFunction = function(videoAd) {
  videoAd.pauseVideoAd();
  if (confirm('Subscribe to Premium to skip ads?')) {
    videoAd.closeVideoAd();
  } else {
    videoAd.playVideoAd();
  }
};

const player = new Aliplayer({
  id: "J_prismPlayer",
  source: "https://player.alicdn.com/video/editor.mp4",
  components: [{
    name: 'VideoADComponent',
    type: AliPlayerComponent.VideoADComponent,
    args: [
      'https://player.alicdn.com/ad/citybrain.mp4',
      'https://promotion.example.com/video-campaign',
      adCloseFunction,
      'Skip Ad'
    ]
  }]
});
```

--------------------------------

### Reference ApsaraVideo Player Component Library

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/README.md

Includes the ApsaraVideo Player custom components library in an HTML file via a script tag. The 'version' should be replaced with the actual version number.

```html
<script type="text/javascript" src="path/to/aliplayercomponents-[version].min.js"></script>
```

--------------------------------

### ProgressMarker

Source: https://context7.com/aliyunvideo/aliyunplayer_web/llms.txt

Adds visual markers to the progress bar for key video moments.

```APIDOC
## ProgressMarker

### Description
Displays visual indicators on the player timeline with hoverable thumbnails and descriptions.

### Parameters
#### Request Body
- **offset** (number) - Required - Time in seconds for the marker
- **coverUrl** (string) - Required - URL for the thumbnail
- **title** (string) - Required - Marker title
- **describe** (string) - Optional - Detailed description

### Request Example
{
  "offset": 30,
  "title": "Intro",
  "coverUrl": "url"
}
```

--------------------------------

### Implement Subtitle/Caption Selector in Aliplayer

Source: https://context7.com/aliyunvideo/aliyunplayer_web/llms.txt

This code shows how to add the CaptionComponent to Aliplayer, allowing users to select and switch between different available subtitle or caption tracks for a video.

```javascript
const player = new Aliplayer({
  id: "J_prismPlayer",
  source: "https://player.alicdn.com/video/subtitled.m3u8",
  components: [{
    name: 'CaptionComponent',
    type: AliPlayerComponent.CaptionComponent
  }]
});
```

--------------------------------

### Inject Custom Component into ApsaraVideo Player

Source: https://github.com/aliyunvideo/aliyunplayer_web/blob/master/customComponents/README.md

Demonstrates how to inject a custom component, such as a BulletScreenComponent, into an ApsaraVideo Player instance using the 'components' option in the player configuration. This allows for extending player functionality.

```javascript
let option = {
    id: "J_prismPlayer",
    autoplay: true,
    width:"100%",
    height:"100%",
    source:source,
    components:[
    {
        name: 'BulletScreenComponent',
        type: AliPlayerComponent.BulletScreenComponent,
        args: ['Welcome to use Aliplayer', {fontSize: '16px', color: '#00c1de'}, 'random']
    }
    ]                 
};

let player = new Aliplayer(option);
```