ApsaraVideo VOD:FAQ Player SDK untuk Web

Masalah terkait lisensi

Atasi masalah lisensi tidak valid atau kedaluwarsa di FAQ Lisensi.

Konfigurasi lisensi Player SDK untuk Web dan nama domain yang diotorisasi

Player SDK untuk Web memvalidasi lisensi berdasarkan nama domain halaman web yang menampung pemutar. Gunakan entri ini untuk mengonfigurasi nama domain yang diotorisasi, menangani kesalahan lisensi selama inisialisasi, serta menyelesaikan konfigurasi lisensi saat melakukan upgrade SDK.

• Nama domain yang diotorisasi: Nama domain yang diotorisasi adalah nama domain akses bisnis dari halaman web yang menampung pemutar, bukan domain sumber daya ApsaraVideo VOD. Bind nama domain tersebut menggunakan pencocokan eksak atau wildcard. Konfigurasikan nama domain pengujian dan produksi dengan cara yang sama: lakukan verifikasi kepemilikan domain untuk setiap nama domain di Konsol, lalu ajukan lisensi gratis.

• license resource init error selama inisialisasi: Kesalahan ini biasanya terjadi ketika mode debug diaktifkan, misalnya saat vconsole aktif. Hal ini tidak memengaruhi pemutaran normal. Nonaktifkan mode debug atau periksa developer tools browser (Console dan Network) untuk melihat apakah ada kesalahan lain yang dilaporkan.

• Halaman otorisasi macet pada placeholder loading: Jika daftar SDK atau halaman otorisasi lisensi tidak dapat membaca data dan terus menampilkan placeholder loading, buat aplikasi Player SDK untuk Web dan bind langsung nama domain yang diotorisasi.

• Upgrade ke versi Player SDK untuk Web terbaru: Ganti URL referensi CSS dan JavaScript. Sisa kode Anda tetap kompatibel sehingga tidak perlu mengintegrasikan ulang Operasi API. Tambahkan parameter license, yang berisi domain dan key, ke dalam konfigurasi inisialisasi. Ajukan lisensi gratis di Konsol dan bind nama domain yang diotorisasi sebelum menginisialisasi pemutar.

Masalah umum lintas platform

• Untuk masalah yang tidak bergantung pada platform tertentu, periksa FAQ pemutar lintas platform.

• Developer berpengalaman juga dapat melakukan troubleshooting kesalahan pemutaran secara mandiri.

Masalah pengembangan

Beralih antara vid dan playauth di pemutar HTML5

 player.replayByVidAndPlayAuth(newVid, newPlayAuth)

Apakah replayByVidAndPlayAuth memicu event ready?

Ya. Event ready dipicu setelah pemutar selesai menginisialisasi video dan melakukan rendering UI. Pada titik tersebut, Anda dapat dengan aman memanggil metode seperti seek. Dengarkan event tersebut dengan:

player.on('ready', function(){...});

Menyesuaikan ukuran dan posisi tombol putar

• Timpa CSS untuk mengubah ukuran tombol putar. Contoh (setengah ukuran):

   .prism-player .prism-big-play-btn {
      width: 45px;
      height: 45px;
      background-size: 128px 256px;
  }

• Atur properti x dan y dari bigPlayButton dalam skinLayout untuk mengatur ulang posisi tombol putar.

  skinLayout: [
    { name: "bigPlayButton", align: "blabs", x: 30, y: 80 },
    {
      name: "H5Loading",
      align: "cc",
    },
    {
      name: "controlBar",
      align: "blabs",
      x: 0,
      y: 0,
      children: [
        { name: "progress", align: "tlabs", x: 0, y: 0 },
        { name: "playButton", align: "tl", x: 15, y: 26 },
        { name: "timeDisplay", align: "tl", x: 10, y: 24 },
        { name: "fullScreenButton", align: "tr", x: 20, y: 25 },
        { name: "volume", align: "tr", x: 20, y: 25 },
      ],
    },
  ]

Setelah memanggil metode seek, bagaimana pemutar menerapkan tombol jeda?

Tombol tersebut mencerminkan status sebelumnya dari pemutar. Panggil player.pause() setelah seek untuk menampilkan tombol jeda.

Mengatur posisi pemutaran awal

Atur watchStartTime untuk menentukan posisi pemutaran awal.

new Aliplayer({
  watchStartTime: 60, // Mulai pemutaran dari detik ke-60.
})

Referensi API Aliplayer.

Mengaktifkan layar penuh otomatis saat autoplay

var player = new Aliplayer(
  {
    id: "player-con",
    source: "//example.aliyundoc.com/video/media02.mp4",
    width: "100%",
    height: "500px",
    autoplay: true,
    qualitySort: "asc",
    mediaType: "video",
    preload: true,
    isLive: false,
  },
  function (player) {
    player.mute();
    console.log("Pemutar telah dibuat");
  }
);
player.on("ready", function () {
  player.fullscreenService.requestFullScreen();
});

Apa perbedaan antara preload: true dan preload: false di Aliplayer?

preload: true mengaktifkan preloading. preload: false menonaktifkan preloading.

