Contoh penggunaan fitur dasar ApsaraVideo Player SDK untuk Flutter - ApsaraVideo VOD

Topik ini menyediakan contoh penggunaan fitur dasar ApsaraVideo Player SDK untuk Flutter. Untuk informasi selengkapnya, lihat fitur lanjutan dan referensi API.

Setel sumber data (DataSource)

ApsaraVideo Player SDK untuk Flutter mendukung empat metode pemutaran video sesuai permintaan (VOD): VidAuth (direkomendasikan), VidSts, UrlSource, dan pemutaran terenkripsi.
ApsaraVideo Player SDK untuk Flutter hanya mendukung satu metode pemutaran untuk streaming langsung: UrlSource.

Pemutaran VOD

Pemutaran VOD menggunakan VidAuth (Direkomendasikan)

Untuk memutar video VOD menggunakan VidAuth, setel properti `vid` pada player ke ID audio atau video dan properti `playauth` ke kredensial pemutaran.

Setelah file audio atau video diunggah, Anda dapat memperoleh ID-nya di Konsol ApsaraVideo VOD dengan memilih Media Library > Audio/Video, atau dengan memanggil operasi SearchMedia.
Anda dapat memperoleh kredensial pemutaran dengan memanggil operasi GetVideoPlayAuth. Kami merekomendasikan penggunaan SDK untuk memperoleh kredensial pemutaran guna menghindari penandatanganan manual. Contoh cara memanggil operasi ini tersedia di Developer Portal.

Kami merekomendasikan pengguna ApsaraVideo VOD untuk menggunakan metode pemutaran ini. Metode PlayAuth lebih aman dan lebih mudah digunakan dibandingkan metode STS. Untuk perbandingan lengkap, lihat Perbandingan antara metode berbasis kredensial dan metode berbasis STS.

void onViewPlayerCreated(viewId) async {
  // Setel tampilan yang dirender untuk player.
  fAliplayer.setPlayerView(viewId);
  // Catatan: Sebelum memanggil generatePlayerConfig, Anda harus memanggil createVidPlayerConfigGenerator() dan setPreviewTime().
  FlutterAliplayer.createVidPlayerConfigGenerator();
  FlutterAliplayer.setPreviewTime(0);
  // Setel sumber pemutaran.
  FlutterAliplayer.generatePlayerConfig().then((value) {
      fAliplayer.setVidAuth(
          vid: "Your Vid",// Wajib diisi. ID video (VideoId).
          region: "Your Region",// Wajib diisi. Wilayah tempat ApsaraVideo VOD diaktifkan. Nilai default: cn-shanghai.
          playAuth: "<yourPlayAuth>",// Wajib diisi. Kredensial pemutaran. Anda harus memanggil operasi GetVideoPlayAuth dari ApsaraVideo VOD untuk menghasilkan kredensial ini.
          playConfig: value);
        });    
  }
}

Pemutaran VOD menggunakan VidSts

Untuk memutar video VOD menggunakan VidSts, Anda harus menggunakan kredensial sementara Layanan Token Keamanan (Security Token Service/STS) alih-alih kredensial pemutaran VOD. Anda harus memperoleh token STS dan pasangan AccessKey sementara (AccessKeyId dan AccessKeySecret) terlebih dahulu. Untuk informasi selengkapnya, lihat Memperoleh token STS.

void onViewPlayerCreated(viewId) async {
  // Setel tampilan yang dirender untuk player.
  fAliplayer.setPlayerView(viewId);
  // Catatan: Sebelum memanggil generatePlayerConfig, Anda harus memanggil createVidPlayerConfigGenerator() dan setPreviewTime().
  FlutterAliplayer.createVidPlayerConfigGenerator();
  FlutterAliplayer.setPreviewTime(0);
  // Pemutaran menggunakan VidSts.
  FlutterAliplayer.generatePlayerConfig().then((value) {
     fAliplayer.setVidSts(
          vid: "Your Vid",// Wajib diisi. ID video (VideoId).
          region: "Your Region",// Wajib diisi. Wilayah tempat ApsaraVideo VOD diaktifkan. Nilai default: cn-shanghai.
          accessKeyId: "<yourAccessKeyId>",// Wajib diisi. ID AccessKey dari pasangan AccessKey sementara. Anda harus memanggil operasi AssumeRole dari STS untuk menghasilkan ID AccessKey ini.
          accessKeySecret: "<yourAccessKeySecret>",// Wajib diisi. Rahasia AccessKey dari pasangan AccessKey sementara. Anda harus memanggil operasi AssumeRole dari STS untuk menghasilkan rahasia AccessKey ini.
          securityToken: "<yourSecurityToken>",// Wajib diisi. Token STS. Anda harus memanggil operasi AssumeRole dari STS untuk menghasilkan token ini.
      	  playConfig: value);
    	});
       
}

