Build a Flutter Short Video App with Mini Drama SDK-ApsaraVideo VOD-Alibaba Cloud - ApsaraVideo VOD

Solusi mini-drama untuk Flutter menggunakan AliPlayerWidget, sebuah komponen terintegrasi UI.

Ikhtisar

AliPlayerWidget adalah komponen pemutaran video berkinerja tinggi yang dirancang untuk aplikasi Flutter, dibangun di atas SDK ApsaraVideo Player (flutter_aliplayer). Komponen ini mendukung berbagai skenario pemutaran, termasuk video sesuai permintaan (VOD), streaming langsung, putar balik daftar, dan mini-drama. Fitur lengkap serta kustomisasi UI yang fleksibel menjadikannya ideal untuk berbagai aplikasi seperti pendidikan, hiburan, e-commerce, dan mini-drama. Untuk informasi lebih lanjut, lihat Solusi Integrasi UI Pemutar Flutter.

aliplayer_widget_example adalah proyek contoh yang dibangun dengan pustaka Flutter aliplayer_widget. Proyek ini membantu pengembang memahami dengan cepat cara mengintegrasikan dan menggunakan AliPlayerWidget dalam proyek dunia nyata, termasuk menyiapkan dan menggunakan putar balik daftar video pendek.

Persyaratan lingkungan

Kategori	Deskripsi
Versi Flutter	2.10.0 atau yang lebih baru. Kami merekomendasikan Anda menggunakan versi 3.22.2.
Versi JDK	Gunakan JDK 11. Catatan Untuk mengatur versi JDK ke 11, buka Preferences > Build, Execution, Deployment > Build Tools > Gradle > Gradle JDK dan pilih versi 11. Jika versi 11 tidak tersedia, lakukan upgrade Android Studio Anda.
Versi Android	Android 6.0 atau yang lebih baru. Gradle 7.0 atau yang lebih baru.
Versi iOS	iOS 10.0 atau yang lebih baru.
Chip ponsel	Arsitektur: armeabi-v7a atau arm64-v8a.
Tool pengembangan	Gunakan Android Studio atau Visual Studio Code.

Prasyarat

Anda telah memperoleh lisensi SDK Pemutar dan kunci lisensinya. Untuk petunjuk cara mengikat lisensi ke aplikasi Anda, lihat Bind a license.

Di Konsol ApsaraVideo VOD, buka SDK Management > My Authorizations di panel navigasi kiri. Pada tab License Management, salin license key dan klik Download Certificate untuk mengunduh file lisensi.

Coba demo

Unduh demo

aliplayer_widget bersifat open source. Anda dapat memperoleh kode sumber lengkap dengan salah satu cara berikut dan memodifikasinya untuk menyesuaikan komponen:

Metode unduh	Tautan unduh
Sumber Pub	Sumber Pub resmi: pub.dev Sumber mirror Tiongkok: pub.flutter-io.cn Catatan Kami merekomendasikan Anda mengintegrasikan aliplayer_widget menggunakan tool manajemen paket.
Sumber Pub
GitHub	Repositori GitHub
Paket kode sumber	aliplayer_widget.zip

Paket yang diunduh mencakup:

Komponen inti: Implementasi lengkap dari AliPlayerWidget dan AliPlayerWidgetController.
Proyek contoh: aliplayer_widget_example menyediakan contoh kode untuk skenario seperti VOD, streaming langsung, dan putar balik daftar untuk membantu Anda mengintegrasikan dan menggunakan komponen dengan cepat.
Dokumentasi dan komentar: Kode sumber mencakup komentar detail dan panduan pengembangan untuk pengembangan kustom.

Integrasi

Tambahkan dependensi secara manual

Tambahkan dependensi berikut ke file pubspec.yaml Anda:

dependencies:
  aliplayer_widget: ^x.y.z

Catatan

Catatan: x.y.z merepresentasikan nomor versi aliplayer_widget. Anda dapat melihat versi stabil terbaru di halaman resmi Pub.dev dan ganti x.y.z dengan nomor versi aktual, misalnya ^7.0.0.

Gunakan alat baris perintah

Jika Anda lebih suka menggunakan command line, jalankan perintah berikut untuk menambahkan dependensi:

flutter pub add aliplayer_widget

Perintah ini secara otomatis memperbarui file pubspec.yaml Anda.

Setelah menambahkan dependensi, jalankan perintah berikut di terminal untuk menginstalnya:

flutter pub get

Setelah langkah-langkah ini selesai, AliPlayerWidget telah terintegrasi ke dalam proyek Anda. Anda kini dapat mulai menggunakannya.

