ApsaraVideo VOD：Fitur Lanjutan

Kontrol Pemutaran

Pemutaran Otomatis

• Jika Anda mengatur autoplay ke true tetapi video tidak diputar secara otomatis, hal ini merupakan masalah umum. Sebagian besar browser modern memblokir pemutaran otomatis dengan suara untuk menghindari gangguan kepada pengguna.

  Sebagai contoh, kebijakan autoplay Chrome adalah sebagai berikut:

  • Autoplay dalam kondisi bisu (muted) selalu diizinkan.

  • Autoplay dengan suara diizinkan dalam skenario berikut:

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

    • Perilaku menonton video pengguna di suatu situs web telah melebihi ambang batas tertentu. Misalnya, jika pengguna sering menonton video di situs web tertentu, Chrome mengizinkan situs tersebut untuk memutar video secara otomatis dengan suara. Kebijakan ini dikendalikan secara internal oleh Chrome dan tidak dapat dipengaruhi oleh program Anda.

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

  Untuk mengatasi hal ini, Anda dapat melakukan langkah-langkah berikut:

  • Atur mute ke true untuk mengaktifkan autoplay dengan suara dimatikan. Untuk informasi selengkapnya, lihat Referensi API Aliplayer.

  • Atur autoplayPolicy: { fallbackToMute: true } untuk mencoba memutar dengan suara terlebih dahulu. Jika gagal, pemutar akan mencoba memutar dalam mode senyap. Untuk informasi selengkapnya, lihat Referensi API Aliplayer.

  Perlu diperhatikan bahwa beberapa browser, seperti browser di WeChat, juga dapat memblokir autoplay meskipun audio-nya dibisukan. Oleh karena itu, autoplay tidak dijamin berfungsi dalam semua kasus.

  Untuk informasi selengkapnya mengenai kebijakan autoplay browser, lihat dokumentasi Chrome atau Safari.

Pemutaran Berkelanjutan

Kustomisasi skin dan kontrol pemutar

Web Player SDK memungkinkan Anda menyesuaikan skin pemutar serta mengontrol tampilan dan posisi komponen, seperti bilah kontrol dan UI kesalahan.

• UI Bilah Kontrol Pemutar

  Anda dapat memodifikasi properti skinLayout untuk menyesuaikan komponen yang ditampilkan dan posisinya. Untuk informasi lebih lanjut, lihat Konfigurasi properti skinLayout.

  • Konfigurasi default untuk ApsaraVideo VOD

    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

  Web Player SDK menyediakan UI kesalahan default dan dua cara untuk menyesuaikannya. Untuk informasi lebih lanjut, lihat Kustomisasi UI kesalahan di H5.

  • Kustomisasi skin menggunakan CSS

    Anda dapat mempertahankan tata letak dan tampilan asli pemutar, tetapi menyesuaikan skin dengan menulis ulang CSS untuk mengubah warna latar belakang, visibilitas, font, posisi, dan atribut lainnya.

  • Menulis ulang UI

    Untuk menulis ulang UI, Anda harus berlangganan event kesalahan.

• Skin Web Player SDK

  Jika UI default Web Player SDK tidak memenuhi kebutuhan Anda, Anda dapat mengonfigurasi gaya CSS pemutar untuk menentukan skin kustom.

  Atur skin pemutar web

  Catatan

  Untuk informasi lebih lanjut, lihat file konfigurasi CSS pemutar aliplayer-min.css. Kode berikut menunjukkan contoh cara memodifikasi tombol putar besar. Untuk informasi lebih lanjut, lihat Atur 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 thumbnail video

Anda dapat mengatur gambar mini untuk setiap video yang diunggah ke ApsaraVideo VOD melalui beberapa cara. Sebelum mengunggah video, Anda dapat memilih gambar tertentu sebagai gambar mini atau mengambil bingkai dari video untuk digunakan sebagai gambar mini. Anda juga dapat memperbarui gambar mini setelah video diunggah. Metode berikut tersedia untuk mengatur gambar mini:

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

