ApsaraVideo VOD：Fitur Lanjutan

Kontrol Pemutaran

Pemutaran Otomatis

• Meskipun Anda mengonfigurasi autoplay: true, pemutaran otomatis mungkin tidak diaktifkan. Hal ini disebabkan oleh sebagian besar browser modern yang menonaktifkan pemutaran otomatis dengan audio untuk meningkatkan pengalaman pengguna.

  Sebagai contoh, kebijakan AutoPlay untuk Chrome adalah sebagai berikut:

  • Selalu mengizinkan pemutaran otomatis dan mute

  • Pemutaran otomatis dengan audio diizinkan dalam skenario berikut:

    • Pengguna telah berinteraksi dengan halaman web, seperti dengan mengklik atau mengetuk.

    • Perilaku menonton video pengguna di situs web telah melewati ambang batas tertentu. Misalnya, jika pengguna sering menonton video di situs web, Chrome mengizinkan pemutaran otomatis dengan audio di situs tersebut. Ini adalah kebijakan internal di Chrome dan tidak dapat diintervensi oleh program.

    • Pengguna telah menambahkan situs web ke layar beranda pada perangkat seluler atau menginstal Progressive Web App (PWA) pada perangkat desktop.

  Dalam kasus seperti itu, Anda dapat:

  • Mengonfigurasi mute:true untuk membisukan pemutaran otomatis. Untuk informasi lebih lanjut, lihat Operasi API.

  • Mengonfigurasi autoplayPolicy: { fallbackToMute: true } untuk mengaktifkan pemutaran otomatis dengan audio terlebih dahulu. Jika pemutaran otomatis dengan audio gagal, pemutaran otomatis dengan mute diaktifkan. Untuk informasi lebih lanjut, lihat Operasi API.

  Perlu diperhatikan bahwa pemutaran otomatis dengan mute juga dapat dinonaktifkan oleh beberapa browser, seperti browser WeChat, sehingga kami tidak dapat menjamin bahwa pemutaran otomatis akan berhasil dalam semua situasi.

  Untuk informasi lebih lanjut tentang kebijakan pemutaran otomatis browser, lihat dokumentasi Chrome dan Safari.

Pemutaran Berkelanjutan

Kustomisasi tampilan dan komponen pemain

ApsaraVideo Player SDK untuk Web memungkinkan Anda menyesuaikan tampilan pemain seperti skin pemain dan menentukan apakah akan menampilkan komponen pemain dan area tampilan setiap komponen. Komponen-komponen ini termasuk bilah kontrol dan UI kesalahan.

• Komponen UI Bilah Kontrol

  Anda dapat menentukan apakah akan menampilkan komponen UI dan area tampilan setiap komponen dengan mengatur atribut skinLayout. Untuk informasi lebih lanjut, lihat Konfigurasi skinLayout.

  • Konfigurasi Default ApsaraVideo Player SDK

    skinLayout:[
       {name: "bigPlayButton", align: "blabs", x: 30, y: 80},
        {name: "H5Loading", align: "cc"},
        {name: "errorDisplay", align: "tlabs", x: 0, y: 0},
        {name: "infoDisplay"},
        {name:"tooltip", align:"blabs",x: 0, y: 56},
        {name: "thumbnail"},
        {
          name: "controlBar", align: "blabs", x: 0, y: 0,
          children: [
            {name: "progress", align: "blabs", x: 0, y: 44},
            {name: "playButton", align: "tl", x: 15, y: 12},
            {name: "timeDisplay", align: "tl", x: 10, y: 7},
            {name: "fullScreenButton", align: "tr", x: 10, y: 12},
            {name:"subtitle", align:"tr",x:15, y:12},
            {name:"setting", align:"tr",x:15, y:12},
            {name: "volume", align: "tr", x: 5, y: 10}
          ]
        }
      ]