Kompilasi dan jalankan proyek

Jalankan dari command line

Klon repositori.

Pertama, klon repositori aliplayer_widget_example ke mesin lokal Anda:
```
cd aliplayer_widget_example
```
Instal dependensi.

Jalankan perintah berikut untuk menginstal dependensi yang diperlukan untuk proyek:
```
flutter pub get
```
Kompilasi proyek.
Kompilasi proyek Android

Untuk mengompilasi proyek Android, lakukan langkah-langkah berikut:
1. Pastikan Anda telah menginstal Android SDK dan Gradle.
2. Jalankan perintah berikut untuk menghasilkan file APK:
```
flutter build apk
```
3. Setelah kompilasi selesai, file APK berada di build/app/outputs/flutter-apk/app-release.apk.
Kompilasi proyek iOS

Untuk mengompilasi proyek iOS, lakukan langkah-langkah berikut:
1. Pastikan Anda telah menginstal Xcode dan CocoaPods.
2. Inisialisasi dependensi CocoaPods:
```
cd ios && pod install && cd ..
```
3. Jalankan perintah berikut untuk menghasilkan file paket aplikasi iOS (IPA):
```
flutter build ipa
```
4. Setelah kompilasi selesai, file IPA berada di build/ios/ipa/Runner.ipa.

Jalankan contoh.

Jalankan contoh Android.
```
flutter run lib/main.dart
```

Jalankan contoh iOS.

cd ios && pod install && cd ..//Jalankan pod install terlebih dahulu.

flutter run lib/main.dart

Jalankan dari IDE

Gunakan Android Studio
1. Buka proyek.
  
  Jalankan Android Studio. Pilih Open an Existing Project, lalu buka direktori aliplayer_widget_example yang telah diklon.
2. Instal dependensi.
  
  Di Android Studio, klik file pubspec.yaml, lalu klik tombol Pub Get di pojok kanan atas untuk menginstal dependensi.
3. Konfigurasi perangkat.
  
  Pastikan perangkat fisik Android terhubung.
4. Jalankan aplikasi.
  
  Klik tombol run berwarna hijau (Run) di bilah alat dan pilih perangkat target untuk menjalankan aplikasi.
Gunakan VS Code
1. Buka proyek.
  
  Jalankan VS Code. Pilih File -> Open Folder dan buka direktori aliplayer_widget_example yang telah diklon.
2. Instal dependensi.
  
  Buka terminal (Ctrl + ~) dan jalankan perintah berikut untuk menginstal dependensi:
```
flutter pub get
```
3. Konfigurasi perangkat.
  
  Pastikan perangkat fisik Android atau iOS terhubung. Gunakan pemilih perangkat di pojok kiri bawah VS Code untuk memilih perangkat target.
4. Jalankan aplikasi.
  
  Tekan F5 atau klik ikon Run and Debug di Activity Bar sebelah kiri. Pilih konfigurasi Flutter dan mulai sesi debugging.
Gunakan Xcode (iOS saja)
1. Buka proyek.
  
  Buka direktori ios dan klik dua kali file Runner.xcworkspace untuk membuka proyek di Xcode.
2. Instal dependensi CocoaPods.
  
  Jika dependensi CocoaPods belum terinstal, jalankan perintah berikut di terminal:
```
cd ios && pod install && cd ..
```
3. Konfigurasi signature.
  
  Di Xcode, pilih proyek Runner, buka tab Signing & Capabilities, lalu konfigurasikan akun developer dan sertifikat signing yang valid.
4. Jalankan aplikasi.
  
  Klik tombol run (▶️) di bilah alat Xcode dan pilih perangkat target untuk menjalankan aplikasi.

Penggunaan

Putar balik daftar video pendek (ShortVideoPage)

Bagian ini menunjukkan cara mencapai putar balik daftar dengan menyematkan beberapa instans AliPlayerWidget dalam daftar. Berikut adalah contohnya:

@override
void initState() {
  super.initState();
  _pageController = PageController();
  _loadVideoInfoList();
  _pageController.addListener(_onPageChanged);
}
Widget build(BuildContext context) {
  return Scaffold(
    body: PageView.builder(
      controller: _pageController,
      itemCount: videoInfoList.length,
      itemBuilder: (context, index) {
        final videoInfo = videoInfoList[index];
        return ShortVideoItem(videoInfo: videoInfo);
      },
    ),
  );
}

