Komponen resmi - ApsaraVideo VOD

Alibaba Cloud telah mengembangkan sejumlah komponen umum berdasarkan skenario khas. Anda dapat menggunakan komponen-komponen tersebut secara langsung atau menyesuaikannya sesuai kebutuhan.

Informasi latar belakang

Kode sumber komponen tersedia di GitHub. Untuk informasi selengkapnya, lihat Deskripsi proyek.
Untuk informasi selengkapnya tentang cara menggunakan komponen, lihat tab Fungsi.
Fitur tertentu dari Web SDK tidak dapat digunakan di browser bawaan perangkat seluler.
GitHub adalah situs web pihak ketiga. Kegagalan koneksi atau peningkatan latensi mungkin terjadi saat mengakses GitHub.

Daftar komponen resmi

Nama komponen	Jenis komponen	Deskripsi	Tampilan efek
Komentar langsung	`AliplayerDanmuComponent`	Komponen komentar langsung menambahkan kotak input teks dan tombol untuk mengaktifkan, menonaktifkan, serta mengirim komentar langsung ke bilah kontrol pemutar. Untuk informasi selengkapnya, lihat Komponen Danmu.
Watermark animasi (komponen Marquee)	`BulletScreenComponent`	Komponen ini digunakan untuk menambahkan watermark teks yang berisi informasi pengguna seperti ID pengguna ke dalam video. Hal ini membantu mengurangi pelanggaran hak cipta. Anda dapat menentukan lokasi watermark serta warna dan ukuran teksnya. Untuk informasi selengkapnya, lihat Komponen Marquee.
Subtitle	`CaptionComponent`	Komponen subtitle memungkinkan Anda beralih antar subtitle dalam berbagai bahasa. Untuk informasi selengkapnya, lihat Komponen Subtitle.
Urutan iklan video	`ManyVideoADComponent`	Komponen urutan iklan video memutar serangkaian iklan video sebelum video utama diputar. Untuk informasi selengkapnya, lihat Komponen Urutan Iklan Video.
Melanjutkan pemutaran	`MemoryPlayComponent`	Komponen ini memungkinkan Anda melanjutkan pemutaran dari posisi pemutaran sebelumnya. Jika Anda memilih Ingat Posisi yang Diputar (Manual), Anda akan diberi tahu mengenai posisi pemutaran sebelumnya. Anda dapat mengklik bilah kemajuan untuk mencari posisi pemutaran tersebut. Jika Anda memilih Ingat Posisi yang Diputar (Putar Otomatis), video akan otomatis diputar dari posisi pemutaran sebelumnya. Untuk informasi selengkapnya, lihat Komponen Melanjutkan Pemutaran. Catatan Properti localStorage digunakan untuk mencatat posisi pemutaran pada komponen melanjutkan pemutaran. Komponen ini tidak dapat digunakan di browser yang tidak mendukung localStorage.
Iklan jeda (citra)	`PauseADComponent`	Komponen iklan jeda digunakan untuk menampilkan iklan citra saat video dijeda. Untuk informasi selengkapnya, lihat Komponen Iklan Jeda.
Daftar putar video	`PlaylistComponent`	Komponen ini menambahkan tombol untuk menampilkan daftar putar dan beralih antar video ke bilah kontrol pemutar serta menampilkan daftar putar pada pemutar. Untuk informasi selengkapnya, lihat Komponen Daftar Putar Video.
Pratinjau	`PreviewVodComponent`	Komponen pratinjau memungkinkan Anda menonton pratinjau video selama periode waktu tertentu. Setelah pratinjau berakhir, komponen ini memberi tahu Anda mengenai kondisi yang harus dipenuhi untuk menonton video lengkapnya. Untuk informasi selengkapnya, lihat Komponen Pratinjau.
Penanda kemajuan	`ProgressComponent`	Komponen penanda kemajuan menandai titik-titik penting dalam video. Saat Anda mengarahkan pointer ke titik penting yang ditandai, citra tertentu akan ditampilkan. Untuk informasi selengkapnya, lihat Komponen Penanda Kemajuan.
Definisi	`QualityComponent`	Komponen definisi digunakan untuk beralih cepat antar definisi video. Untuk informasi selengkapnya, lihat Komponen Definisi.
Laju pemutaran	`RateComponent`	Komponen ini digunakan untuk menyesuaikan laju pemutaran video. Untuk informasi selengkapnya, lihat Komponen Laju Pemutaran
Rotasi dan pencerminan	`RotateMirrorComponent`	Komponen rotasi dan pencerminan menambahkan tombol untuk memutar dan mencerminkan video ke bilah kontrol pemutar. Untuk informasi selengkapnya, lihat Komponen Rotasi dan Pencerminan.
Iklan awal (citra)	`StartADComponent`	Komponen iklan awal digunakan untuk menampilkan iklan citra sebelum video diputar. Untuk informasi selengkapnya, lihat Komponen Iklan Awal.
Pengalihan track audio	`TrackComponent`	Komponen track audio digunakan untuk beralih antar track audio dalam berbagai bahasa. Untuk informasi selengkapnya, lihat Komponen Track Audio.	-
Iklan video	`VideoADComponent`	Komponen iklan video memutar iklan video sebelum video utama diputar. Untuk informasi selengkapnya, lihat Komponen Iklan Video.
Putar berikutnya	PlayerNextComponent	Komponen ini menambahkan tombol `Putar Berikutnya` ke bilah kontrol pemutar. Anda dapat menyesuaikan event klik untuk tombol tersebut dan meneruskan event klik sebagai parameter komponen. Untuk informasi selengkapnya, lihat Komponen Putar Berikutnya.