• Atur gambar mini menggunakan properti cover pemutar.

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

Tangkapan layar video

Web Player SDK versi 2.1.0 dan yang lebih baru mendukung pengambilan tangkapan layar selama pemutaran video. Gambar yang diambil bertipe image atau jpeg. Anda harus mengaktifkan fitur tangkapan layar secara terpisah. Data yang dikembalikan dari tangkapan layar mencakup waktu pemutaran saat ini serta gambar dalam format base64 dan biner.

Aktifkan fitur tangkapan layar

• Aktifkan fitur tangkapan layar di pemutar web

  Penting

  Fitur tangkapan layar tidak didukung untuk video FLV di browser Safari. Tombol tangkapan layar tidak muncul meskipun diaktifkan. Selain itu, Web Player SDK menggunakan Canvas untuk mengambil tangkapan layar. Oleh karena itu, Anda harus menambahkan header akses lintas domain ke nama domain pemutaran Anda. Untuk informasi lebih lanjut, lihat Konfigurasi akses lintas domain.

  Anda dapat menambahkan snapshot UI ke dalam array skinLayout. Contoh berikut menunjukkan kodenya:

      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 mengambil tangkapan layar menggunakan Web Player SDK, Anda harus mengatur atribut video cross-origin agar mengizinkan akses lintas domain anonim. Contoh kode berikut menunjukkan implementasinya:

    extraInfo:{
      crossOrigin:"anonymous"
    }

Atur ukuran dan kualitas tangkapan layar

// Atur lebar, tinggi, dan kualitas tangkapan layar menjadi 300, 200, dan 0,9.
// Tinggi dan lebar dalam satuan piksel. Kualitas berupa angka antara 0 dan 1. Nilai default adalah 1.
player.setSanpshotProperties(300,200,0.9)

Berlangganan event tangkapan layar

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

Watermark tangkapan layar

snapshotWatermark:{
    left:"100",
    top:"100",
    text:"Test watermark",
    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");
  }
);

Skenario video panjang

Peralihan bitrate adaptif untuk HLS

Untuk streaming bitrate adaptif, Anda dapat memberikan URL multi-bitrate (daftar putar utama) ke parameter source dan mengatur isVBR:true. Streaming bitrate adaptif mendukung peralihan definisi video secara otomatis maupun manual berdasarkan kondisi jaringan.

Dapatkan URL pemutaran saat ini

Bitrate adaptif: player._hls.levels[player._hls.currentLevel]

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

Gambar berikut menunjukkan hasilnya.

Subtitle eksternal

// Ganti subtitle
var lang = 'zh-Hans/en-US';
player._ccService.switch(lang);
player._ccService.updateUI(lang); // API tidak memperbarui UI secara default. Panggil 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 iOS native tidak mendukung warna latar belakang */
  }

Multi-track audio

Tidak diperlukan pengaturan tambahan untuk pemutar. Gambar berikut menunjukkan hasilnya.

Multi-bahasa

Web Player SDK mendukung bahasa Tiongkok dan Inggris secara default serta secara otomatis mengaktifkan sumber daya Tiongkok atau Inggris berdasarkan pengaturan bahasa browser. Selain kedua bahasa tersebut, SDK juga memungkinkan Anda menentukan bahasa kustom. Web Player SDK juga mendukung pemutaran multi-wilayah untuk ApsaraVideo VOD, sehingga memungkinkan pemutaran Vid+PlayAuth untuk sumber daya video dari wilayah seperti Asia Tenggara dan Eropa.

Properti pengaturan bahasa

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

Versi bahasa Inggris pemutar

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

Bahasa kustom

Untuk mendukung bahasa selain Tiongkok dan Inggris, Anda dapat menggunakan fitur bahasa kustom. Anda dapat menggunakan properti languageTexts untuk menentukan sumber daya bahasa. Properti languageTexts menggunakan format literal objek. Kuncinya adalah nilai properti language, dan nilainya adalah objek JSON yang berisi sumber daya terjemahan untuk bahasa yang ditentukan. Berikut adalah contoh kode:

