ApsaraVideo VOD：Pemutar Flutter dengan integrasi UI

aliplayer_widget bersifat open source dan tersedia untuk diunduh. Untuk menyesuaikan komponen, Anda dapat memperoleh dan memodifikasi kode sumbernya. Anda dapat memperoleh kode sumber lengkap melalui salah satu cara berikut:

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 guna membantu Anda mengintegrasikan dan menggunakan komponen secara cepat.

• Dokumentasi dan komentar: Kode sumber mencakup komentar rinci 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

Gunakan tool command-line

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 tersebut selesai, AliPlayerWidget telah terintegrasi ke dalam proyek Anda. Anda kini dapat mulai menggunakannya.

Memutar video

Contoh berikut menunjukkan cara menyematkan pemutar video di halaman. Anda dapat memutar video hanya dengan beberapa baris kode.

import 'package:flutter/material.dart';
import 'package:aliplayer_widget/aliplayer_widget_lib.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: VideoPlayerPage(),
    );
  }
}

class VideoPlayerPage extends StatefulWidget {
  @override
  _VideoPlayerPageState createState() => _VideoPlayerPageState();
}

class _VideoPlayerPageState extends State<VideoPlayerPage> {
  late AliPlayerWidgetController _controller;

  @override
  void initState() {
    super.initState();
    // Inisialisasi controller komponen pemutar.
    _controller = AliPlayerWidgetController(context);
    // Konfigurasikan data komponen pemutar.
    final data = AliPlayerWidgetData(
      videoUrl: "https://example.com/video.mp4", // Ganti dengan URL video aktual.
      coverUrl: "https://example.com/cover.jpg", // Ganti dengan URL gambar mini aktual.
      videoTitle: "Sample Video",
    );
    _controller.configure(data); // Atur putar otomatis.
  }

  @override
  void dispose() {
    // Hapus instans pemutar dan lepaskan resource.
    _controller.destroy();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AliPlayerWidget(
          _controller,
        ),
      ),
    );
  }
}

Dukungan untuk skenario lainnya

Contoh di atas menunjukkan penggunaan dasar dalam skenario VOD. Untuk mempelajari skenario yang lebih kompleks, seperti streaming langsung dan putar balik daftar, lihat proyek contoh aliplayer_widget_example. Proyek tersebut berisi kode dan instruksi detail.

Kompilasi dan jalankan proyek

Deskripsi contoh

Proyek aliplayer_widget_example mencakup berbagai skenario. Proyek ini mendemonstrasikan fitur inti AliPlayerWidget dan penerapannya. Baik Anda membutuhkan halaman pemutaran VOD dasar, halaman streaming langsung yang kompleks, maupun halaman putar balik daftar video pendek, proyek contoh ini membantu Anda mempelajari cara mengintegrasikan dan menggunakan komponen secara cepat. Anda juga dapat menyesuaikan proyek sesuai kebutuhan.

@override
void initState() {
  super.initState();
  _controller = AliPlayerWidgetController(context);
  final data = AliPlayerWidgetData(
    videoUrl: "https://example.com/sample-video.mp4",
    coverUrl: "https://example.com/sample-cover.jpg",
    videoTitle: "Judul Video Contoh",
  );
  _controller.configure(data);
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: AliPlayerWidget(_controller),
  );
}

@override
void initState() {
  super.initState();
  _controller = AliPlayerWidgetController(context);
  final data = AliPlayerWidgetData(
    videoUrl: "https://example.com/live-stream.m3u8",
    sceneType: SceneType.live,
  );
  _controller.configure(data);
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        Expanded(child: AliPlayerWidget(_controller)),
        _buildChatArea(),
        _buildMessageInput(),
      ],
    ),
  );
}

Untuk informasi tentang cara menggunakan putar balik daftar untuk video pendek, lihat Integrasikan solusi mini-drama untuk Flutter.

AliPlayerWidget

AliPlayerWidget adalah komponen pemutar inti yang digunakan untuk menyematkan dan memutar video dalam aplikasi Flutter.

Konstruktor

AliPlayerWidget(
  AliPlayerWidgetController controller, {
  Key? key,
  List<Widget> overlays = const [],
});

Contoh