• UI Kesalahan

  ApsaraVideo Player SDK untuk Web menyediakan UI kesalahan default. Anda juga dapat menyesuaikan UI kesalahan dengan salah satu metode berikut. Untuk informasi lebih lanjut, lihat Kustomisasi UI kesalahan untuk pemain HTML5.

  • Ubah file CSS dari UI kesalahan default

    Anda dapat menyesuaikan UI kesalahan berdasarkan UI kesalahan default. Anda dapat mengubah file CSS untuk mengubah warna latar belakang, font, dan posisi serta menentukan apakah akan menampilkan pesan kesalahan.

  • Tentukan UI kesalahan baru

    Untuk menentukan UI kesalahan baru, Anda harus berlangganan event kesalahan.

• Konfigurasikan Skin Pemain

  Jika UI yang disediakan oleh ApsaraVideo Player SDK untuk Web tidak dapat memenuhi persyaratan bisnis Anda, Anda dapat mengubah file CSS untuk menyesuaikan skin pemain.

  Pengaturan skin pemain web

  Catatan

  Untuk informasi lebih lanjut tentang konfigurasi, lihat file CSS aliplayer-min.css dari pemain. Contoh kode berikut memberikan contoh cara mengonfigurasi tombol putar besar. Untuk informasi lebih lanjut, lihat Konfigurasi skin pemain.

  .prism-player .prism-big-play-btn {
    width: 90px;
    height: 90px;
    background: url("//gw.alicdn.com/tps/TB1YuE3KFXXXXaAXFXXXXXXXXXX-256-512.png") no-repeat -2px -2px;
  }

Kustomisasi thumbnail video

Setiap video yang Anda unggah ke ApsaraVideo VOD memiliki thumbnail. ApsaraVideo VOD menyediakan beberapa metode untuk Anda mengubah thumbnail. Sebelum mengunggah video, Anda dapat menentukan gambar atau snapshot video sebagai thumbnail. Anda dapat mengubah thumbnail setelah video diunggah. Anda dapat menyesuaikan thumbnail video dengan salah satu metode berikut:

• Konfigurasikan thumbnail video di konsol ApsaraVideo VOD. Untuk informasi lebih lanjut, lihat Atur thumbnail video.

• Konfigurasikan thumbnail video dengan mengatur atribut cover pemain.

  var player = new Aliplayer({
   "id": "player-con",
   "source":"//player.alicdn.com/video/aliyunm****.mp4",
    "cover":"URL Thumbnail",
  },
   function () { } 
  );

Snapshot video

ApsaraVideo Player SDK untuk Web versi V2.1.0 ke atas memungkinkan Anda menangkap snapshot selama pemutaran. Snapshot yang ditangkap dapat berupa tipe image atau jpeg. Fitur snapshot harus diaktifkan secara terpisah. Saat snapshot ditangkap, pemain mengembalikan data gambar biner yang dikodekan Base64 dari snapshot dan posisi pemutaran tempat snapshot diambil dari video sumber.

Aktifkan fitur snapshot

• Aktifkan fitur snapshot di pemain web

  Penting

  Anda tidak dapat menangkap snapshot dari video Flash Video (FLV) yang diputar di Safari. Tombol snapshot tidak muncul meskipun Anda mengaktifkan fitur snapshot. Canvas adalah elemen yang mengaktifkan fitur snapshot untuk pemain web. Anda harus menambahkan header yang mengizinkan berbagi sumber daya lintas domain (CORS) untuk domain pemutaran. Untuk informasi lebih lanjut, lihat Konfigurasi CORS.

  Tambahkan pengaturan UI snapshot ke atribut skinLayout. Contoh kode:

      skinLayout:[
      {name: "bigPlayButton", align: "blabs", x: 30, y: 80},
      {
        name: "H5Loading", align: "cc"
      },
      {name: "errorDisplay", align: "tlabs", x: 0, y: 0},
      {name: "infoDisplay"},
      {name:"tooltip", align:"blabs",x: 0, y: 56},
      {name: "thumbnail"},
      {
        name: "controlBar", align: "blabs", x: 0, y: 0,
        children: [
          {name: "progress", align: "blabs", x: 0, y: 44},
          {name: "playButton", align: "tl", x: 15, y: 12},
          {name: "timeDisplay", align: "tl", x: 10, y: 7},
          {name: "fullScreenButton", align: "tr", x: 10, y: 12},
          {name:"subtitle", align:"tr",x:15, y:12},
          {name:"setting", align:"tr",x:15, y:12},
          {name: "volume", align: "tr", x: 15, y: 10},
          {name: "snapshot", align: "tr", x: 5, y: 12},
        ]
      }
    ]

  Untuk mengaktifkan fitur snapshot untuk pemain web, Anda harus mengatur crossOrigin ke anonymous untuk mengizinkan permintaan lintas domain anonim. Contoh kode:

    extraInfo:{
      crossOrigin:"anonymous"
    }