Pemutaran VOD menggunakan UrlSource

Untuk memutar video VOD menggunakan UrlSource, setel properti `setUrl` pada player ke URL pemutaran. URL pemutaran dapat berupa URL pihak ketiga atau URL pemutaran dari ApsaraVideo VOD.

Anda dapat memperoleh URL pemutaran Alibaba Cloud dengan memanggil operasi GetPlayInfo. Kami merekomendasikan penggunaan SDK untuk memperoleh URL pemutaran guna menghindari penandatanganan manual. Contoh cara memanggil operasi ini tersedia di Developer Portal.

void onViewPlayerCreated(viewId) async {
  // Setel tampilan yang dirender untuk player.
  fAliplayer.setPlayerView(viewId);
  // Setel sumber pemutaran.
  switch (_playMode) {
      // Pemutaran menggunakan UrlSource.
    case ModeType.URL:
      this.fAliplayer.setUrl("Playback URL"); // Wajib diisi. URL pemutaran. URL ini dapat berupa URL VOD pihak ketiga atau URL pemutaran dari ApsaraVideo VOD.
      break;
    default:
  }
}

Pemutaran VOD terenkripsi

ApsaraVideo VOD mendukung enkripsi HLS, enkripsi privat Alibaba Cloud, dan enkripsi DRM. Untuk informasi selengkapnya tentang pemutaran terenkripsi, lihat Memutar video terenkripsi di Flutter.

Pemutaran streaming langsung

Untuk informasi selengkapnya, lihat ApsaraVideo Player untuk Flutter.

Catatan

UrlSource menggunakan URL untuk pemutaran. VidSts dan VidAuth menggunakan ID video (VID) untuk pemutaran.
Untuk informasi selengkapnya tentang cara menyetel wilayah, lihat Wilayah VOD.

Kontrol pemutaran

ApsaraVideo Player SDK untuk Flutter mendukung operasi umum seperti memulai, menjeda, dan mencari ke waktu tertentu.

Putar otomatis

Anda dapat menggunakan metode setAutoPlay untuk mengaktifkan putar otomatis untuk video. Putar otomatis dinonaktifkan secara default. Kode berikut memberikan contohnya:

fAliplayer.setAutoPlay(true);

Persiapkan pemutaran

Anda dapat memanggil metode prepare untuk mulai membaca dan mengurai data untuk pemutaran video. Jika putar otomatis diaktifkan, video akan otomatis mulai diputar setelah data selesai diurai. Kode berikut memberikan contohnya:

fAliplayer.prepare();

Mulai pemutaran

Anda dapat menggunakan metode play untuk memulai pemutaran video. Kode berikut memberikan contohnya:

 fAliplayer.play();

Mulai pemutaran dari waktu tertentu

Anda dapat menggunakan metode seek untuk melompat ke waktu tertentu dalam pemutaran. Ini berguna untuk skenario seperti menyeret bilah progres atau melanjutkan pemutaran dari titik tertentu. Kode berikut memberikan contohnya:

// position adalah waktu yang ditentukan dalam milidetik. Nilai valid untuk seekMode: FlutterAvpdef.ACCURATE (seek akurat) dan FlutterAvpdef.INACCURATE (seek tidak akurat).
fAliplayer.seek(position,seekMode);

Untuk memulai pemutaran dari posisi tertentu, Anda harus memanggil metode ini sekali sebelum memanggil metode prepare. Kode berikut memberikan contohnya:

// Setel waktu mulai dalam milidetik untuk persiapan player berikutnya. Pengaturan ini hanya berlaku untuk panggilan prepare berikutnya.
// Setelah prepare dipanggil, nilai ini secara otomatis diatur ulang menjadi nol. Jika metode ini tidak dipanggil lagi sebelum prepare berikutnya, pemutaran dimulai secara normal.
// Anda dapat menyetel seekMode ke mode akurat atau tidak akurat.
fAliplayer.setStartTime(time, seekMode);

Jeda pemutaran