AliPlayerWidget(
  _controller,
  overlays: [
    Positioned(
      right: 16,
      bottom: 80,
      child: Column(
        children: [
          IconButton(icon: Icon(Icons.favorite), onPressed: () {}),
          IconButton(icon: Icon(Icons.share), onPressed: () {}),
        ],
      ),
    ),
  ],
);

AliPlayerWidgetController

AliPlayerWidgetController adalah controller inti komponen pemutar. Controller ini digunakan untuk mengelola logika inisialisasi, pemutaran, dan penghapusan komponen pemutar.

Metode

Contoh

// Inisialisasi controller komponen pemutar.
final controller = AliPlayerWidgetController(context);

// Tetapkan data komponen pemutar.
AliPlayerWidgetData data = AliPlayerWidgetData(
  videoUrl: "https://example.com/video.mp4",
);
controller.configure(data);

// Hapus pemutar.
controller.destroy();

AliPlayerWidgetData

AliPlayerWidgetData adalah model data yang diperlukan oleh komponen pemutar. Model ini berisi URL video, gambar mini, judul, dan informasi lainnya.

Properti

Contoh

AliPlayerWidgetData(
  videoUrl: "https://example.com/video.mp4",
  coverUrl: "https://example.com/cover.jpg",
  videoTitle: "Video Contoh",
  sceneType: SceneType.vod,
);

Properti SceneType

Berikut adalah contohnya:

_controller = AliPlayerWidgetController(context);
// Tetapkan data komponen pemutar.
final data = AliPlayerWidgetData(
  sceneType: SceneType.vod
);
_controller.configure(data);

Komponen overlay

Anda dapat menggunakan parameter overlays untuk dengan mudah menimpa komponen UI kustom, seperti tombol Like, Comment, dan Share, pada pemutar.

AliPlayerWidget(
  _controller,
  overlays: [
    Positioned(
      right: 16,
      bottom: 80,
      child: Column(
        children: [
          IconButton(icon: Icon(Icons.favorite), onPressed: () {}),
          IconButton(icon: Icon(Icons.comment), onPressed: () {}),
          IconButton(icon: Icon(Icons.share), onPressed: () {}),
        ],
      ),
    ),
  ],
);

Pemanggilan API umum

AliPlayerWidget menyediakan serangkaian pemanggilan API eksternal yang memungkinkan Anda mengontrol perilaku pemutar secara langsung. API ini diekspos melalui AliPlayerWidgetController dan mendukung kontrol pemutaran, kueri status, pembaruan data, dan fitur lainnya. Berikut adalah beberapa pemanggilan API eksternal umum beserta skenarionya:

Konfigurasi dan Inisialisasi

Kontrol Pemutaran

Pengaturan properti pemutaran

Pengaturan Lainnya

Sistem slot

Ikhtisar
AliPlayerWidget menyediakan sistem slot yang fleksibel yang mendukung kustomisasi antarmuka pemutar secara detail halus. Anda dapat menggabungkan atau mengganti komponen UI secara bebas untuk menciptakan pengalaman pemutaran yang bermerek, spesifik skenario, atau minimalis.

Jenis slot
Slot-slot area interaktif inti berikut telah tersedia:

Gunakan antarmuka default

Jika Anda tidak mengonfigurasi builder slot, UI lengkap akan dimuat secara default. Ini cocok untuk skenario pemutaran standar.

Widget _buildPlayWidget() {
  return AliPlayerWidget(_controller);
}

Kustomisasi slot tertentu

Anda dapat menyesuaikan komponen tertentu sesuai kebutuhan dan mempertahankan sisanya sebagai default untuk mengurangi biaya pemeliharaan.

AliPlayerWidget(
  controller,
  slotBuilders: {
    SlotType.topBar: (context) => MyAppTopBar(title: 'My Video'),
    SlotType.bottomBar: (context) => MyCustomControls(),
  },
)

Kustomisasi semua slot

AliPlayerWidget(
  controller,
  slotBuilders: {
    SlotType.topBar: (context) => CustomTop(),
    SlotType.bottomBar: (context) => CustomBottom(),
    SlotType.playControl: (context) => GestureHandler(),
    SlotType.coverImage: (context) => BrandCover(),
    SlotType.playState: (context) => ErrorOverlay(),
    SlotType.centerDisplay: (context) => VolumeIndicator(),
    SlotType.seekThumbnail: (context) => PreviewThumb(),
    SlotType.subtitle: (context) => SubtitleView(),
    SlotType.settingMenu: (context) => MySettings(),
    SlotType.overlays: (context) => [AdBanner(), Watermark()],
  },
)