Atur ukuran dan kualitas snapshot

// Atur lebar snapshot menjadi 300, tinggi menjadi 200, dan kualitas menjadi 0,9.
// Tinggi dan lebar snapshot ditampilkan dalam piksel. Anda dapat mengatur kualitas snapshot ke nilai antara 0 hingga 1. Nilai defaultnya adalah 1.
player.setSanpshotProperties(300,200,0.9)

Berlangganan event snapshoted

player.on("snapshoted", function(data) {
     console.log(data.paramData.time);
     console.log(data.paramData.base64);
     console.log(data.paramData.binary);
 });

Watermark snapshot

snapshotWatermark:{
    left:"100",
    top:"100",
    text:"test",
    font:"italic bold 48px SimSun",
    strokeColor:"red",
    fillColor:'green'
  }

const player = new Aliplayer({
  id: "player-con",
  disableSeek: true,
  source: "https://player.alicdn.com/video/aliyunmedia.mp4",
}, function (player) {
    console.log("Pemain telah dibuat");
  }
);

Fitur untuk video panjang

Streaming bitrate adaptif untuk aliran HLS

Untuk memutar video dalam beberapa bitrate, Anda harus mengatur parameter source ke URL pemutaran multi-bitrate, yang disebut master playlist. Anda juga harus mengatur parameter isVBR ke true. Streaming bitrate adaptif menyesuaikan kualitas video berdasarkan kondisi jaringan. Anda juga dapat menyesuaikan kualitas video secara manual berdasarkan persyaratan bisnis Anda.

Memperoleh URL pemutaran

Memperoleh URL pemutaran video dalam beberapa bitrate: player._hls.levels[player._hls.currentLevel].

varplayer = newAliplayer({
 "id":"player-con",
 "source":"URL pemutaran multi-bitrate",
 "isVBR":true,
 },
 function () { } 
);

Gambar berikut menunjukkan pengaturan kualitas video.

Konfigurasikan subtitle eksternal

// Mengubah bahasa subtitle.
var lang = 'zh-Hans/en-US';
player._ccService.switch(lang);
player._ccService.updateUI(lang); // Elemen UI tidak diperbarui secara otomatis. Anda dapat memanggil operasi API untuk memperbarui elemen UI.

// Mengaktifkan subtitle.
var result = player._ccService.open();
player._ccService.updateUI(result.language);

// Menonaktifkan subtitle.
player._ccService.close();
player._ccService.updateUI();

  .prism-cue > div:first-child,
  video::cue {
    font-size: 14px !important;
    color: #000 !important;
    background-color: rgba(255, 255, 255, .8) !important; /* Rendering subtitle asli di iOS tidak mendukung warna latar belakang. */
  }

Beberapa trek audio

Tidak diperlukan konfigurasi manual untuk ApsaraVideo Player SDK untuk Web. Gambar berikut menunjukkan pengaturan trek audio.

Banyak bahasa

