ApsaraVideo VOD:Fitur lanjutan

Kontrol pemutaran

Putar otomatis

• Meskipun Anda telah mengonfigurasi autoplay: true, fitur putar otomatis mungkin tidak aktif karena sebagian besar browser modern menonaktifkan putar otomatis dengan audio demi menjaga pengalaman pengguna.

  Sebagai contoh, kebijakan AutoPlay Chrome adalah sebagai berikut:

  • Selalu izinkan putar otomatis dan bisukan

  • Putar otomatis dengan audio diizinkan dalam skenario berikut:

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

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

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

  Dalam kasus tersebut, Anda dapat:

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

  • Mengonfigurasi autoplayPolicy: { fallbackToMute: true } agar sistem terlebih dahulu mencoba memutar otomatis dengan audio. Jika gagal, pemutaran otomatis akan dilanjutkan dalam mode bisu. Untuk informasi lebih lanjut, lihat Operasi API.

  Perlu diperhatikan bahwa putar otomatis dalam mode bisu juga dapat dinonaktifkan oleh beberapa browser, seperti browser WeChat, sehingga kami tidak dapat menjamin keberhasilan putar otomatis dalam semua kondisi.

  Untuk informasi lebih lanjut mengenai kebijakan autoplay browser, lihat dokumentasi Chrome dan Safari.

Pemutaran berkelanjutan

Kustomisasi tampilan dan komponen pemutar

ApsaraVideo Player SDK untuk Web memungkinkan Anda menyesuaikan tampilan pemutar, seperti skin pemutar, serta menentukan apakah komponen pemutar dan area tampilannya ditampilkan. Komponen tersebut mencakup control bar dan UI error.

• Komponen UI control bar

  Anda dapat menentukan apakah komponen UI dan area tampilan masing-masing ditampilkan 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 error

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

  • Ubah file CSS dari UI error default

    Anda dapat menyesuaikan UI error berdasarkan UI error default dengan mengubah file CSS untuk mengatur warna latar belakang, font, posisi, serta menentukan apakah pesan error ditampilkan.

  • Tentukan UI error baru

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

• Konfigurasi skin pemutar

  Jika UI bawaan ApsaraVideo Player SDK untuk Web tidak memenuhi kebutuhan bisnis Anda, Anda dapat menyesuaikan skin pemutar dengan mengubah file CSS.

  Pengaturan skin pemutar web

  Catatan

  Untuk informasi lebih lanjut tentang konfigurasi, lihat file CSS aliplayer-min.css pemutar. Kode contoh berikut menunjukkan cara mengonfigurasi tombol putar besar. Untuk informasi lebih lanjut, lihat Konfigurasi skin pemutar.

  .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 gambar mini video

Setiap video yang diunggah ke ApsaraVideo VOD memiliki gambar mini. ApsaraVideo VOD menyediakan beberapa metode untuk mengubah gambar mini tersebut. Sebelum mengunggah video, Anda dapat menentukan gambar atau tangkapan video sebagai gambar mini. Anda juga dapat mengubah gambar mini setelah video diunggah. Penyesuaian gambar mini video dapat dilakukan dengan salah satu metode berikut:

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

• Konfigurasikan gambar mini video dengan mengatur atribut cover pemutar.

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

Tangkapan video

ApsaraVideo Player SDK untuk Web versi V2.1.0 dan yang lebih baru mendukung pengambilan snapshot selama pemutaran video. Format output dapat berupa image atau jpeg. Fitur ini harus diaktifkan secara eksplisit. Data snapshot yang dikembalikan mencakup timestamp pemutaran, string Base64, dan data biner gambar.

Aktifkan fitur snapshot

• Aktifkan fitur snapshot di pemutar web

  Penting

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

  Tambahkan pengaturan UI snapshot ke atribut skinLayout. Kode contoh:

      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 pada pemutar web, Anda harus mengatur crossOrigin ke anonymous guna mengizinkan permintaan lintas asal anonim. Kode contoh:

    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 default 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("Pemutar telah dibuat");
  }
);

Fitur untuk video panjang

Streaming bitrate adaptif untuk aliran HLS

Untuk mengaktifkan streaming multi-bitrate, atur parameter source ke URL daftar putar utama dan parameter isVBR ke true. Fitur ini memungkinkan pemutar secara otomatis beralih antar level kualitas video berdasarkan kondisi jaringan. Pengguna juga dapat mengganti kualitas secara manual.

Dapatkan URL pemutaran

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

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

Menu pengaturan pemutar menampilkan opsi Quality, seperti Auto(360), yang dapat diklik pengguna untuk mengganti kualitas video.

Konfigurasi subtitle eksternal

