全部产品
Search
文档中心

ApsaraVideo VOD:Uji coba online dan kode sumber demo

更新时间:Nov 10, 2025

Topik ini menjelaskan cara mengajukan uji coba online SDK Pemutar ApsaraVideo untuk Web dan mendapatkan kode sumber demo.

Demo untuk browser desktop

SDK Pemutar ApsaraVideo untuk Web menyediakan uji coba online secara visual. Anda dapat mengunjungi halaman Pengaturan Online untuk mencoba uji coba tersebut. Anda dapat mengonfigurasi fitur pemutaran dasar dan menyetel antarmuka pengguna (UI). Setelah menyelesaikan konfigurasi, kode akan dibuat untuk pemain HTML5.

Catatan

URL streaming harus dalam format Flash Video (FLV), bukan Real-Time Messaging Protocol (RTMP).

配置

Demo untuk perangkat seluler

Untuk mendapatkan demo untuk browser seluler, gunakan aplikasi DingTalk di perangkat seluler Anda untuk memindai kode QR berikut.

Penting

Pada perangkat Android, browser internal di WeChat dan QQ mungkin mengubah pengaturan SDK Pemutar ApsaraVideo tanpa otorisasi atau pengetahuan Anda. Dalam hal ini, beberapa fitur dari SDK Pemutar ApsaraVideo tidak dapat digunakan.

二维码

Kode sumber fitur

Anda dapat menggunakan fitur-fitur SDK Pemutar ApsaraVideo untuk Web dan melihat kode sumber yang sesuai di halaman Fungsi situs web Aliplayer. Untuk informasi lebih lanjut tentang fitur dasar, komponen, dan fitur lanjutan, kunjungi halaman Fungsi.功能展示

Kode sumber demo untuk Vue

SDK Pemutar ApsaraVideo untuk Web menyediakan kode sumber demo untuk mengintegrasikan SDK dengan kerangka kerja Vue.

Untuk informasi lebih lanjut tentang demo, lihat Demo Pemutar ApsaraVideo Berbasis Vue.

Kode sumber demo React

SDK Pemutar ApsaraVideo untuk Web menyediakan kode sumber demo untuk mengintegrasikan SDK dengan kerangka kerja React.

Untuk informasi lebih lanjut tentang demo, lihat Demo Pemutar ApsaraVideo Berbasis React.

Program mini WeChat

Program mini WeChat tidak memiliki API DOM dan API BOM. Oleh karena itu, pustaka tertentu yang biasa digunakan dalam pengembangan frontend, seperti jQuery dan Zepto, tidak dapat dimuat di program mini WeChat. Demikian pula, SDK Pemutar ApsaraVideo untuk Web, yang bergantung pada dukungan browser, tidak dapat dijalankan di program mini WeChat. Sebagai solusi, Anda harus menggunakan komponen video default yang disediakan oleh program mini WeChat untuk memutar video. Untuk informasi lebih lanjut, kunjungi vod-mini-program.

uni-app

Anda dapat menggunakan kode berikut untuk mengintegrasikan pemutar ke dalam uni-app. Namun, karena SDK Pemutar ApsaraVideo untuk Web bergantung pada API yang terkait dengan browser, SDK ini tidak dapat dikompilasi untuk dijalankan sebagai aplikasi native atau program mini.

Tampilkan kode

<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,
          });
      },
         // Untuk mengimpor komponen, pertama-tama panggil await loadComponent() lalu inisialisasi pemutar.
     loadComponent() {
          return new Promise((resolve, reject) => {
               const s_tag = document.createElement('script');
               s_tag.type = 'text/javascript';
               // Unduh file .js komponen dan letakkan di folder /static/ proyek Anda.
              // URL unduh: 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>