Secara default, ApsaraVideo Player SDK untuk Web mendukung bahasa Cina dan Inggris dan secara otomatis beralih antara Cina dan Inggris berdasarkan pengaturan bahasa browser. ApsaraVideo Player SDK untuk Web memungkinkan Anda menentukan bahasa kustom. ApsaraVideo Player SDK untuk Web memungkinkan Anda memutar video di beberapa wilayah tempat ApsaraVideo VOD tersedia. Anda dapat memutar video yang disimpan di wilayah Asia Tenggara dan Eropa berdasarkan ID video dan kredensial pemutaran.

Catatan penggunaan atribut bahasa

var player = new Aliplayer({
    id: "player-con",
    source: "",
    width: "100%",
    height: "500px",
    autoplay: true,
    language: "en-us",
  }, function (player) {
    console.log("Pemain telah dibuat.");
  });

Buat pemain dengan elemen UI dalam bahasa Inggris

var player = new Aliplayer({
 "id": "player-con",
 "source": "",
 "language": "en-us" // zh-cn menunjukkan Cina. en-us menunjukkan Inggris. 
 },
 function (player) {}
);

Tentukan bahasa kustom untuk pemain

Jika Anda ingin pemain mendukung sumber daya UI dalam bahasa selain Cina dan Inggris, Anda harus menentukan atribut languageTexts. languageTexts berisi daftar pasangan key-value. Nilai atribut language menentukan key, dan nilai JSON menentukan sumber daya UI yang akan diterjemahkan ke dalam bahasa yang ditentukan. Contoh kode:

var player = new Aliplayer({
 "id": "player-con",
 "source": "",
 "language": "CustomLanguage",// Tentukan bahasa dalam tipe STRING.
"languageTexts":{
    "CustomLanguage":{
        "Pause":"Pause"
        // Parameter lainnya. Untuk informasi lebih lanjut, kunjungi https://player.alicdn.com/lang.json? spm=a2c4g.11186623.0.0.5a746515vnwUSi&file=lang.json
            }
        }
    },
    function (player) {} 
);

Memutar Sumber Daya Video yang Disimpan di Beberapa Wilayah

ApsaraVideo Player SDK untuk Web memungkinkan Anda memutar video yang disimpan di wilayah China (Shanghai), Jerman (Frankfurt), dan Singapura. Anda dapat memutar video dengan menggunakan ID video dan kredensial pemutaran atau dengan menggunakan Security Token Service (STS). Pemain mengurai informasi wilayah dan mendapatkan URL pemutaran video di wilayah yang sesuai.

• Pemutaran berdasarkan ID video dan kredensial pemutaran: Pemain mengurai informasi wilayah dari kredensial pemutaran untuk mendapatkan URL pemutaran video. Dalam hal ini, Anda tidak perlu menentukan wilayah dalam konfigurasi.

• Pemutaran berbasis STS: Anda dapat menentukan wilayah tempat video yang ingin Anda putar berada dengan mengatur atribut wilayah. Nilai valid untuk atribut wilayah: cn-shanghai, eu-central-1, dan ap-southeast-1. Nilai default: cn-shanghai. Contoh kode:

  var player = new Aliplayer({
      id: "player-con",
      width: "100%",
      height: "500px",
      autoplay: true,
      language: "en-us",
      vid : '1e067a2831b641db90d570b6480f****',
      accessKeyId: '',// AccessKey ID yang dihasilkan saat token STS sementara diterbitkan. 
      securityToken: '',// Token STS sementara. Untuk menghasilkan token STS, panggil operasi AssumeRole. 
      accessKeySecret: ''// AccessKey ID yang dihasilkan saat token STS sementara diterbitkan. 
      region:'eu-central-1',// Wilayah Jerman (Frankfurt).
    }, function (player) {
      console.log("Pemain telah dibuat.");
    });

Putar video H.265 dan H.266

Catatan penggunaan

