Integrasi solusi mini drama - Flutter - ApsaraVideo VOD

Solusi mini drama untuk Flutter dibangun di atas AliPlayerWidget, sebuah komponen integrasi UI untuk Flutter.

Ikhtisar

AliPlayerWidget adalah komponen pemutaran video berkinerja tinggi yang dirancang untuk aplikasi Flutter dan dibangun di atas ApsaraVideo Player SDK (flutter_aliplayer). Komponen ini mendukung berbagai skenario pemutaran, termasuk video sesuai permintaan (VOD), streaming langsung, putar balik daftar, dan mini drama. Komponen ini menyediakan serangkaian fitur kaya serta kemampuan penyesuaian UI yang fleksibel untuk memenuhi kebutuhan berbagai aplikasi seperti pendidikan, hiburan, e-commerce, dan mini drama. Untuk informasi lebih lanjut, lihat Solusi Pemain Flutter dengan Integrasi UI.

aliplayer_widget_example adalah proyek contoh yang dibangun di atas pustaka Flutter aliplayer_widget. Proyek ini dirancang untuk membantu pengembang dengan cepat memahami cara mengintegrasikan dan menggunakan AliPlayerWidget dalam proyek mereka. Proyek ini menunjukkan cara menyiapkan dan menggunakan pemutaran daftar video pendek.

Persyaratan lingkungan

Item	Deskripsi
Versi Flutter	2.10.0 atau lebih baru. Kami merekomendasikan Anda menggunakan versi 3.22.2.
Versi JDK	Kami merekomendasikan Anda menggunakan JDK 11. Catatan Metode konfigurasi JDK 11: Preferences > Build, Execution, Deployment > Build Tools > Gradle > Gradle JDK, pilih 11. Jika JDK 11 tidak tersedia, perbarui Android Studio Anda.
Versi Android	Android 6.0 atau lebih baru. Gradle 7.0 atau lebih baru.
Versi iOS	iOS 10.0 atau lebih baru.
Prosesor ponsel	Arsitektur: armeabi-v7a atau arm64-v8a.
Alat pengembangan	Kami merekomendasikan Anda menggunakan Android Studio atau Visual Studio Code.

Prasyarat

Anda telah memperoleh lisensi Player SDK untuk Edisi Profesional, bersama dengan file otorisasi dan License Key yang sesuai. Untuk informasi lebih lanjut tentang cara mengikat lisensi, lihat Mengikat Lisensi.

Pengalaman demo

Unduh demo

aliplayer_widget bersifat open source dan dapat diunduh menggunakan beberapa metode. Jika Anda ingin menyesuaikan komponen, Anda dapat menggunakan dependensi kode sumber untuk mendapatkan dan memodifikasi kode sumber. Kode sumber lengkap dapat diperoleh melalui metode berikut:

Deskripsi unduhan	Tautan unduhan
Sumber Pub	Sumber Pub resmi: pub.dev Sumber cermin Tiongkok: pub.flutter-io.cn Catatan Kami merekomendasikan agar pengembang mengintegrasikan aliplayer_widget melalui alat 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 pengembang dengan cepat mengintegrasikan dan menggunakan komponen tersebut.
Dokumentasi dan Komentar: Kode sumber mencakup komentar terperinci dan panduan pengembangan untuk pengembangan kustom.

Metode integrasi

Tambahkan Dependensi Secara Manual

Tambahkan dependensi berikut ke file pubspec.yaml Anda:

dependencies:
  aliplayer_widget: ^x.y.z

Catatan

x.y.z mewakili versi dari aliplayer_widget. Anda dapat melihat versi stabil terbaru di halaman resmi Pub.dev dan mengganti x.y.z dengan nilai sebenarnya, seperti ^7.0.0.

Gunakan Antarmuka Baris Perintah

Jika Anda ingin menggunakan antarmuka baris perintah untuk menginstal dependensi, jalankan perintah berikut:

flutter pub add aliplayer_widget

Perintah ini secara otomatis memperbarui file pubspec.yaml Anda.

Tidak peduli metode mana yang Anda pilih, jalankan perintah berikut di terminal untuk menginstal dependensi setelah menambahkannya:

flutter pub get

