ApsaraVideo Player (Aliplayer) Web SDK Custom Components

The h5LiveDemo is an HTML5-based implementation of the ApsaraVideo Player specifically for live streaming. Key features include:

• Full-screen playback.
• Commenting and liking functionality.
• MQTT persistent session support.
• WeChat Android Support: Implements HTML5-based full-screen same-layer playback to resolve common full-screen issues in WeChat on Android.

The H5 Live Demo demonstrates advanced player capabilities including:

• Full-screen playback.
• Interactive features like comments and likes.
• Client-side long connections via MQTT.
• Support for same-layer full-screen playback in Android WeChat, which resolves issues where WeChat triggers a separate full-screen popup.

This project is a comprehensive demonstration of the ApsaraVideo Player (Aliplayer) supporting both Live streaming and VOD (Video on Demand) across PC and mobile platforms. It features automatic device detection to redirect users to either the desktop or mobile version of the player.

Key features include:

• Playback and playlist management.
• Comment systems.
• Client-side long connections via MQTT.
• Support for Android WeChat H5 same-layer full-screen playback (resolving common Android WeChat full-screen pop-up issues).
• Built using Prismplayer, React, ES6, Babel 6, and Webpack.
• Support for Hot Module Replacement (HMR).

This repository provides scenario-based and custom-component demonstrations for the ApsaraVideo Player (Aliplayer) on the web. Each demo is designed to be independent and can be used as a standalone reference for integrating video playback into various environments.

Key capabilities demonstrated across the demos include:

• VOD (Video on Demand): Playback, playlists, subtitles, multi-language support, adaptive bitrate, and skin customization.
• Live Streaming: Full-screen playback, real-time comments, likes, and MQTT long-connection support.
• Cross-Platform Support: Specialized implementations for React, Vue, JQuery, WeChat Mini Programs, and mobile/desktop adaptive views.
• Special Features: Support for Android WeChat full-screen H5 same-layer playback to prevent pop-up issues.

The multiPlatformLiveDemo is an integrated demo of the ApsaraVideo Player that supports both live streaming and VOD (Video on Demand). It is designed to work seamlessly across both PC and mobile devices.

Key Features:

• Core Functionality: Supports playback, playlists, comments, and MQTT persistent sessions.
• Mobile Optimization: Includes HTML5-based full-screen same-layer playback specifically for WeChat on Android to resolve common full-screen playback issues.
• Technology Stack: Built using Prismplayer, React, ES6, Babel 6, and Webpack.
• Dynamic Redirection: Automatically redirects users to the appropriate PC or mobile webpage based on their device type.

This demo is a React-based single-page application (SPA) that utilizes the ApsaraVideo Player SDK for web to play Video-on-Demand (VOD) content. It demonstrates advanced player features including:

• Playlist management: Handling multiple video sources.
• Memory playback: Resuming video from where the user left off.
• Advertisement integration: Playing ads within the video flow.

For detailed technical specifications of the underlying SDK, refer to the ApsaraVideo Player for web documentation.

npm install

This demo is a Vue-based single-page application (SPA) that integrates the ApsaraVideo Player SDK for web to play on-demand videos (VOD). It demonstrates advanced player features including:

• Playlist management: Handling multiple video sources.
• Memory playback: Resuming video from where the user left off.
• Advertisement integration: Playing ads within the video flow.

For detailed technical specifications of the underlying SDK, refer to the ApsaraVideo Player for web documentation.

This repository contains various scenario-based and custom-component demos for the ApsaraVideo Player on the web. These demos can be used independently as references for different implementation environments (Vue, React, jQuery, WeChat Applet, etc.).

All demos use Babel 7.0 and webpack 4.0 for configuration.

The MemoryPlayComponent automatically remembers a user's last playback position for a video. It supports two modes:

1. Click-to-play (Default): When a user clicks play, the component prompts them with the last played position, allowing them to click seek to resume.
2. Auto-play: The component automatically seeks to the last played position upon loading.

Note: This component relies on localStorage to persist playback positions. It will not function in browsers that do not support localStorage.

components: [{
  name: 'MemoryPlayComponent',
  type: AliPlayerComponent.MemoryPlayComponent,
  /* Set the first parameter to true to enable auto play. The default is false. */
  args: [true, getTime, saveTime]
}]

On Android devices using X5-kernel browsers (like WeChat or QQ Browser), the browser may hijack video playback into a default full-screen mode that overwrites the DOM. To resolve this, you can use 'same-layer playback'.

This solution displays a pop-up player above the webpage with specific UI elements (exit and share buttons at the top, black edge at the bottom). To adjust your layout for this mode, you must subscribe to the following events:

• x5requestFullScreen
• x5cancelFullScreen

Note: Same-layer playback is only supported on Android devices and is not available on iOS.

To play ApsaraVideo for VOD content, your AppServer must act as a bridge between the applet and the ApsaraVideo service. The workflow is:

1. Get Video List: The applet calls your AppServer, which in turn calls the ApsaraVideo GetVideoList operation.
2. Get Video Details: When a user selects a video, the applet calls your AppServer, which calls the ApsaraVideo GetVideoInfo operation using the video ID.
3. Retrieve Playback URL: The GetVideoInfo operation returns the necessary playback URL which is then passed to the WeChat <video> component's src attribute.