• ApsaraVideo Player SDK untuk Web V2.14.0 atau lebih tinggi mendukung pemutaran video H.265 dan ApsaraVideo Player SDK untuk Web V2.20.2 atau lebih tinggi mendukung pemutaran video H.266. Untuk memutar video H.265, ajukan permohonan lisensi dan beli layanan bernilai tambah Pemutaran Video H.265 di Web. Untuk informasi lebih lanjut, lihat Kelola lisensi.

• Untuk informasi lebih lanjut tentang format file audio dan video H.265 dan H.266 yang dapat Anda putar menggunakan ApsaraVideo Player SDK untuk Web, lihat Protokol yang didukung.

• Sebelum Anda memutar video H.265 dan H.266, perhatikan persyaratan yang dijelaskan dalam tabel berikut.

  Item	Deskripsi
  Persyaratan lingkungan	Pemain mengirim permintaan AJAX range untuk mengakses sumber daya video. Browser Anda harus memenuhi persyaratan berikut: Mendukung permintaan HTTP range. Untuk informasi lebih lanjut, lihat Permintaan HTTP range. Mendukung metode OPTIONS. Sebelum browser seperti Firefox mengirim permintaan AJAX dengan header range, browser terlebih dahulu mengirim permintaan HTTP OPTIONS.
  Kompatibilitas	H.265 Perangkat yang menjalankan iOS 11 atau lebih tinggi mendukung pemutaran video H.265. Browser tertentu pada perangkat Android seperti browser bawaan, browser WeChat, UC Browser, dan QQ Browser mendukung decoding perangkat keras video H.265. Dukungan untuk decoding perangkat lunak video H.265 pada browser seperti Chrome, Microsoft Edge, dan Firefox bergantung pada apakah browser mendukung API WebAssembly. Untuk informasi lebih lanjut, kunjungi WebAssembly. Jika Anda menggunakan Chrome atau Chromium di perangkat Anda, perbarui Chrome atau Chromium ke V74 atau lebih tinggi. WebAssembly tidak dapat bekerja sebagaimana mestinya pada Chrome dan Chromium versi sebelum V74. H.266 Tidak ada browser yang mendukung pemutaran video H.266 secara native. Dalam hal ini, decoding perangkat lunak diperlukan untuk memutar video H.266 di browser. Dukungan untuk decoding perangkat lunak video H.266 pada browser bergantung pada apakah browser mendukung API WebAssembly. Untuk informasi lebih lanjut, kunjungi WebAssembly. Jika Anda menggunakan Chrome atau Chromium di perangkat Anda, perbarui Chrome atau Chromium ke V74 atau lebih tinggi. WebAssembly tidak dapat bekerja sebagaimana mestinya pada Chrome dan Chromium versi sebelum V74. Perangkat yang menjalankan iOS 16.4 atau lebih rendah dan sebagian besar perangkat Android kelas menengah dan rendah tidak mendukung decoding perangkat lunak video H.266.
  Kinerja decoding perangkat lunak	H.265 Anda dapat menggunakan browser di PC untuk memutar video dalam resolusi 2K atau lebih rendah dalam proses multi-thread dan memutar video dalam definisi 1080p atau lebih rendah dalam proses single-thread. Frame rate video tidak boleh melebihi 30 frame per detik (FPS). Anda dapat menggunakan browser di perangkat seluler untuk memutar video dalam resolusi 720p atau lebih rendah dalam proses single-thread. Frame rate video tidak boleh melebihi 30 FPS. Kinerja decoding perangkat lunak perangkat seluler bervariasi berdasarkan kinerja chip perangkat. Item berikut menjelaskan chip yang mendukung decoding perangkat lunak video dalam proses single-thread. Video dalam 720p dan FPS video adalah 30. Snapdragon 855 atau lebih baru Kirin 820 atau lebih baru Tianjic 800 atau lebih baru H.266 Anda dapat menggunakan browser di PC untuk memutar video dalam resolusi 1080p atau lebih rendah dalam proses multi-thread dan memutar video dalam definisi 720p atau lebih rendah dalam proses single-thread. Frame rate video tidak boleh melebihi 30 FPS. Anda dapat menggunakan browser di perangkat seluler untuk memutar video dalam resolusi 720p atau lebih rendah dalam proses single-thread. Frame rate video tidak boleh melebihi 30 FPS. Kinerja decoding perangkat lunak perangkat seluler bervariasi berdasarkan kinerja chip perangkat. Item berikut menjelaskan chip yang mendukung decoding perangkat lunak video dalam proses single-thread. Video dalam 720p dan FPS video adalah 30. Snapdragon 855 atau lebih baru Kirin 820 atau lebih baru