Anda dapat menggunakan metode pause untuk menjeda pemutaran video. Kode berikut memberikan contohnya:

fAliplayer.pause();

Lanjutkan pemutaran

Anda dapat menggunakan metode play untuk melanjutkan pemutaran video. Kode berikut memberikan contohnya:

fAliplayer.play();

Hentikan pemutaran

Anda dapat menggunakan metode stop untuk menghentikan pemutaran video. Kode berikut memberikan contohnya:

fAliplayer.stop();

Hancurkan pemain

Anda dapat menghapus instans player secara sinkron atau asinkron. Kode berikut memberikan contohnya:

// Penghapusan sinkron. Metode stop dipanggil secara internal secara otomatis.
fAliplayer.destroy();
// Penghapusan asinkron. Metode stop dipanggil secara internal secara otomatis.
fAliplayer.releaseAsync();

Catatan

Metode penghapusan sinkron hanya mengembalikan nilai setelah semua sumber daya player dilepas. Jika UI Anda memerlukan responsivitas tinggi, kami merekomendasikan penggunaan metode penghapusan asinkron. Perhatikan hal-hal berikut:

Hindari melakukan operasi lain pada objek player selama proses penghapusan asinkron.
Anda tidak perlu menghentikan player secara manual sebelum memanggil metode penghapusan asinkron karena metode tersebut sudah mencakup prosedur penghentian asinkron.

Dengarkan status player

ApsaraVideo Player SDK untuk Flutter memungkinkan Anda menyetel pendengar player untuk memantau status player.

Atur pendengar pemutar

Anda dapat menyetel beberapa pendengar untuk player.

Untuk pemutaran manual, Anda harus menyetel pendengar OnPrepared. Hal ini karena Anda perlu memanggil metode play dalam callback OnPrepared untuk memulai pemutaran.
Pendengar OnTrackReady dan OnError sangat penting. Kami merekomendasikan agar Anda menyetelnya.

Contoh berikut hanya menampilkan beberapa pendengar yang tersedia:

// Persiapan berhasil.
fAliplayer.setOnPrepard((playerId) {});
// Frame pertama ditampilkan.
fAliplayer.setOnRenderingStart((playerId) {});
// Lebar dan tinggi video berubah.
fAliplayer.setOnVideoSizeChanged((width, height,playerId) {});
// Status player berubah.
fAliplayer.setOnStateChanged((newState,playerId) {});
// Status pemuatan.
fAliplayer.setOnLoadingStatusListener(
    loadingBegin: (playerId) {},
    loadingProgress: (percent, netSpeed,playerId) {},
    loadingEnd: (playerId) {});
// Proses seek selesai.
fAliplayer.setOnSeekComplete((playerId) {});
// Callback untuk informasi event player, termasuk buffer dan progres pemutaran saat ini. Informasi ditentukan oleh infoCode, yang berkorespondensi dengan FlutterAvpdef.infoCode.
fAliplayer.setOnInfo((infoCode, extraValue, extraMsg,playerId) {});
// Pemutaran selesai.
fAliplayer.setOnCompletion((playerId) {});
// Aliran siap.
fAliplayer.setOnTrackReady((playerId) {});
// Hasil tangkapan layar.
fAliplayer.setOnSnapShot((path,playerId) {});
// Hasil error.
fAliplayer.setOnError((errorCode, errorExtra, errorMsg,playerId) {});
// Aliran beralih.
fAliplayer.setOnTrackChanged((value,playerId) {});

Dengarkan status pemutaran

Anda dapat mendengarkan perubahan status player. Callback `onStateChanged` menyediakan status terkini dari player. Kode berikut memberikan contohnya:

fAliplayer.setOnStateChanged((newState, playerId) {
  // newState adalah status pemutaran.
  switch (newState) {
    case FlutterAvpdef.AVPStatus_AVPStatusIdle: // Idle
      break;
    case FlutterAvpdef.AVPStatus_AVPStatusInitialzed: // Inisialisasi selesai.
      break;
    case FlutterAvpdef.AVPStatus_AVPStatusPrepared: // Persiapan selesai.
      break;
    case FlutterAvpdef.AVPStatus_AVPStatusStarted: // Memutar.
      break;
    case FlutterAvpdef.AVPStatus_AVPStatusPaused: // Dijeda.
      break;
    case FlutterAvpdef.AVPStatus_AVPStatusStopped: // Dihentikan.
      break;
    case FlutterAvpdef.AVPStatus_AVPStatusCompletion: // Pemutaran selesai.
      break;
    case FlutterAvpdef.AVPStatus_AVPStatusError: // Terjadi error.
      break;
    default:
  }
});

