ApsaraVideo VOD:FAQ Player SDK untuk Web

Masalah terkait lisensi

Atasi masalah lisensi tidak valid atau kedaluwarsa di FAQ Lisensi.

Masalah umum lintas platform

• Untuk masalah yang berlaku di semua platform, periksa FAQ pemutar lintas platform.

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

Masalah pengembangan

Beralih vid dan playauth di pemutar HTML5

 player.replayByVidAndPlayAuth(newVid, newPlayAuth)

Apakah replayByVidAndPlayAuth memicu event ready?

Ya. Event ready dipicu setelah pemutar selesai melakukan inisialisasi video dan 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 pemutar sebelumnya. 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 kemajuan

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

Mendapatkan waktu pemutaran saat ini secara berkala

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

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 lebih baik, bulatkan ke bawah atau gunakan tempat desimal lebih sedikit.

2. Menyambung ulang setelah aliran langsung terputus: Anda dapat mengonfigurasi jumlah upaya penyambungan 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. Kunci Lisensi dan fitur unduh: Kunci Lisensi yang digunakan untuk pemutaran tidak dapat dipertukarkan dengan fitur unduh. 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 konfigurasi Anda dengan demo Vue resmi untuk debugging.

5. Error 537067523 pada Player SDK untuk Flutter untuk iOS: Atur ID jejak 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 meningkatkan versi Player SDK untuk Web?

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

2. Tingkatkan versi (seperti yang diberikan 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 error 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.

Error cross-origin saat memutar file FLV atau M3U8

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

Pemutar HTML5 tidak dapat masuk mode lanskap

SDK pemutar tidak menyediakan API mode lanskap. Di iOS, mode lanskap bergantung pada pengaturan orientasi sistem. Di Android, pemutar secara otomatis masuk mode lanskap 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 hal 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 error dan menghentikan sisa proses inisialisasi.

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 200ms 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 dialihkan

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

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 tepi siaran langsung setelah melanjutkan aliran

Deskripsi masalah

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

Solusi

Setelah Anda melanjutkan pemutaran, aliran langsung dilanjutkan dari titik waktu saat jeda terjadi. Anda tidak dapat mengonfigurasi parameter untuk mempercepat pemutaran. Kami menyarankan agar Anda menarik ulang aliran langsung, lalu menggunakan 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 langsung

Jika validasi cross-origin lokal gagal, periksa konfigurasi Manajemen Domain Anda. Permintaan dari localhost 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 gambar mini default (latar abu-abu dengan tombol putar) muncul.

Solusi: Atur atribut poster yang tidak valid pada tag <video> untuk mengganti 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>