Integrasi ApsaraVideo Player SDK untuk Web

<div class="prism-player" id="player-con"></div>
<script>
var options = {
  id: "player-con",
  source: "//demo.example.com/video/test/h265/test_480p_mp4_h265.mp4",
  enableH265: true,
  license: {
    domain: "example.com",
    key: "example-key"
  }
}
var player = new Aliplayer(options);
</script>

<div class="prism-player" id="player-con"></div>
<script>
var options = {
  id: "player-con",
  source: "//demo.example.com/video/test/h266/test_480p_mp4_h266.mp4",
  enableH266: true,
  license: {
    domain: "example.com",
    key: "example-key"
  }
}
var player = new Aliplayer(options);
</script>

{
  //... Konfigurasikan parameter lainnya.
  source: JSON.stringify({
      FD: '//h265_fd.mp4',
      HD: '//h265_hd.mp4'
    }),
}

Pilih metode decoding

Gunakan protokol degradasi untuk pemutaran

player.on('error', (e) => {
        var code = String(e.paramData.error_code);
    if (['4300', '4301', '4302', '4303', '4304'].indexOf(code) > -1) {
      // Beri tahu pengguna atau gunakan protokol degradasi untuk pemutaran jika operasi API tidak didukung di browser Anda atau decoding video gagal.
    }
});

player.on('h265DecoderOverload', (e) => {
    var data = e.paramData;
    // data.decodedFps menentukan jumlah frame per detik yang didekode menggunakan decoding perangkat lunak.
    // data.fps menentukan frame rate video saat ini.
    // data.playbackRate menentukan kecepatan pemutaran saat ini.
    // Jika produk dari data.fps dan data.playbackRate lebih besar dari data.decodedFps selama lebih dari 5 detik, event ini dipicu. Dalam hal ini, tersendat mungkin terjadi selama pemutaran. Anda perlu memberi tahu pengguna atau menggunakan protokol degradasi untuk pemutaran.
});
                            

  var player;

  // Buat pemain.
  function createPlayer(_options) {
    player && player.dispose();
    player = new Aliplayer(_options);
    player.on('error', (e) => {
      var code = String(e.paramData.error_code);
      if (['4300', '4301', '4302', '4303', '4304'].indexOf(code) > -1) {
        fallbackTo264(_options)
      }
    });
    player.on('h265DecoderOverload', () => {
      // Kami sarankan Anda menggunakan protokol degradasi untuk pemutaran setelah dua event kesalahan berturut-turut dipicu karena decoding juga dapat memicu event kesalahan.
      fallbackTo264(_options)
    })
    return player;
  }

  // Konfigurasikan logika degradasi.
  function fallbackTo264(_options) {
      // Tentukan URL pemutaran video H.264 untuk parameter source.
      _options.source = '//h264.mp4';
      // Atur enableH265 ke false untuk menonaktifkan penciuman codec.
      _options.enableH265 = false;
      createPlayer(_options);
  }

  // Inisialisasi pemain.
  var options = {
    id: "player-con",
    source: "//h265.mp4",
    enableH265: true
  }
  createPlayer(options)