Gunakan komponen

Tambahkan komponen ke Web Player SDK. Sumber daya CDN Alibaba Cloud tidak termasuk dalam komponen. Jika ingin menggunakan sumber daya CDN, tambahkan setelah mengunduhnya ke PC lokal Anda. Untuk mengunduh komponen, kunjungi halaman unduh komponen pemutar. Disarankan untuk menggunakan versi terbaru.
```
<script type="text/javascript" src="your-public-path/aliplayercomponents-1.0.9.min.js"></script>
```

Pasang komponen ke Web Player SDK.

var player = new Aliplayer(
  {
    id: "player-con",
    source: "//player.alicdn.com/video/editor.mp4",
    components: [
      {
        name: "StartADComponent",
        type: AliPlayerComponent.StartADComponent,
        args: [
          "https://img.alicdn.com/tfs/TB1byi8afDH8KJjy1XcXXcpdXXa-1920-514.jpg",
          "https://promotion.aliyun.com/ntms/act/videoai.html",
          3,
        ],
      },
      {
        name: "BulletScreenComponent",
        type: AliPlayerComponent.BulletScreenComponent,
        args: [
          "Welcome to use Aliplayer",
          { fontSize: "16px", color: "#00c1de" },
          "random",
        ],
      },
    ],
  },
  function (player) {}
);

Konfigurasi setiap komponen mencakup tiga parameter:

Nama	Deskripsi
name	Nama komponen, yang dapat digunakan untuk mendapatkan komponen
type	Jenis komponen
args	Parameter komponen. Teruskan parameter yang sesuai berdasarkan konstruktor komponen.

Cara menyesuaikan pengemasan

Mengemas semua komponen

Anda dapat menggunakan salah satu dari dua perintah berikut untuk mengemas semua komponen pemutar. File yang dihasilkan adalah /dist/aliplayer-components/aliplayercomponents-[version].min.js.

$ npm run build

Menyesuaikan pengemasan komponen

Untuk mengurangi ukuran file, Anda dapat memilih komponen yang ingin dikemas dengan menjalankan perintah berikut:

$ npm run build componentsName # componentsName adalah nama komponen

componentsName adalah nama komponen. Nama beberapa komponen dipisahkan dengan spasi. Contohnya:

$ npm run build AliplayerDanmu BulletScreen # Mengemas plugin Danmu dan plugin Marquee