Mengatur mode tampilan

ApsaraVideo Player SDK untuk Flutter mendukung pengaturan tampilan seperti fill, rotasi, dan pencerminan.

Isi

SDK mendukung tiga mode fill: aspect fit, aspect fill, dan scale to fill. Anda dapat menggunakan metode setScalingMode untuk menyetel mode fill. Kode berikut memberikan contohnya:

// Setel mode ke aspect fit. Video diskalakan turun secara proporsional agar muat dalam tampilan tanpa distorsi.
fAliplayer.setScalingMode(ScaleMode.SCALE_ASPECT_FIT);
// Setel mode ke aspect fill. Video diskalakan naik secara proporsional agar mengisi tampilan tanpa distorsi.
fAliplayer.setScalingMode(ScaleMode.SCALE_ASPECT_FILL);
// Setel mode ke scale to fill. Video mungkin mengalami distorsi jika rasio aspeknya tidak sesuai dengan rasio aspek tampilan.
fAliplayer.setScalingMode(ScaleMode.SCALE_TO_FILL);

Rotasi

Anda dapat menggunakan metode setRotateMode untuk memutar video sebesar sudut tertentu. Setelah menyetel rotasi, Anda juga dapat mengambil sudut rotasi tersebut. Kode berikut memberikan contohnya:

// Putar video 0 derajat searah jarum jam.
fAliplayer.setRotateMode(RotateMode.ROTATE_0);
// Putar video 90 derajat searah jarum jam.
fAliplayer.setRotateMode(RotateMode.ROTATE_90);
// Putar video 180 derajat searah jarum jam.
fAliplayer.setRotateMode(RotateMode.ROTATE_180);
// Putar video 270 derajat searah jarum jam.
fAliplayer.setRotateMode(RotateMode.ROTATE_270);
// Dapatkan sudut rotasi.
fAliplayer.getRotateMode();

Pencerminan

SDK mendukung pencerminan horizontal, pencerminan vertikal, dan tanpa pencerminan. Panggil metode setMirrorMode untuk mengonfigurasi mode pencerminan. Kode berikut memberikan contohnya:

// Setel tanpa pencerminan.
fAliplayer.setMirrorMode(MirrorMode.MIRROR_MODE_NONE);
// Setel pencerminan horizontal.
fAliplayer.setMirrorMode(MirrorMode.MIRROR_MODE_HORIZONTAL);
// Setel pencerminan vertikal.
fAliplayer.setMirrorMode(MirrorMode.MIRROR_MODE_VERTICAL);

Dapatkan informasi pemutaran

Anda dapat menggunakan ApsaraVideo Player SDK untuk Flutter untuk memperoleh progres pemutaran saat ini dan durasi video.

Peroleh progres pemutaran saat ini

Anda dapat memperoleh waktu pemutaran saat ini dalam milidetik dari callback `onInfo`. Kode berikut memberikan contohnya:

fAliplayer.setOnInfo((infoCode,extraValue,extraMsg,playerId){
 if(infoCode==FlutterAvpdef.CURRENTPOSITION){
 // extraValue adalah kemajuan pemutaran saat ini.
}
});

Peroleh durasi video

Anda dapat memperoleh durasi total video setelah video dimuat, misalnya setelah event `AVPEventPrepareDone`. Kode berikut memberikan contohnya:

fAliplayer.getMediaInfo().then((value){
 _videoDuration=value['duration'];
});

Mengatur volume

Pengaturan volume mencakup penyesuaian volume dan pembisuan.

Penyesuaian volume

Anda dapat menyesuaikan volume menggunakan metode setVolume. Rentang nilai yang didukung adalah 0 hingga 2. Menyetel volume ke nilai lebih dari 1 tidak disarankan karena dapat menyebabkan kebisingan. Setelah menyetel volume, Anda juga dapat mengambil informasi volumenya. Kode berikut memberikan contohnya:

// Nilai volume adalah bilangan real dari 0 hingga 2.
fAliPlayer.setVolume(1);
// Dapatkan informasi volume.
fAliPlayer.getVolume();

Pengaturan Senyap

Anda dapat menggunakan metode setMute untuk membisukan video yang sedang diputar. Kode berikut memberikan contohnya:

fAliplayer.setMute(true);