player.on('error', (e) => {
        var code = String(e.paramData.error_code);
    if (['4300', '4301', '4302', '4303', '4304'].indexOf(code) > -1) {
      // Beri tahu pengguna atau gunakan protokol degradasi untuk pemutaran jika operasi API tidak didukung di browser Anda atau decoding video gagal.
    }
});          

  var player;

  // Buat pemain.
  function createPlayer(_options) {
    player && player.dispose();
    player = new Aliplayer(_options);
    player.on('error', (e) => {
      var code = String(e.paramData.error_code);
      if (['4300', '4301', '4302', '4303', '4304'].indexOf(code) > -1) {
        fallbackTo264(_options)
      }
    });
    return player;
  }

  // Konfigurasikan logika degradasi.
  function fallbackTo264(_options) {
      // Tentukan URL pemutaran video H.264 untuk parameter source.
      _options.source = '//h264.mp4';
      // Atur enableH266 ke false untuk menonaktifkan penciuman codec.
      _options.enableH266 = false;
      createPlayer(_options);
  }

  // Inisialisasi pemain.
  var options = {
    id: "player-con",
    source: "//h266.mp4",
    enableH266: true
  }
  createPlayer(options)

API

Untuk informasi lebih lanjut tentang atribut, metode, dan event yang didukung dalam ApsaraVideo Player SDK untuk Web serta deskripsi dan contoh yang sesuai, lihat Operasi API. Bagian berikut menjelaskan atribut, metode, dan event yang didukung untuk video H.265 dan H.266:

• Atribut yang Didukung

  source, autoplay, rePlay, preload, cover, width, height, skinLayout, waitingTimeout, vodRetry, keyShortCuts, dan keyFastForwardStep

• Metode yang Didukung

  play, pause, replay, seek, dispose, getCurrentTime, getDuration, getVolume, setVolume, loadByUrl, setPlayerSize, setSpeed, setSanpshotProperties, fullscreenService, getStatus, setRotate, getRotate, setImage, setCover, setProgressMarkers, setPreviewTime, getPreviewTime, dan isPreview

• Event yang Didukung

  ready, play, pause, canplay, playing, ended, hideBar, showBar, waiting, timeupdate, snapshoted, requestFullScreen, cancelFullScreen, error, startSeek, completeSeek, h265PlayInfo, dan h266PlayInfo

  Catatan

  Callback h265PlayInfo dan h266PlayInfo mengembalikan metode pemutaran yang digunakan untuk video H.265 atau H.266. renderType menunjukkan metode pemutaran, simd menunjukkan pemrosesan SIMD, dan wasmThreads menunjukkan pemrosesan multi-thread.

Kode kesalahan

Tabel berikut menjelaskan kode kesalahan yang mungkin dikembalikan untuk kesalahan pemutaran H.265 dan H.266. Untuk informasi lebih lanjut tentang kode kesalahan lainnya, lihat Operasi API.

Aktifkan pemrosesan multi-thread

Contoh

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

Pergeseran waktu

• Aktifkan Pergeseran Waktu

  • Anda harus mengaktifkan fitur pergeseran waktu di ApsaraVideo Live. Untuk informasi lebih lanjut, lihat Pergeseran Waktu.

  • Tabel berikut menjelaskan atribut yang harus Anda atur untuk mengaktifkan pergeseran waktu untuk pemain.

    Atribut	Deskripsi
    isLive	Atur nilai menjadi true.
    liveTimeShiftUrl	URL yang digunakan untuk menanyakan informasi pergeseran waktu.
    liveStartTime	Waktu mulai streaming langsung.
    liveOverTime	Waktu akhir streaming langsung.
    liveShiftSource	URL HLS untuk pergeseran waktu. Catatan Atribut ini hanya diperlukan untuk streaming langsung FLV.
    liveShiftMinOffset	Periode waktu tertentu diperlukan untuk menghasilkan segmen TS selama pergeseran waktu. Jika Anda mencari posisi yang sangat dekat dengan waktu streaming langsung saat ini, segmen TS gagal dihasilkan dan kesalahan 404 dilaporkan. Periode waktu minimum harus ditentukan antara posisi pencarian dan waktu streaming langsung saat ini. Anda dapat mengatur parameter ini untuk menentukan periode waktu dalam detik. Nilai default: 30. Segmen dihasilkan setiap 10 detik. Ini memastikan bahwa setidaknya ada tiga segmen.

