ApsaraVideo Player for Web demos and source code-ApsaraVideo VOD(VOD)-阿里云帮助中心

This topic describes how to apply for the online trial of ApsaraVideo Player SDK for Web and obtain the demo source code.

Demo for desktop browsers

ApsaraVideo Player SDK for web provides an online trial in a visualized manner. You can visit the Online Settings page to experience the trial. You can configure basic playback features and set the user interface (UI). After you complete the configurations, code is generated for the HTML5 player.

Note

The streaming URL must be in the Flash Video (FLV) format rather than in the Real-Time Messaging Protocol (RTMP) format.

The Basic Settings tab includes the following options: Video Type (VOD/live), Playback Method (Play by URL), Playback URL, Cover URL, Width (default: 100%), and Height (default: 500px), along with toggles for features such as autoplay, inline playback, preload, and loop playback. The other tabs are More Settings, Skin Customization, Playback Preview, and Code.

Demo for mobile devices

To obtain the demo for mobile browsers, use the DingTalk app on your mobile device to scan the following QR code.

Important

On Android devices, the internal browsers in WeChat and QQ may modify the settings of ApsaraVideo Player SDK without your authorization or knowledge. In this case, specific features of ApsaraVideo Player SDK cannot be used.

二维码

Feature source code

ApsaraVideo Player SDK for Web offers an online feature showcase that displays features alongside their code implementations. For a detailed list of features and code examples, see the Feature Showcase. The Aliplayer Feature Showcase page has three navigation tabs: Basic Functions (such as cover, delayed playback, screenshots, loop playback, and 4K video), Components and Plugins (such as image ads, marquee, resume playback, Danmu, playback speed control, and subtitle components), and Advanced Functions (such as subtitles, multiple audio tracks, multiple sources, adaptive HLS, internationalization, and custom skins). When the cover feature is selected, the left pane shows a player preview with a cover image, while the right pane displays the corresponding HTML initialization code. This code includes parameters such as source, width, height, cover, autoplay, preload, and isLive. You can click the Copy button to copy the code.

Demo source code for Vue

ApsaraVideo Player SDK for Web provides demo source code for you to integrate the SDK with the Vue framework.

For more information about the demo, see Demo of Vue-based ApsaraVideo Player.

Source code of the React demo

ApsaraVideo Player SDK for Web provides demo source code for you to integrate the SDK with the React framework.

For more information about the demo, see Demo of React-based ApsaraVideo Player.

WeChat mini programs

A WeChat mini program lacks DOM API and BOM API. In this case, specific libraries that are commonly used in frontend development, such as jQuery and Zepto, cannot be loaded in a WeChat mini program. Similarly, ApsaraVideo Player SDK for Web, which relies on the support of browsers, cannot be run in a WeChat mini program. Therefore, you must use the default video component that is provided by a WeChat mini program to play videos. For more information, visit vod-mini-program.

uni-app

You can integrate the player into uni-app using the following code. Because the web player relies on browser-related APIs, it does not support compilation into native apps or mini programs.

Expand to view code

<template>
    <view class="content">
        <view id="player"></view>
    </view>
</template>
<script>
 import Aliplayer from 'aliyun-aliplayer';
 import "aliyun-aliplayer/build/skins/default/aliplayer-min.css";
 export default {
      data() {
         return {}
      },
      mounted() {
         this.player = this.createPlayer();
      },
      methods: {
        createPlayer: () => {
          return new Aliplayer({
               id: 'player',
               source: 'https://player.alicdn.com/video/aliyunmedia.mp4',
               width: '800px',
               autoSize: true,
          });
      },
         // To import components, first load await loadComponent() before initializing the player
     loadComponent() {
          return new Promise((resolve, reject) => {
               const s_tag = document.createElement('script');
               s_tag.type = 'text/javascript';
               // Download the component JS file first and place it in the project's /static/ directory
              // Download address: https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/customComponents/dist/aliplayer-components/aliplayercomponents-1.1.2.min.js
               s_tag.src = './static/aliplayercomponents-1.1.2.min.js';
               s_tag.charset = 'utf-8';
               s_tag.onload = () => {
                   resolve();
               }
                document.body.appendChild(s_tag);
          });
        }
     }
}
</script>
<style>
 .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 }
</style>