Setelah Anda melakukan langkah-langkah sebelumnya, AliPlayerWidget diintegrasikan ke dalam proyek Anda, dan Anda dapat mulai menggunakannya.

Kompilasi dan menjalankan

Gunakan antarmuka baris perintah

Klon repositori.
Klon repositori aliplayer_widget_example ke penyimpanan 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
Jika Anda ingin mengompilasi proyek Android, lakukan sub-langkah berikut:
1. Instal Player SDK untuk Android dan Gradle.
2. Jalankan perintah berikut untuk menghasilkan file APK:
```
flutter build apk
```
3. Kompilasi proyek Android. Setelah kompilasi, file APK akan berada di build/app/outputs/flutter-apk/app-release.apk.
Kompilasi proyek iOS
Jika Anda ingin mengompilasi proyek iOS, lakukan sub-langkah berikut:
1. Instal Xcode dan CocoaPods.
2. Inisialisasi dependensi CocoaPods:
```
cd ios && pod install && cd ..
```
3. Jalankan perintah berikut untuk menghasilkan paket aplikasi iOS (file IPA):
```
flutter build ipa
```
4. Kompilasi proyek Android. Setelah kompilasi, file IPA akan berada di build/ios/ipa/Runner.ipa.

Jalankan Demo.

Jalankan demo untuk Android.
```
flutter run lib/main.dart
```

Jalankan demo untuk iOS.

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

flutter run lib/main.dart

Gunakan IDE

Gunakan Android Studio
1. Buka Proyek.
  Mulai Android Studio. Pilih Buka Proyek yang Ada, navigasikan ke direktori aliplayer_widget_example yang diklon, dan buka.
2. Instal Dependensi.
  Di Android Studio, klik file pubspec.yaml, lalu klik tombol Pub Get di pojok kanan atas untuk menginstal dependensi.
3. Konfigurasikan Perangkat.
  Pastikan perangkat Android terhubung.
4. Jalankan Aplikasi.
  Klik tombol hijau Run di bilah alat, pilih perangkat target untuk memulai aplikasi.
Gunakan Visual Studio Code
1. Buka Proyek:
  Luncurkan Visual Studio Code. Pilih File -> Buka Folder, lalu navigasikan ke direktori aliplayer_widget_example yang diklon dan buka.
2. Instal Dependensi:
  Buka terminal dengan menekan Ctrl + ~ dan jalankan perintah berikut untuk menginstal dependensi:
```
flutter pub get
```
3. Konfigurasikan Perangkat:
  Pastikan perangkat fisik Android atau iOS terhubung. Gunakan pemilih perangkat di pojok kiri bawah di Visual Studio Code untuk memilih perangkat target.
4. Jalankan Aplikasi.
  Tekan F5 atau klik ikon Jalankan dan Debug di bilah aktivitas kiri, pilih konfigurasi Flutter, dan mulai sesi debugging.
Gunakan Xcode (hanya untuk iOS)
1. Buka Proyek.
  Navigasikan ke direktori ios, klik dua kali file Runner.xcworkspace untuk membuka proyek di Xcode.
2. Instal Dependensi CocoaPods.
  Jika dependensi CocoaPods belum diinstal, jalankan perintah berikut di terminal:
```
cd ios && pod install && cd ..
```
3. Konfigurasikan Penandatanganan.
  Di Xcode, pilih proyek Runner, masuk ke tab Penandatanganan & Kemampuan, dan konfigurasikan akun pengembang dan sertifikat penandatanganan yang valid.
4. Jalankan Aplikasi.
  Klik tombol jalankan ▶️ di bilah alat Xcode, pilih perangkat target untuk memulai aplikasi.

Penggunaan

Halaman pemutaran daftar video pendek (ShortVideoPage)

Inti dari pemutaran video pendek adalah menyematkan beberapa instance AliPlayerWidget dalam daftar untuk mengaktifkan pemutaran daftar untuk beberapa video. Contoh kode berikut memberikan contoh:

@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 menampilkan daftar video. Setiap item daftar berisi instance pemain terpisah. Anda dapat menggeser untuk beralih antar video.

Catatan

Untuk solusi optimasi lebih lanjut untuk skenario mini-drama, lihat proyek contoh aliplayer_widget_example.

Fitur inti