Menonaktifkan seek pada bilah progres

Atur disableSeek: true untuk mencegah pengguna menyeret bilah progres. Nonaktifkan penyeretan bilah progres.

Mendapatkan waktu pemutaran saat ini secara berkala

Gunakan pengatur waktu untuk memanggil player.getCurrentTime() setiap detik. Hapus pengatur waktu saat pemutaran dijeda, terjadi kesalahan, atau pemutaran berakhir.

var timer = null;

timer = setInterval(() => {
  var current = player.getCurrentTime();
  console.log(current);
}, 1000);

// Hapus pengatur waktu.
function clear() {
  if (timer) {
    clearTimeout(timer);
    timer = null;
  }
}
player.on("ended", function (e) {
  clear();
});
player.on("pause", function (e) {
  clear();
});
player.on("error", function (e) {
  clear();
});

Masalah umum lainnya dengan Player SDK untuk Web

1. Presisi metode seek: seek menerima nilai floating-point (misalnya, 10.5). Untuk kompatibilitas yang lebih baik, bulatkan ke bawah atau gunakan lebih sedikit tempat desimal.

2. Menghubungkan ulang setelah aliran live terputus: Anda dapat mengonfigurasi jumlah upaya penghubungan ulang. Jika pemutaran tidak pulih setelah upaya yang dikonfigurasi, dengarkan event error untuk menangani kegagalan, misalnya:

   player.on('error', (e) => { var code = String(e.paramData.error_code); })

3. Lisensi Key dan fitur unduhan: Lisensi Key yang digunakan untuk pemutaran tidak dapat dipertukarkan dengan fitur unduhan. Unduhan dihasilkan berdasarkan informasi aplikasi.

4. Bilah kontrol menampilkan teks tetapi tidak ada ikon: Periksa apakah aliplayer-min.css telah disertakan dengan benar. Jangan gunakan skinLayoutIgnore dan skinLayout secara bersamaan — skinLayoutIgnore memiliki prioritas lebih tinggi dan menghapus komponen tersebut. Atur tinggi tetap (400px atau lebih) pada kontainer pemutar untuk menghindari keruntuhan tata letak. Anda juga dapat membandingkan pengaturan Anda dengan demo Vue resmi untuk debugging.

5. Kesalahan 537067523 pada Player SDK untuk Flutter untuk iOS: Atur trace ID dengan FlutterAliplayer.setTraceID untuk membantu troubleshooting log; upgrade Player SDK untuk Flutter ke versi 7.14.0 atau lebih baru, yang mengoptimalkan library jaringan; jika Anda tidak menggunakan CDN Alibaba Cloud, hubungi penyedia CDN Anda untuk memeriksa log permintaan.

Bagaimana cara memeriksa dan mengupgrade versi Player SDK untuk Web?

1. Periksa versi: Lihat file aliplayer-min.js yang disertakan dalam proyek Anda, atau bidang versi dalam konfigurasinya.

2. Upgrade versi (sebagaimana disediakan oleh pihak yang meminta): Edit variabel versi pada baris 30 masing-masing file paket bahasa berikut: language.SC_UTF8.php, language.SC_GBK.php, language.TC_UTF8.php, language.TC_BIG5.php. Perbarui keempat file tersebut ke nomor versi baru (misalnya, dari 2.27.1 ke 2.37.8).

Masalah dan kesalahan pemutaran

Video berkode H.265 gagal diputar

Player SDK untuk Web versi 2.14.0+ mendukung video berkode H.265. Anda harus mendapatkan lisensi dan mengonfigurasi parameter H.265. Putar aliran video berkode H.265/H.266.

Kesalahan cross-origin saat memutar file FLV atau M3U8

Jika Anda melihat pesan "Access is denied for this document" atau kesalahan "Access-Control-Allow-Origin", aktifkan akses cross-origin untuk domain pemutaran Anda. Konfigurasi akses cross-origin.

Pemutar HTML5 tidak dapat masuk mode landscape

SDK pemutar tidak menyediakan API mode landscape. Di iOS, mode landscape bergantung pada pengaturan orientasi sistem. Di Android, pemutar secara otomatis masuk mode landscape saat dalam mode layar penuh.

Header Referer hilang dalam permintaan pemutaran FLV

1. Permintaan pemutar mengikuti Referrer-Policy website Anda. Pastikan Referrer-Policy Anda mengizinkan permintaan video menyertakan header Referer.

2. Jika Referrer-Policy mengizinkan header Referer tetapi header tersebut tidak muncul dalam permintaan video, ACL berbasis Referer mungkin memblokir pemutaran. Atur enableWorker: false untuk mengatasi masalah ini.

Menghapus bilah hitam dari jendela pemutar

Bilah hitam muncul ketika video tidak mengisi seluruh jendela pemutar.

Bilah hitam tersebut merupakan latar belakang kontainer pemutar. Terapkan object-fit: cover; pada tag <video> untuk menghapusnya.

Inisialisasi AliPlayer gagal dengan TypeError: Failed to execute 'getComputedStyle' on 'Window'