Sembunyikan slot tertentu

Tetapkan nilai slot ke null untuk menyembunyikan area yang sesuai.

AliPlayerWidget(
  controller,
  slotBuilders: {
    SlotType.topBar: null,        // Sembunyikan bilah atas.
    SlotType.settingMenu: null,   // Sembunyikan menu pengaturan.
    SlotType.centerDisplay: null, // Nonaktifkan prompt umpan balik gestur.
  },
)

Berikut adalah contoh lengkapnya:

// Sembunyikan bilah atas dan bawah untuk antarmuka yang lebih bersih.
AliPlayerWidget(controller, slotBuilders: {
  SlotType.topBar: null,
  SlotType.bottomBar: null,
});

// Tambahkan overlay bisnis kustom.
AliPlayerWidget(controller, slotBuilders: {
  SlotType.overlays: (context) => MyLikeShareButtons(),
});

// Buat antarmuka pengguna yang sepenuhnya bermerek.
AliPlayerWidget(controller, slotBuilders: {
  SlotType.topBar: (context) => MyAppTopBar(),
  SlotType.bottomBar: (context) => MyAppBottomBar(),
  SlotType.settingMenu: null, // Sembunyikan pengaturan.
});

Adaptasi multi-skenario

Mendukung berbagai skenario, seperti VOD, streaming langsung, putar balik daftar, dan pemutaran layar penuh.

Rangkaian fitur yang kaya

• Fitur dasar: Menyediakan fitur inti seperti kontrol pemutaran, panel pengaturan, tampilan gambar mini, dan pergantian definisi untuk memenuhi kebutuhan pemutaran video standar.

• Kontrol gestur: Mendukung kontrol gestur untuk kecerahan, volume, dan progress pemutaran. Ini memberikan pengalaman pengguna yang intuitif dan nyaman.

Penyesuaian UI yang fleksibel

• Dukungan overlay: Mendukung komponen overlay kustom untuk ekstensibilitas tinggi. Ini memungkinkan Anda mengimplementasikan fitur kompleks seperti iklan dan komentar langsung.

• Desain modular: Menyediakan komponen UI bawaan yang dapat digunakan kembali, seperti bilah atas, bilah bawah, dan panel pengaturan, untuk memfasilitasi pengembangan kustom.

• Adaptasi layar penuh: Secara otomatis beradaptasi dengan pergantian mode landscape dan portrait untuk memastikan efek tampilan optimal di berbagai perangkat.

Manajemen acara dan status

• Pemantauan status real-time: Menyediakan pembaruan data real-time untuk status pemutaran, dimensi video, dan progress buffer untuk memfasilitasi interaksi dinamis.

• Mekanisme callback event: Menyediakan listener event komprehensif untuk pemutar, termasuk manajemen status untuk mulai, jeda, dan selesai pemutaran. Ini membantu Anda mengelola berbagai skenario pemutaran.

• Dukungan logging dan debugging: Menyediakan sistem logging detail untuk memfasilitasi troubleshooting dan optimasi performa.

Mudah digunakan

Anda dapat mengimplementasikan fitur pemutaran video kompleks dan mengintegrasikannya ke dalam proyek Flutter Anda secara cepat dengan melakukan pemanggilan API sederhana.

Fleksibel dan dapat diperluas

• Desain modular mendukung berbagai opsi kustom untuk memfasilitasi pengembangan kustom.

• Beradaptasi secara otomatis dengan berbagai ukuran layar dan resolusi untuk memastikan pengalaman pengguna yang konsisten.

Kinerja tinggi dan stabilitas

• Dibangun di atas SDK ApsaraVideo Player, menyediakan pengalaman pemutaran video berlatensi rendah dan sangat stabil.

• Arsitektur yang dioptimalkan, komponen ringan, pemuatan asinkron, dan model berbasis event memastikan operasi efisien dan pengalaman pengguna yang lancar.

Dukungan lintas platform

Memanfaatkan kemampuan lintas platform Flutter untuk mendukung Android dan iOS, memungkinkan pengembangan basis kode tunggal untuk kedua platform.