Perluas Aliplayer dengan komponen bawaan dan kustom - ApsaraVideo VOD - Alibaba Cloud - ApsaraVideo VOD

ApsaraVideo Player SDK menyediakan komponen bawaan untuk iklan, subtitle, daftar putar, dan skenario umum lainnya. Anda dapat menggunakannya langsung atau menyesuaikannya sesuai kebutuhan.

Ikhtisar

Kode sumber tersedia di GitHub.
Coba komponen-komponen tersebut di tab Functions.
Beberapa fitur tidak berfungsi di browser seluler bawaan.
GitHub adalah situs pihak ketiga. Masalah koneksi mungkin terjadi.

Daftar komponen

Nama komponen	Tipe	Deskripsi	Efek
Bullet comment	`AliplayerDanmuComponent`	Menambahkan kotak input teks dan tombol di control bar untuk mengaktifkan, menonaktifkan, serta mengirim komentar langsung. Komponen Danmu.
Watermark animasi (komponen Marquee)	`BulletScreenComponent`	Menambahkan watermark teks berjalan (misalnya ID pengguna) untuk mencegah penyalinan tanpa izin. Mendukung penyesuaian posisi, warna, dan ukuran font. Komponen Marquee. Secara default, animasi marquee berlangsung selama 10 detik. Untuk menyesuaikan interval scroll (misalnya menjadi 4 detik), timpa animasi dengan CSS: `.bullet-screen { animation: bullet 4s linear infinite !important; }`. Flag `!important` diperlukan agar dapat menimpa gaya bawaan komponen.
Subtitle	`CaptionComponent`	Beralih antar bahasa subtitle. Komponen Subtitle.
Video ad pod	`ManyVideoADComponent`	Memutar rangkaian iklan video sebelum konten utama. Komponen Video ad pod.
Resume playback	`MemoryPlayComponent`	Secara otomatis menyimpan posisi pemutaran terakhir. Terdapat dua mode: Click-to-Play: Menampilkan posisi terakhir saat diputar, dengan opsi untuk melakukan seek. Auto-play: Melakukan seek ke posisi terakhir yang disimpan saat pemutaran dimulai. Komponen Resume playback. Catatan Memerlukan dukungan localStorage di browser.
Pause ad (image)	`PauseADComponent`	Menampilkan overlay iklan gambar di tengah pemutar saat jeda. Komponen Pause ad.
Video playlist	`PlaylistComponent`	Menambahkan tombol daftar putar ke control bar untuk beralih antar video. Komponen Video playlist.
Preview	`PreviewVodComponent`	Membatasi pemutaran hanya pada durasi pratinjau, lalu meminta akses penuh (misalnya berlangganan atau membeli). Komponen Preview.
Progress marker	`ProgressComponent`	Menambahkan penanda di progress bar untuk titik-titik penting. Saat kursor diarahkan ke penanda, akan ditampilkan pratinjau gambar mini. Komponen Progress marker.	Contoh antarmuka pemutar lengkap menunjukkan integrasi beberapa komponen resmi, termasuk: Tooltip pratinjau gambar mini (menampilkan judul dan deskripsi) Bilah resume playback (Terakhir ditonton pada 00:34, klik untuk melanjutkan) Tampilan subtitle Control bar bawah (tombol jeda, progress bar, volume, pengaturan, subtitle CC, layar penuh)
Definition	`QualityComponent`	Beralih antar definisi video (resolusi). Komponen Definition.
Playback speed	`RateComponent`	Menyesuaikan kecepatan pemutaran video. Komponen Playback speed
Rotation and mirroring	`RotateMirrorComponent`	Menambahkan tombol rotasi dan cermin ke control bar. Komponen Rotation and mirroring.
Start ad (image)	`StartADComponent`	Menampilkan iklan gambar sebelum pemutaran video dimulai. Komponen Start ad.
Audio track switching	`TrackComponent`	Beralih antar track audio berdasarkan bahasa. Komponen Audio track switching.	-
Video ad	`VideoADComponent`	Memutar iklan video berdurasi terbatas sebelum konten utama. Komponen Video ad.
Play next	PlayerNextComponent	Menambahkan tombol Play Next ke control bar. Event klik dapat didefinisikan secara kustom dan diteruskan sebagai parameter. Komponen Play next.

Gunakan komponen

Tambahkan komponen ke Web Player SDK. Saat ini belum tersedia URL CDN. Unduh paket komponen dan sertakan dalam proyek Anda. Pastikan menggunakan versi terbaru.
```
<script type="text/javascript" src="your-public-path/aliplayercomponents-1.0.9.min.js"></script>
```

Mount 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) {}
);

Properti komponen:

Properti	Deskripsi
name	Nama unik untuk komponen, digunakan untuk mengambil instansnya.
type	Kelas komponen.
args	Argumen konstruktor. Harus sesuai dengan parameter yang diperlukan.

Buat build kustom

Semua komponen

Bangun semua komponen. Output: /dist/aliplayer-components/aliplayercomponents-[version].min.js

$ npm run build

Kumpulan komponen kustom

Untuk mengurangi ukuran bundle, bangun hanya komponen tertentu:

$ npm run build componentsName # componentsName adalah nama komponen

componentsName adalah daftar yang dipisahkan spasi. Contoh:

$ npm run build AliplayerDanmu BulletScreen # Membundel komponen AliplayerDanmu dan BulletScreen.