Demo dan kode sumber ApsaraVideo Player untuk Web - ApsaraVideo VOD

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

Demo untuk browser desktop

SDK ApsaraVideo Player untuk Web menyediakan uji coba online secara visual. Anda dapat mengunjungi halaman Online Settings untuk mencoba fitur tersebut. Anda dapat mengonfigurasi fitur pemutaran dasar dan menyesuaikan antarmuka pengguna (UI). Setelah konfigurasi selesai, kode untuk pemutar HTML5 akan dihasilkan.

Catatan

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

Tab Basic Settings mencakup opsi berikut: Jenis Video (VOD/live), Metode Pemutaran (Play by URL), URL Pemutaran, URL Sampul, Lebar (default: 100%), dan Tinggi (default: 500px), serta tombol aktif/nonaktif untuk fitur seperti autoplay, inline playback, preload, dan loop playback. Tab lainnya adalah More Settings, Skin Customization, Playback Preview, dan Code.

Demo untuk perangkat seluler

Untuk memperoleh 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 dapat mengubah pengaturan SDK ApsaraVideo Player tanpa otorisasi atau sepengetahuan Anda. Dalam kasus ini, fitur tertentu dari SDK ApsaraVideo Player tidak dapat digunakan.

二维码

Kode sumber fitur

SDK ApsaraVideo Player untuk Web menyediakan tampilan fitur online yang menampilkan fitur beserta implementasi kodenya. Untuk daftar lengkap fitur dan contoh kode, lihat Feature Showcase. Halaman Aliplayer Feature Showcase memiliki tiga tab navigasi: Basic Functions (seperti sampul, pemutaran tertunda, tangkapan layar, loop playback, dan video 4K), Components and Plugins (seperti iklan gambar, marquee, resume playback, Danmu, pengatur kecepatan pemutaran, dan komponen subtitle), dan Advanced Functions (seperti subtitle, multiple audio tracks, multiple sources, adaptive HLS, internationalization, dan custom skins). Saat fitur cover dipilih, panel kiri menampilkan pratinjau pemutar dengan gambar sampul, sedangkan panel kanan menampilkan kode inisialisasi HTML yang sesuai. Kode ini mencakup parameter seperti source, width, height, cover, autoplay, preload, dan isLive. Anda dapat mengklik tombol Copy untuk menyalin kode tersebut.

Kode sumber demo untuk Vue

SDK ApsaraVideo Player untuk Web menyediakan kode sumber demo agar Anda dapat mengintegrasikan SDK dengan framework Vue.

Untuk informasi lebih lanjut tentang demo tersebut, lihat Demo ApsaraVideo Player berbasis Vue.

Kode sumber demo React

SDK ApsaraVideo Player untuk Web menyediakan kode sumber demo agar Anda dapat mengintegrasikan SDK dengan framework React.

Untuk informasi lebih lanjut tentang demo tersebut, lihat Demo ApsaraVideo Player berbasis React.

Mini program WeChat

Mini program WeChat tidak memiliki DOM API dan BOM API. Dalam kondisi ini, library frontend umum seperti jQuery dan Zepto tidak dapat dimuat di mini program WeChat. Demikian pula, SDK ApsaraVideo Player untuk Web yang bergantung pada dukungan browser tidak dapat dijalankan di mini program WeChat. Oleh karena itu, Anda harus menggunakan komponen video default yang disediakan oleh mini program WeChat untuk memutar video. Untuk informasi lebih lanjut, kunjungi vod-mini-program.

uni-app

Anda dapat mengintegrasikan pemutar ke dalam uni-app menggunakan kode berikut. Namun, karena pemutar web bergantung pada API browser, pemutar ini tidak mendukung kompilasi ke dalam aplikasi native atau mini program.

Klik untuk melihat 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 muat await loadComponent() sebelum menginisialisasi pemutar
     loadComponent() {
          return new Promise((resolve, reject) => {
               const s_tag = document.createElement('script');
               s_tag.type = 'text/javascript';
               // Unduh file JS komponen terlebih dahulu dan letakkan di direktori /static/ proyek
              // Alamat 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>