Hasil: Halaman saat ini menampilkan daftar video di mana setiap item daftar berisi instans pemutar terpisah. Pengguna dapat menggeser untuk beralih antar video dan menggunakan gerakan untuk navigasi.

Catatan

Untuk solusi optimasi tambahan yang disesuaikan dengan skenario mini-drama, lihat implementasi spesifik dalam proyek contoh aliplayer_widget_example.

Fitur inti

Komponen ini menggunakan SDK ApsaraVideo Player untuk mengimplementasikan beberapa instans pemutar (AliPlayer) yang dikombinasikan dengan preloading (MediaLoader) dan pre-rendering. Komponen ini menggabungkan fitur inti seperti preloading, pre-rendering, HTTPDNS, dan pemutaran terenkripsi untuk meningkatkan latensi pemutaran, stabilitas, dan keamanan.

Preloading

Strategi jendela geser secara dinamis memulai dan menghentikan tugas preloading video. SDK dasar secara cerdas menyesuaikan prioritas tugas berdasarkan kondisi jaringan untuk memprioritaskan sumber daya jaringan bagi video yang sedang diputar dan video berikutnya, yang secara signifikan meningkatkan kecepatan loading frame pertama dan mengurangi tersendat saat pemutaran. Anda dapat menikmati pengalaman pemutaran yang lancar bahkan saat menggeser video dengan cepat. Untuk informasi lebih lanjut, lihat Preloading.

Pre-rendering

Pre-rendering melakukan rendering frame pertama video berikutnya di latar belakang untuk mengurangi layar hitam dan membuat pemutaran lebih lancar. SDK ApsaraVideo untuk MediaBox dan SDK Pemutar telah mendukung fitur pre-rendering paksa sejak versi 6.16.0. Untuk informasi lebih lanjut, lihat Pre-rendering.

HTTPDNS

HTTPDNS menyediakan layanan resolusi DNS yang lebih cepat dan stabil. Layanan ini menggantikan resolusi DNS tradisional untuk mengurangi waktu resolusi DNS, meningkatkan kecepatan loading dan stabilitas pemutaran video, serta meningkatkan pengalaman menonton pengguna. Anda tidak perlu mengaktifkan HTTPDNS secara manual untuk SDK Klien Audio dan Video serta SDK Pemutar untuk versi 6.12.0 dan yang lebih baru. Untuk informasi lebih lanjut, lihat HTTPDNS.

Enkripsi video

Video dalam skenario mini-drama biasanya berupa file MP4 berdurasi 1 hingga 3 menit. Sejak versi 6.8.0, SDK ApsaraVideo untuk MediaBox dan SDK ApsaraVideo Player mendukung enkripsi privat untuk file MP4, yang mengamankan konten video mini-drama. Untuk informasi lebih lanjut, lihat Enkripsi video Alibaba Cloud (enkripsi privat).

Memutar video MP4 terenkripsi privat memerlukan hal berikut:

Saat meneruskan URL video MP4 terenkripsi privat ke pemutar, aplikasi Anda harus menambahkan parameter kueri etavirp_nuyila=1. Misalnya, jika URL video aslinya adalah https://example.aliyundoc.com/test.mp4, maka URL yang diteruskan ke pemutar harus berupa https://example.aliyundoc.com/test.mp4?etavirp_nuyila=1.
UID yang terkait dengan lisensi aplikasi harus sesuai dengan UID yang digunakan untuk menghasilkan file MP4 terenkripsi privat.

Anda dapat memverifikasi konfigurasi video terenkripsi privat dengan memeriksa URL-nya untuk hal berikut:

Metadata video harus berisi tag AliyunPrivateKeyUri.
Video tidak dapat diputar langsung dengan ffplay.

Pemutaran adaptif H.265

Saat decoding hardware aliran H.265 gagal, pemutar secara otomatis beralih ke aliran fallback H.264 jika telah dikonfigurasi. Jika tidak tersedia fallback H.264, pemutar secara otomatis beralih ke decoding software H.265. Untuk informasi lebih lanjut, lihat Pemutaran adaptif H.265.

Streaming bitrate adaptif (ABR)

SDK ApsaraVideo Player mendukung aliran video HLS dan DASH multi-bitrate adaptif. Anda dapat mengimplementasikan switching adaptif jaringan dengan memanggil metode selectTrack pemutar untuk beralih antar bitrate. Untuk informasi lebih lanjut, lihat Network-adaptive switching.

FAQ

Untuk pertanyaan umum dan saran troubleshooting SDK ApsaraVideo Player lebih lanjut, lihat Player FAQ.