Komponen ini menggunakan ApsaraVideo Player SDK dan diimplementasikan dengan beberapa instance pemain (AliPlayer), pra-pemuatan (MediaLoader), dan pra-rendering. Ini memanfaatkan kemampuan inti, seperti pra-pemuatan, pra-rendering, HTTPDNS, dan pemutaran terenkripsi, untuk meningkatkan latensi pemutaran, stabilitas, dan keamanan untuk pengalaman menonton yang lebih baik.

Pra-pemuatan

Kebijakan jendela geser secara dinamis memulai dan menghentikan tugas pra-pemuatan video. Lapisan SDK yang mendasarinya secara cerdas menyesuaikan prioritas tugas berdasarkan status jaringan untuk memastikan bahwa lebih banyak sumber daya jaringan dialokasikan untuk video yang sedang diputar atau akan segera diputar. Ini meningkatkan laju pemutaran instan, mengurangi tersendatnya pemutaran, dan memungkinkan pemutaran yang lancar bahkan saat Anda menggeser video dengan cepat. Untuk informasi lebih lanjut, lihat Pra-pemuatan.

Pra-rendering

Pra-rendering merender frame pertama dari video berikutnya di latar belakang. Ini mengurangi layar hitam dan memastikan pemutaran yang lebih lancar. Apsara Video SDK dan ApsaraVideo Player SDK telah mendukung pra-rendering paksa sejak versi 6.16.0. Untuk informasi lebih lanjut, lihat Pra-rendering.

HTTPDNS

HTTPDNS menyediakan layanan resolusi Domain Name System (DNS) yang lebih cepat dan stabil. Dengan menggantikan resolusi DNS tradisional, HTTPDNS mengurangi waktu resolusi DNS dan meningkatkan kecepatan dan stabilitas pemuatan pemutaran video, yang meningkatkan pengalaman menonton pengguna. HTTPDNS diaktifkan secara default di Apsara Video SDK dan ApsaraVideo Player SDK versi 6.12.0 dan yang lebih baru. Untuk informasi lebih lanjut, lihat HTTPDNS.

Enkripsi video

Video dalam skenario mini drama biasanya adalah file MP4 dengan durasi 1 hingga 3 menit. Untuk memberikan keamanan pada video ini, Apsara Video SDK dan ApsaraVideo Player SDK telah mendukung enkripsi privat untuk pemutaran MP4 sejak versi 6.8.0. Untuk informasi lebih lanjut, lihat Enkripsi Video Alibaba Cloud (enkripsi privat).

Video MP4 yang dienkripsi secara privat harus memenuhi kondisi berikut untuk pemutaran:

Saat melewati video MP4 yang dienkripsi secara privat ke pemain, aplikasi harus menambahkan etavirp_nuyila=1 ke URL video. Sebagai contoh, jika URL video asli adalah https://example.aliyundoc.com/test.mp4, URL yang dilewatkan ke pemain harus menjadi https://example.aliyundoc.com/test.mp4?etavirp_nuyila=1.
UID lisensi aplikasi harus sama dengan UID yang digunakan untuk mengenkripsi privat file MP4.

Anda dapat menggunakan metode berikut untuk memverifikasi bahwa video dienkripsi secara privat:

Informasi meta video harus berisi tag AliyunPrivateKeyUri.
Video tidak dapat diputar secara langsung menggunakan ffplay.

Pemutaran adaptif H.265

Jika dekode perangkat keras untuk aliran H.265 gagal, pemain secara otomatis beralih ke aliran cadangan H.264 jika telah dikonfigurasi. Jika tidak ada aliran cadangan H.264 yang tersedia, pemain akan menggunakan dekode perangkat lunak untuk aliran H.265. Untuk informasi lebih lanjut, lihat Pemutaran Adaptif H.265.

ABR Adaptif

SDK pemain mendukung streaming bitrate adaptif untuk aliran video HLS dan DASH. Anda dapat menggunakan metode selectTrack pada pemain untuk beralih antar aliran yang sedang diputar. Fitur ini memungkinkan implementasi switching kualitas video secara adaptif berdasarkan kondisi jaringan. Untuk detail lebih lanjut, lihat Switching adaptif jaringan.

FAQ

Untuk pertanyaan yang sering diajukan dan tips pemecahan masalah terkait ApsaraVideo Player SDK, lihat FAQ Pemain.