// Ganti bahasa subtitle.
var lang = 'zh-Hans/en-US';
player._ccService.switch(lang);
player._ccService.updateUI(lang); // API tidak memperbarui UI secara default. Anda harus memanggil metode ini secara manual jika diperlukan.
// Aktifkan subtitle.
var result = player._ccService.open();
player._ccService.updateUI(result.language);
// Nonaktifkan 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 native di iOS tidak mendukung warna latar belakang. */
  }

Beberapa track audio

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

Beberapa bahasa

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

Catatan penggunaan untuk atribut language

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

Buat pemutar dengan elemen UI dalam bahasa Inggris

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

Tentukan bahasa kustom untuk pemutar

Untuk mendukung bahasa selain Tiongkok dan Inggris, Anda dapat menggunakan fitur bahasa kustom dengan menentukan sumber daya bahasa melalui atribut languageTexts. Atribut languageTexts adalah objek literal di mana nilai atribut language berfungsi sebagai kunci, dan nilai JSON-nya berisi konten sumber daya yang diterjemahkan untuk bahasa tersebut. Kode berikut memberikan contoh:

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

Putar sumber daya video yang disimpan di beberapa wilayah

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

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

• Pemutaran berbasis STS: Gunakan properti region untuk menentukan wilayah video. Nilai default adalah 'cn-shanghai'. Nilai valid lainnya termasuk eu-central-1 dan ap-southeast-1. Contohnya:

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

Memutar video H.265 dan H.266

Catatan penggunaan

• ApsaraVideo Player SDK untuk Web versi V2.14.0 atau yang lebih baru mendukung pemutaran video H.265, sedangkan versi V2.20.2 atau yang lebih baru mendukung pemutaran video H.266. Untuk memutar video H.265, Anda perlu mengajukan permohonan lisensi dan membeli layanan bernilai tambah Pemutaran Video H.265 di Web. Untuk informasi lebih lanjut, lihat Mengelola lisensi.

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

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

  Item	Deskripsi
  Persyaratan lingkungan	Pemutar mengirim permintaan AJAX range untuk mengakses sumber daya video. Browser Anda harus memenuhi persyaratan berikut: Mendukung permintaan range HTTP. Untuk informasi lebih lanjut, lihat Permintaan range HTTP. 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 yang lebih baru mendukung pemutaran video H.265. Browser tertentu di perangkat Android seperti browser bawaan, browser WeChat, UC Browser, dan QQ Browser mendukung decoding hardware video H.265. Dukungan untuk decoding software 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 versi V74 atau yang lebih baru. WebAssembly tidak dapat berfungsi sebagaimana mestinya pada Chrome dan Chromium versi sebelum V74. H.266 Tidak ada browser yang secara native mendukung pemutaran video H.266. Dalam kasus ini, decoding software diperlukan untuk memutar video H.266 di browser. Dukungan untuk decoding software 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 versi V74 atau yang lebih baru. WebAssembly tidak dapat berfungsi sebagaimana mestinya pada Chrome dan Chromium versi sebelum V74. Perangkat yang menjalankan iOS 16.4 atau yang lebih lama dan sebagian besar perangkat Android kelas menengah dan rendah tidak mendukung decoding software video H.266.
  Kinerja decoding software	H.265 Anda dapat menggunakan browser di PC untuk memutar video dengan resolusi 2K atau lebih rendah dalam proses multi-thread dan memutar video dengan definisi 1080p atau lebih rendah dalam proses single-thread. Laju frame video tidak boleh melebihi 30 frame per detik (FPS). Anda dapat menggunakan browser di perangkat seluler untuk memutar video dengan resolusi 720p atau lebih rendah dalam proses single-thread. Laju frame video tidak boleh melebihi 30 FPS. Kinerja decoding software perangkat seluler bervariasi berdasarkan kinerja chip perangkat. Item berikut menjelaskan chip yang mendukung decoding software video dalam proses single-thread. Video beresolusi 720p dan FPS video adalah 30. Snapdragon 855 atau yang lebih baru Kirin 820 atau yang lebih baru Tianjic 800 atau yang lebih baru H.266 Anda dapat menggunakan browser di PC untuk memutar video dengan resolusi 1080p atau lebih rendah dalam proses multi-thread dan memutar video dengan definisi 720p atau lebih rendah dalam proses single-thread. Laju frame video tidak boleh melebihi 30 FPS. Anda dapat menggunakan browser di perangkat seluler untuk memutar video dengan resolusi 720p atau lebih rendah dalam proses single-thread. Laju frame video tidak boleh melebihi 30 FPS. Kinerja decoding software perangkat seluler bervariasi berdasarkan kinerja chip perangkat. Item berikut menjelaskan chip yang mendukung decoding software video dalam proses single-thread. Video beresolusi 720p dan FPS video adalah 30. Snapdragon 855 atau yang lebih baru Kirin 820 atau yang lebih baru