• UI Pergeseran Waktu

  UI pergeseran waktu terutama adalah bilah kemajuan, yang menampilkan waktu di area yang mendukung pergeseran waktu.

  Catatan

  Area waktu menampilkan waktu pemutaran saat ini, waktu akhir streaming langsung, dan waktu streaming langsung saat ini dari kiri ke kanan.

• Ubah Waktu Akhir Streaming Langsung

  Anda dapat memanggil metode liveShiftSerivce.setLiveTimeRange untuk mengubah waktu mulai dan akhir streaming langsung. UI berubah saat waktu mulai atau akhir berubah. Contoh kode:

  player.liveShiftSerivce.setLiveTimeRange(""'2018/01/04 20:00:00')

• FLV untuk Streaming Langsung dan HLS untuk Pergeseran Waktu

  Untuk mengurangi latensi, kami sarankan Anda menggunakan FLV untuk streaming langsung dan HLS untuk pergeseran waktu.

  Konfigurasi ApsaraVideo Player SDK untuk Web:

  • source: URL aliran langsung dalam format FLV.

  • liveShiftSource: URL aliran pergeseran waktu dalam format HLS.

  Contoh kode:

  {
   source:'http://localhost/live****/example.flv',
   liveShiftSource:'http://localhost/live****/example.m3u8',
  }

Kustomisasi penyebaran

Secara default, sumber daya di ApsaraVideo VOD seperti file JavaScript dan CSS disimpan di Alibaba Cloud CDN. Untuk menyebarkan sumber daya ini ke server Anda, lakukan langkah-langkah berikut:

1. Unduh sumber daya untuk ApsaraVideo Player SDK.

   Anda harus mendapatkan paket sumber daya lengkap karena ApsaraVideo Player secara dinamis merujuk file sumber daya selain file aliplayer-min.js dan aliplayer-min.css.

   Tautan unduhan: apsara-media-box-imp-web-player-dist.tar.gz

2. Ekstrak paket dan sebarkan file.

   Ekstrak paket sumber daya dan sebarkan semua file dalam folder ke server Anda. Pastikan tingkat direktori file tidak berubah.

3. Inisialisasi pemain dalam jalur kustom.

   Contoh kode berikut memberikan contoh URL file CSS dan JavaScript untuk penyebaran kustom:

   https://player.alicdn.com/assets/skins/default/aliplayer-min.css
   https://player.alicdn.com/assets/aliplayer-min.js

   Lakukan langkah-langkah berikut untuk menginisialisasi pemain:

   1. Rujuk URL file CSS dan JavaScript di bagian atas halaman.

      <head>
        <link rel="stylesheet" href="https://player.alicdn.com/assets/skins/default/aliplayer-min.css" />
        <script charset="utf-8" type="text/javascript" src="https://player.alicdn.com/assets/aliplayer-min.js"></script>
      </head>

   2. Inisialisasi pemain dan tentukan parameter assetPrefix.

      Parameter assetPrefix menentukan awalan jalur kustom. Jika Anda memutar video HLS di pemain, sistem secara dinamis merujuk file https://player.alicdn.com/assets/hls/aliplayer-hls2-min.js. Pastikan jalur file tersebut benar.

      new Aliplayer({
        assetPrefix: 'https://player.alicdn.com/assets'
        // Tentukan parameter lainnya.
      })

Referensi

• Komponen

• Operasi API

• FAQ tentang ApsaraVideo Player SDK untuk Web

• Kustomisasi komponen

• Kustomisasi UI kesalahan untuk pemain HTML5

• Tangani kesalahan dan lanjutkan streaming langsung