var player = new Aliplayer({
 "id": "player-con",
 "source": "",
 "language": "CustomLanguage",// Beri nama sendiri, cukup berupa string
"languageTexts":{
    "CustomLanguage":{
        "Pasue":"CustomLanguage Pause"
        // Untuk bidang pemutar lainnya, lihat https://player.alicdn.com/lang.json?spm=a2c4g.11186623.0.0.5a746515vnwUSi&file=lang.json
            }
        }
    },
    function (player) {} 
);

Dukungan untuk Pemutaran Multi-wilayah

ApsaraVideo VOD tersedia di wilayah berikut: Shanghai, Frankfurt, dan Singapura. Metode pemutaran Vid+PlayAuth dan STS dari Web Player SDK mendukung pemutaran multi-wilayah. Saat pemutar menentukan video dari wilayah mana yang ingin diputar pengguna, pemutar tersebut memanggil layanan ApsaraVideo VOD di wilayah tersebut untuk memperoleh URL pemutaran video.

• Pemutaran Vid+PlayAuth: Pemutar mengurai Region dari playauth untuk memperoleh video dari wilayah yang sesuai. Oleh karena itu, Anda tidak perlu menentukan wilayah untuk pemutaran.

• Pemutaran STS: Anda dapat menggunakan properti Region pada pemutar untuk menentukan wilayah video yang akan diputar. Nilai default untuk Region adalah 'cn-shanghai'. Nilai valid lainnya meliputi `cn-shanghai`, `eu-central-1`, dan `ap-southeast-1`. Contoh kode berikut menunjukkan implementasinya:

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

Mainkan aliran video berkode H.265/H.266

Prasyarat

• Web Player SDK mendukung pemutaran aliran video berkode H.265 mulai dari versi V2.14.0 dan H.266 mulai dari V2.20.2. Untuk menggunakan fitur ini, Anda harus mengajukan lisensi dan membeli layanan bernilai tambah pemutaran H.265 untuk Web Player SDK. Untuk informasi lebih lanjut, lihat Kelola lisensi.

• Untuk informasi tentang format audio dan video yang didukung untuk pengkodean H.265/H.266 di Web Player SDK, lihat Protokol yang didukung.

• Sebelum menggunakan fitur pemutaran aliran video H.265/H.266, pastikan Anda memahami persyaratan lingkungan pemutar dan kompatibilitas browser. Tabel berikut menjelaskan detailnya.

  Item	Deskripsi
  Persyaratan lingkungan	Pemutar meminta sumber daya video dalam segmen menggunakan Asynchronous JavaScript and XML (AJAX). Oleh karena itu, layanan video harus mendukung fitur berikut: Dukungan untuk permintaan range. Dukungan untuk permintaan OPTIONS. Browser seperti Firefox mengirim permintaan OPTIONS sebelum memulai permintaan AJAX dengan header range.
  Kompatibilitas	H.265 Perangkat dengan iOS 11 atau lebih baru secara native mendukung pemutaran video H.265. Beberapa browser perangkat Android sudah mendukung decoding hardware video H.265, seperti browser bawaan sistem, browser WeChat, UC Browser, dan QQ Browser. Untuk skenario decoding software di browser seperti Chrome, Edge, dan Firefox, kompatibilitas bergantung pada dukungan browser terhadap API WebAssembly. Untuk detail dukungan, lihat WebAssembly. Karena masalah performa WebAssembly di versi lama, browser Chrome dan berbasis Chromium harus versi 74 atau lebih baru. H.266 Saat ini, tidak ada browser yang secara native mendukung pemutaran H.266, sehingga pemutar menggunakan solusi decoding software. Hal ini memerlukan tingkat kompatibilitas tertentu dengan API WebAssembly browser. Untuk detail dukungan, lihat WebAssembly. Karena masalah performa WebAssembly di versi lama, browser Chrome dan berbasis Chromium harus versi 74 atau lebih baru. iOS versi di bawah 16.4 dan sebagian besar model Android kelas menengah ke bawah tidak dapat melakukan decoding software H.266.
  Kinerja decoding perangkat lunak	H.265 Di browser desktop, decoding multi-threaded mendukung video hingga 2K pada 30 fps. Decoding single-threaded mendukung video hingga 1080p pada 30 fps. Di browser seluler, decoding single-threaded mendukung video hingga 720p pada 30 fps. Performa decoding software seluler terutama bergantung pada performa chip. Pengujian menunjukkan bahwa chip berikut dapat melakukan decoding software 720p/30fps secara lancar dalam single thread. Snapdragon 855 dan lebih baru Kirin 820 dan lebih baru Dimensity 800 dan lebih baru H.266 Di browser desktop, decoding multi-threaded mendukung video hingga 1080p pada 30 fps. Decoding single-threaded mendukung video hingga 720p pada 30 fps. Di browser seluler, decoding single-threaded mendukung video hingga 720p pada 30 fps. Performa decoding software seluler terutama bergantung pada performa chip. Pengujian menunjukkan bahwa chip berikut dapat melakukan decoding software 720p/30fps secara lancar dalam single thread. Snapdragon 855 dan lebih baru Kirin 820 dan lebih baru

