Demo and source code of ApsaraVideo Player SDK for Web - ApsaraVideo 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.

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

You can use the features of ApsaraVideo Player SDK for Web and view the corresponding source code on the Functions page of the Aliplayer website. For more information about the basic features, components, and advanced features, visit the Functions page. 功能展示

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

ApsaraVideo Player SDK for Web relies on browser-related APIs. If you want to compile a uni-app project into a native app, you can enable the RenderJS mode. Before you enable the RenderJS mode, read the uni-app instructions on RenderJS, and pay attention to the impact of this mode on your project: https://en.uniapp.dcloud.io/tutorial/renderjs.html

Show code

<template>
    <view class="content">
        <view id="player"></view>
    </view>
</template>
<!--If you want to compile the uni-app to the app platform, enable the RenderJS mode-->
<!-- <script module="player" lang="renderjs"> -->
<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 introduce a component, load await loadComponent() and initialize the player.
     loadComponent() {
          return new Promise((resolve, reject) => {
               const s_tag = document.createElement('script');
               s_tag.type = 'text/javascript';
               // Download the .js file of the component and store the file in the /static/ directory of the project.
              // Download URL: 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>