Penyebab: Selama inisialisasi komponen controlBar.volume, metode internal _getBottom() mengambil elemen DOM yang bernilai null atau bukan Element (biasanya karena kontainer belum selesai dirender). Memanggil getComputedStyle pada nilai ini memicu kesalahan dan menghentikan proses inisialisasi selanjutnya.

Solusi 1 (disarankan): Upgrade Player SDK untuk Web ke versi 2.37.8 atau lebih baru, yang memperbaiki masalah kompatibilitas ini.

Solusi 2 (solusi sementara): Tambahkan skinLayoutIgnore: ["controlBar.volume"] ke konfigurasi pemutar untuk melewati inisialisasi kontrol volume. Jika Anda perlu mempertahankan kontrol volume, pastikan elemen kontainer sudah ada dan offsetWidth-nya lebih besar dari 0 sebelum menginisialisasi pemutar; jika tidak, tunda inisialisasi selama 200 ms dan coba lagi.

loadByUrl tidak berfungsi di iOS dan Android

// `seek` hanya melompat ke waktu tersebut, tetapi tidak memutar.
// `play` memulai ulang pemutaran dari awal di iOS.
// Di iOS, pemutaran layar penuh diambil alih oleh pemutar native.

document.querySelector(".no1").onclick = function () {
  player.loadByUrl("//player.alicdn.com/resource/player/qupai.mp4");
};

// Dengarkan event 'play' dan 'canplay' untuk memanggil seek. Ini mungkin tidak berfungsi di beberapa browser. Sebagai alternatif, pertimbangkan untuk memanggil seek pada event 'timeupdate' pertama.
player.on("canplay", function () {
  player.seek(20);
});
// Tidak ada solusi untuk pengambilalihan layar penuh di iOS.

Video sebelumnya terus diputar setelah sumber video diubah

Di Player SDK untuk Web 2.9.11, loadByUrl gagal di mode kompatibilitas 360 Browser pada Windows 10. Video sebelumnya terus diputar setelah sumber diubah.

Penyebab: masalah kompatibilitas browser.

Solusi: upgrade ke Player SDK untuk Web 2.9.19 atau lebih baru.

Metode player.seek() gagal di iOS

// Panggil seek dalam event `play` dan `canplay`. Jika tidak, mungkin tidak berlaku.
player.on("canplay", function () {
  player.seek(20);
});

Menyusul edge live setelah melanjutkan aliran

Deskripsi masalah

Jika Anda mengalihkan aplikasi ke latar belakang saat memutar aliran live, pemutaran dijeda. Setelah Anda kembali ke aplikasi, aliran live dilanjutkan dari titik waktu saat jeda terjadi. Apakah ada konfigurasi yang dapat dilakukan untuk mengurangi latensi pemutaran agar klip terbaru dapat diputar setelah pemutaran dilanjutkan?

Solusi

Setelah Anda melanjutkan pemutaran, aliran live dilanjutkan dari titik waktu saat jeda terjadi. Anda tidak dapat mengonfigurasi parameter untuk mempercepat pemutaran. Kami menyarankan agar Anda menarik ulang aliran live tersebut, lalu gunakan pemutar untuk memainkannya kembali.

Menggunakan Player SDK untuk Web di mini program WeChat

Player SDK untuk Web tidak dapat dijalankan di mini program WeChat. Gunakan komponen video bawaan mini program sebagai gantinya. Mini program WeChat.

Penarikan aliran cross-origin gagal untuk aliran live

Jika validasi cross-origin lokal gagal, periksa konfigurasi Manajemen Domain Anda. Permintaan dari localhost akan gagal jika hanya domain Anda sendiri yang dikonfigurasi. Secara default, localhost lolos validasi ketika tidak ada domain yang dikonfigurasi.

Pemutaran video VOD gagal di iOS

Kemungkinan penyebab: Safari di iOS mungkin gagal mendekode video dengan rasio kompresi tinggi atau profil pengkodean high.

Solusi: Lakukan transkoding video sebelum pemutaran. Transkoding audio dan video.

Masalah spesifik platform

Menghapus gambar mini default di WebView

Di beberapa WebView Android, menghilangkan atribut poster pada tag <video> menyebabkan munculnya gambar mini default (latar belakang abu-abu dengan tombol putar).

Solusi: Atur atribut poster yang tidak valid pada tag <video> untuk menggantikan default tersebut.

extraInfo: { poster: 'noposter' } // Konten parameter pemutar `extraInfo` diteruskan ke tag <video>.

Mengaktifkan mode dokumen tertinggi di IE

<meta http-equiv="x-ua-compatible" content="IE=edge" >

Mengaktifkan autoplay di WeChat

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
function autoPlay() {            
  wx.config({
      // Detail konfigurasi. wx.ready dapat digunakan meskipun detailnya salah.
      debug: false,
      appId: '',
      timestamp: 1,
      nonceStr: '',
      signature: '',
      jsApiList: []
  });
  wx.ready(function() {
      var video=$(player.el()).find('video')[0];
      video.play();
  });
};
// Solusi untuk masalah autoplay di iOS.
autoPlay();
</script>