Integrasikan 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>

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

Pilih metode decoding

Gunakan protokol terdegradasi untuk pemutaran

player.on('error', (e) => {
        var code = String(e.paramData.error_code);
    if (['4300', '4301', '4302', '4303', '4304'].indexOf(code) > -1) {
      // Jika API tidak didukung atau terjadi kesalahan decoding, tampilkan pesan atau terapkan fallback.
    }
});
player.on('h265DecoderOverload', (e) => {
    var data = e.paramData;
    // data.decodedFps - Jumlah frame yang didekode per detik saat ini oleh decoder software.
    // data.fps - Laju frame video saat ini.
    // data.playbackRate - Kecepatan pemutaran saat ini.
    // Event ini dipicu jika decodedFps < (fps * playbackRate) berlangsung lebih dari 5 detik.
    // Pada titik ini, pemutaran mungkin tersendat, dan Anda harus mempertimbangkan untuk memberi tahu pengguna atau menerapkan fallback.
});
                            

  var player;
  // Buat pemutar
  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 menyarankan menerapkan fallback setelah event ini dipicu dua kali, karena satu kali pemicuan mungkin disebabkan oleh fluktuasi decoding sementara.
      fallbackTo264(_options)
    })
    return player;
  }
  // Fungsi fallback
  function fallbackTo264(_options) {
      // Atur source ke URL video fallback H.264.
      _options.source = '//h264.mp4';
      // Nonaktifkan enableH265 untuk melewati deteksi codec.
      _options.enableH265 = false;
      createPlayer(_options);
  }
  // Inisialisasi pemutar
  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 terdegradasi untuk pemutaran jika operasi API tidak didukung di browser Anda atau decoding video gagal.
    }
});          

  var player;
  // Buat pemutar
  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;
  }
  // Fungsi fallback
  function fallbackTo264(_options) {
      // Atur source ke URL video fallback H.264.
      _options.source = '//h264.mp4';
      // Nonaktifkan enableH266 untuk melewati deteksi codec.
      _options.enableH266 = false;
      createPlayer(_options);
  }
  // Inisialisasi pemutar
  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 contohnya, lihat Operasi API. Berikut adalah atribut, metode, dan event yang didukung khusus 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 error 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

> self.crossOriginIsolated
< true
> SharedArrayBuffer
< ƒ SharedArrayBuffer() { [native code] }

[TEST LOG] [H265PlayInfo]
{
  codecTag: "hvc1",
  renderType: "wasm",
  simd: true,
  simdOption: true,
  wasmThreads: true,
  wasmThreadsOption: true
}

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 pada pemutar.

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

• UI pergeseran waktu

  UI pergeseran waktu terutama berupa progress bar yang menampilkan waktu di area yang mendukung pergeseran waktu.

  Catatan

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

• Ubah waktu akhir siaran langsung

  Selama pemutaran, Anda dapat memanggil metode liveShiftService.setLiveTimeRange untuk menyesuaikan waktu mulai dan waktu akhir siaran langsung. UI akan diperbarui sesuai. Contoh:

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

• FLV untuk siaran langsung dan HLS untuk pergeseran waktu

  Untuk mengurangi latensi, kami menyarankan Anda menggunakan FLV untuk siaran langsung dan HLS untuk pergeseran waktu.

  Konfigurasi ApsaraVideo Player SDK untuk Web:

  • source: URL siaran langsung dalam format FLV.

  • liveShiftSource: URL aliran pergeseran waktu dalam format HLS.

  Kode contoh:

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

Kustomisasi penerapan

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

1. Unduh sumber daya untuk ApsaraVideo Player SDK.

   Selain dua file utama, aliplayer-min.js dan aliplayer-min.css, ApsaraVideo Player SDK untuk Web juga mereferensi file sumber daya lain secara dinamis. Oleh karena itu, Anda harus terlebih dahulu mendapatkan folder sumber daya lengkap.

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

2. Ekstrak paket dan terapkan file-file tersebut.

   Ekstrak paket sumber daya dan terapkan semua file dalam folder ke server Anda. Pastikan struktur direktori file tidak diubah.

3. Inisialisasi pemutar di jalur kustom.

   Kode contoh berikut menunjukkan URL file CSS dan JavaScript untuk penerapan 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 pemutar:

   1. Referensikan 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 pemutar dan tentukan parameter assetPrefix.

      Parameter assetPrefix menentukan awalan untuk alamat penerapan kustom Anda. Jika pemutar digunakan untuk memutar video HLS, pemutar akan mereferensi file https://player.alicdn.com/assets/hls/aliplayer-hls2-min.js secara dinamis. Pastikan file tersebut ditempatkan di alamat yang 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 error untuk pemutar HTML5

• Tangani error dan lanjutkan siaran langsung