Integrasi cepat

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

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

Logika pemilihan solusi decoding

Pemutaran cadangan

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, beri prompt pengguna atau lakukan fallback.
    }
});

player.on('h265DecoderOverload', (e) => {
    var data = e.paramData;
    // data.decodedFps - Frame per detik decoding software saat ini
    // data.fps - Laju bingkai video saat ini
    // data.playbackRate - Laju pemutaran saat ini
    // Ketika decodedFps < (fps * playbackRate) selama lebih dari 5 detik, event ini dipicu.
    // Pemutaran mungkin tersendat. Pertimbangkan untuk memberi prompt pengguna atau melakukan 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 melakukan fallback setelah event ini dipicu dua kali, karena satu kali pemicuan mungkin disebabkan oleh fluktuasi decoding.
      fallbackTo264(_options)
    })
    return player;
  }

  // Fallback
  function fallbackTo264(_options) {
      // Tentukan source sebagai URL video H.264 cadangan
      _options.source = '//h264.mp4';
      // Nonaktifkan enableH265 untuk melewati deteksi codec
      _options.enableH265 = false;
      createPlayer(_options);
  }

  // Inisialisasi
  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) {
      // Jika API tidak didukung atau terjadi kesalahan decoding, beri prompt pengguna atau lakukan 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)
      }
    });
    return player;
  }

  // Fallback
  function fallbackTo264(_options) {
      // Tentukan source sebagai URL video H.264 cadangan
      _options.source = '//h264.mp4';
      // Nonaktifkan enableH266 untuk melewati deteksi codec
      _options.enableH266 = false;
      createPlayer(_options);
  }

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

API

Referensi API Aliplayer mencantumkan semua properti, metode, dan event yang didukung oleh Web Player SDK, dengan penjelasan dan contoh terperinci. Pemutaran H.265/H.266 hanya mendukung sebagian dari item tersebut. Item yang didukung adalah sebagai berikut:

• Properti yang Didukung

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

• Metode yang Didukung

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

• Event yang Didukung

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

  Catatan

  Event h265PlayInfo dan h266PlayInfo memberi tahu Anda tentang solusi (renderType) dan fitur (simd/wasmThreads) yang digunakan untuk pemutaran H.265 atau H.266 saat ini.

Kode kesalahan

Tabel berikut mencantumkan kode kesalahan yang terkait dengan pemutaran H.265/H.266. Untuk kode kesalahan lainnya, lihat Referensi API Aliplayer.

Siapkan lingkungan multi-threaded

Contoh Penyiapan

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

Pergeseran waktu siaran langsung

