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.

You can visit GitHub to download the demo.

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

uni-app is a framework that uses Vue 2 and Vue 3 to develop applications. It is compatible with multiple devices across multiple platforms. ApsaraVideo Player SDK for Web depends on the native Web APIs of browsers and can run only on web clients and app-vue based on renderjs.

You can use only the script tag to integrate ApsaraVideo Player SDK for Web. You can dynamically add tags to integrate uni-app. Sample code:

Show code

<template>
  <view class="container">
    <p>VUE2 Demo</p>
    <div id="url-player-test"></div>
  </view>
</template>
<script>
  export default {
    mounted() {
      // Use the script and link tags to add the CSS file and ApsaraVideo Player SDK for Web package to uni-app.
      this.loadWebPlayerSDK().then(() => {
        // To use custom components, uncomment the following line:
        // this.loadComponent().then(() => {
        let player = new Aliplayer({
          id: "url-player-test",
          source: "//player.alicdn.com/video/aliyunmedia.mp4",
          width: "100%",
          height: "100%",
        }, function (player) {
        });
        player.one('canplay', function () {
          console.log('canplay', player.tag);
          player.tag.play();
        });
        // }).catch((e) => { console.log("Component loading failed", e) })
      }).catch((e) => {
        console.log("Loading of ApsaraVideo Player SDK failed.", e);
      });
    },
    data() {
      return {}
    },
    methods: {
      loadWebPlayerSDK() {
        return new Promise((resolve, reject) => {
          const s_tag = document.createElement('script'); // Add the .js file of the player.
          s_tag.type = 'text/javascript';
          s_tag.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/aliplayer-min.js';
          s_tag.charset = 'utf-8';
          s_tag.onload = () => {
            resolve();
          }
          document.body.appendChild(s_tag);
          const l_tag = document.createElement('link'); // Add the .css file of the player.
          l_tag.rel = 'stylesheet';
          l_tag.href = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/skins/default/aliplayer-min.css';
          document.body.appendChild(l_tag);
        });
      },
      loadComponent() {
        return new Promise((resolve, reject) => {
          const s_tag = document.createElement('script');
          s_tag.type = 'text/javascript';
          // Download the component .js file 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.0.9.min.js
          s_tag.src = './static/aliplayercomponents-1.0.9.min.js';
          s_tag.charset = 'utf-8';
          s_tag.onload = () => {
            resolve();
          }
          document.body.appendChild(s_tag);
        });
      }
    }
  }
</script>
<style>
  .container {
    padding: 20px;
    font-size: 14px;
    height: 800px;
  }
</style>