Ubah kecepatan pemutaran

ApsaraVideo Player SDK untuk Flutter memungkinkan Anda mengubah kecepatan pemutaran video. Anda dapat menggunakan metode setSpeed untuk memutar video dengan kecepatan 0,5× hingga 5× kecepatan normal. Pitch audio tetap tidak berubah. Kode berikut memberikan contohnya:

// Setel kecepatan pemutaran. Kecepatan dari 0,5x hingga 5x didukung. Kecepatan biasanya disetel dalam kelipatan 0,5, seperti 0,5x, 1x, dan 1,5x.
fAliplayer.setSpeed(1.0);

Pengaturan multi-definisi

Jika Anda menggunakan metode berbasis VID (VidAuth [direkomendasikan] atau VidSts) untuk pemutaran, tidak diperlukan pengaturan tambahan. ApsaraVideo Player SDK untuk Flutter memperoleh daftar definisi dari ApsaraVideo VOD. SDK memungkinkan Anda mengambil dan mengganti definisi. Pengaturan ini tidak didukung untuk metode pemutaran UrlSource.

Ambil definisi

Setelah video dimuat, Anda dapat mengambil definisi video.

fAliplayer.setOnPrepared((playerId) {
  fAliplayer.getMediaInfo().then((value){
        AVPMediaInfoinfo info=AVPMediaInfo.fromJson(value);
        info.tracks.forEach((element){
          if(element.trackType==3){
            // Definisi
            String definition=element.trackDefinition;
            // Indeks aliran
            int index=element.trackIndex;
          }
        });
      });    
});

Alihkan definisi

Gunakan metode selectTrack untuk mengganti definisi. Masukkan indeks TrackInfo yang sesuai.

fAliplayer.selectTrack(trackIdx);

Notifikasi pergantian definisi

Callback ini dipicu setelah pergantian definisi berhasil.

fAliplayer.setOnTrackChanged((value,playerId){
 // Callback menunjukkan bahwa pergantian berhasil. Metode untuk pergantian yang gagal belum tersedia.
});

Pemutaran berulang

ApsaraVideo Player SDK untuk Flutter menyediakan fitur putar ulang berulang. Panggil setLoop untuk mengaktifkan putar ulang berulang. Setelah video selesai diputar, pemutaran akan otomatis dimulai kembali dari awal. Kode berikut memberikan contohnya:

fAliplayer.setLoop(true);

Callback awal putar ulang juga mengirimkan notifikasi melalui onInfo. Berikut contohnya:

fAliplayer.setOnInfo((infoCode, extraValue, extraMsg, playerId) {
 if(infoCode == FlutterAvpdef.LOOPINGSTART){
 // Notifikasi awal putar ulang berulang
 }
});

Dapatkan log pemutaran

ApsaraVideo Player SDK untuk Flutter memungkinkan Anda memperoleh log pemutaran. Panggil enableConsoleLog untuk mengaktifkan pencetakan log. Kode berikut memberikan contohnya:

// Aktifkan pencetakan log.
FlutterAliplayer.enableConsoleLog(true);
// Setel tingkat log. Tingkat default adalah AF_LOG_LEVEL_INFO. Untuk troubleshooting, Anda dapat menyetelnya ke AF_LOG_LEVEL_TRACE.
FlutterAliplayer.setLogLevel(FlutterAvpdef.AF_LOG_LEVEL_INFO);

ApsaraVideo Player SDK untuk Flutter memungkinkan Anda memperoleh log tingkat frame. Panggil `setLogOption` untuk mengonfigurasi pencetakan log tingkat frame. Kode berikut memberikan contohnya:

/// Setel tingkat log. Untuk troubleshooting, setel tingkat log ke AF_LOG_LEVEL_TRACE.
FlutterAliplayer.setLogLevel(LogLevel.AF_LOG_LEVEL_INFO);
/// Aktifkan atau nonaktifkan log.
FlutterAliplayer.enableConsoleLog(true);
/// Informasi callback log.
FlutterAliplayer.setLogInfoCallBack((level, msg) {
   print("[LOG][LEVEL][$level] $msg");
});
/// Aktifkan callback log frame. Biasanya diaktifkan untuk troubleshooting.
/// Nilai opsi: 0 berarti dinonaktifkan, 1 berarti diaktifkan.
FlutterAliplayer.setLogOption(value);

Catatan

Fitur log tingkat frame terutama digunakan untuk pemecahan masalah.