• Aktifkan pergeseran waktu siaran langsung

  • Untuk menggunakan fitur pergeseran waktu, Anda harus mengaktifkannya di layanan ApsaraVideo Live. Untuk informasi lebih lanjut, lihat Pergeseran waktu.

  • Untuk mengaktifkan fitur pergeseran waktu di pemutar, Anda harus mengatur properti berikut:

    Nama	Deskripsi
    isLive	Atur nilainya ke true.
    liveTimeShiftUrl	URL untuk mengkueri informasi pergeseran waktu.
    liveStartTime	Waktu mulai siaran langsung.
    liveOverTime	Waktu akhir siaran langsung.
    liveShiftSource	Alamat HLS untuk pergeseran waktu siaran langsung. Catatan Ini hanya perlu diatur saat source berupa aliran siaran langsung FLV.
    liveShiftMinOffset	Perekaman segmen pergeseran waktu memerlukan waktu. Melakukan seek terlalu dekat dengan waktu siaran langsung dapat menghasilkan kesalahan 404 karena segmen belum dihasilkan. Terdapat waktu seek minimum default, yang dapat dikonfigurasi dengan parameter ini. Satuannya adalah detik, dan nilai defaultnya adalah 30 (dengan asumsi segmen 10 detik, memastikan setidaknya 3 segmen tersedia).

• UI pergeseran waktu siaran langsung

  UI pergeseran waktu terdiri dari bilah progres untuk rentang yang dapat digeser waktunya dan tampilan waktu:

  Catatan

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

• Menyesuaikan waktu akhir siaran langsung

  Selama pemutaran, Anda dapat memanggil metode liveShiftSerivce.setLiveTimeRange untuk menyesuaikan waktu mulai atau waktu akhir siaran langsung. Antarmuka pengguna akan diperbarui secara otomatis. Contoh kode berikut menunjukkan implementasinya:

  player.liveShiftSerivce.setLiveTimeRange(“”,’2018/01/04 20:00:00’)

• Beralih antara siaran langsung FLV dan pergeseran waktu HLS

  Karena latensi, kami menyarankan Anda menggunakan format FLV untuk siaran langsung dan format HLS untuk aliran pergeseran waktu.

  Web Player SDK mendukung mode berikut:

  • Properti source menentukan alamat aliran siaran langsung FLV.

  • Properti liveShiftSource menentukan alamat HLS.

  Berikut adalah contohnya.

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

Terapkan pemutar web di server Anda sendiri

Secara default, sumber daya Web Player SDK seperti file JS dan CSS disimpan di Content Delivery Network (CDN). Untuk menerapkan sumber daya ini di server Anda sendiri, ikuti langkah-langkah berikut.

1. Unduh sumber daya pemutar.

   Selain dua file utama, aliplayer-min.js dan aliplayer-min.css, Web Player SDK secara dinamis mereferensikan file sumber daya lainnya. Anda harus mendapatkan folder sumber daya lengkap.

   Alamat unduh: Rencana Sumber Daya Penerapan Kustom Web Player.tar.gz

2. Ekstrak dan terapkan.

   Ekstrak paket sumber daya yang Anda unduh pada langkah sebelumnya. Terapkan semua sub-file dalam folder ke server Anda. Jangan sertakan folder induk itu sendiri atau menyesuaikan hierarki file internal.

3. Inisialisasi pemutar dengan jalur kustom.

   Sebagai contoh, asumsikan alamat referensi penerapan kustom Anda adalah sebagai berikut.

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

   Lakukan langkah-langkah berikut untuk inisialisasi.

   1. Referensikan alamat JS dan CSS Anda 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 merupakan awalan alamat penerapan kustom Anda. Misalnya, jika pemutar perlu memutar video HLS, pemutar tersebut secara dinamis mereferensikan file https://player.alicdn.com/assets/hls/aliplayer-hls2-min.js. Pastikan file tersebut ditempatkan pada alamat yang benar.

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

Referensi

• Komponen resmi

• Untuk informasi selengkapnya, lihat Referensi API Aliplayer.

• FAQ Web Player

• Mengembangkan Komponen Kustom

• Menyesuaikan UI Kesalahan H5

• Memecahkan Masalah Kesalahan Siaran Langsung