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 a visualized online trial. You can apply for an online trial on the Online Settings page. You can configure basic playback features and set the UI layout online. After you complete the configurations, code is generated for both the HTML5 player and Flash player.

Note

If you use the HTML5 player to play live streams, the streaming URL must be in the Flash Video (FLV) format. You cannot use streaming URLs that are 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, visit .

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>