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 mengatasi kesalahan pemutaran secara mandiri.

Masalah pengembangan

Mengganti vid dan playauth pada pemutar HTML5

 player.replayByVidAndPlayAuth(newVid, newPlayAuth)

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 menampilkan 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();
});

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 ketika pemutaran dijeda, terjadi error, 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 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 saat berada dalam mode layar penuh.

Header Referer tidak ada 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.

loadByUrl tidak berfungsi di iOS dan Android

// `seek` hanya melompat ke waktu tertentu, 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 diganti

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

Penyebab: masalah kompatibilitas browser.

Solusi: upgrade ke Player SDK untuk Web 2.9.19 atau versi 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 siaran langsung setelah melanjutkan aliran

Deskripsi masalah

Jika Anda mengalihkan aplikasi ke latar belakang saat memutar siaran langsung, pemutaran dijeda. Setelah kembali ke aplikasi, siaran 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 pemutaran dilanjutkan, siaran langsung dilanjutkan dari titik waktu saat jeda terjadi. Anda tidak dapat mengonfigurasi parameter untuk mempercepat pemutaran. Kami menyarankan agar Anda menarik ulang siaran langsung, lalu gunakan pemutar untuk memutarnya 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 siaran langsung

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 jika 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: Transkoding video sebelum diputar. 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 tetap 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>