Beranda>Terkait pemrograman>Kode sumber lainnya
Unduh
pemain shaka

Pemain Shaka

Shaka Player adalah perpustakaan JavaScript sumber terbuka untuk media adaptif. Ia memainkan format media adaptif (seperti DASH, HLS dan MSS) di browser, tanpa menggunakan plugin atau Flash. Sebaliknya, Shaka Player menggunakan Standar Web Terbuka Ekstensi MediaSource dan Ekstensi Media Terenkripsi.

Shaka Player juga mendukung penyimpanan offline dan pemutaran media menggunakan IndexedDB. Konten dapat disimpan di browser apa pun. Penyimpanan lisensi bergantung pada dukungan browser.

Tujuan utama kami adalah mempermudah streaming video dan audio dengan kecepatan bit adaptif menggunakan teknologi browser modern. Kami mencoba menjaga perpustakaan tetap ringan, sederhana, dan bebas dari ketergantungan pihak ketiga. Semua yang Anda perlukan untuk membangun dan menerapkan ada di sumbernya.

Untuk detail tentang apa yang akan terjadi selanjutnya, lihat peta jalan pengembangan kami.

Cabang yang dipelihara

Lihat cabang yang dikelola.md untuk daftar terkini cabang Shaka Player yang dikelola.

Matriks dukungan platform dan browser

Peramban jendela Mac Linux Android iOS >= 9 iOS >= 17.1 iPadOS >= 13 ChromeOS Lainnya
krom¹ Y Y Y Y Warga asli Warga asli Warga asli Y -
Firefox¹ Y Y Y belum teruji⁵ Warga asli Warga asli Warga asli - -
Tepi¹ Y - - - - - - - -
Tepi Kromium Y Y Y belum teruji⁵ Warga asli Warga asli Warga asli - -
YAITU N - - - - - - - -
Safari¹ - Y - - Warga asli Y Y - -
Opera¹ Y Y Y belum teruji⁵ Warga asli - - - -
Chromecast². - - - - - - - - Y
Tizen TV³ - - - - - - - - Y
WebOS⁶ - - - - - - - - Y
Hisense⁷ - - - - - - - - Y
Xbox Satu - - - - - - - - Y
Playstation 4⁷ - - - - - - - - Y
Playstation 5⁷ - - - - - - - - Y

CATATAN:

  • ¹: Di macOS, hanya Safari 9+ yang didukung. Di iOS, hanya iOS 9+ yang didukung. Versi yang lebih lama akan ditolak.
  • ²: Firmware Chromecast stabil terbaru telah diuji. Baik pengirim maupun penerima dapat diimplementasikan dengan Shaka Player.
  • ³: Model Tizen 2017 diuji secara aktif dan didukung oleh tim Shaka Player. Model Tizen 2016 didukung komunitas dan belum kami uji.
  • ⁵: Ini diharapkan berfungsi, tetapi tidak diuji secara aktif oleh tim Shaka Player.
  • ⁶: ​​Ini diharapkan berhasil, tetapi didukung oleh komunitas dan belum kami uji.
    • Dukungan resmi untuk LG WebOS TV: #1330
  • ⁷: Ini diharapkan berhasil, tetapi didukung oleh komunitas dan belum kami uji.

CATATAN untuk iOS dan iPadOS:

  • Kami mendukung iOS 9+ melalui pemutar HLS asli Apple. Kami menyediakan API tingkat atas yang sama, tetapi kami hanya menyetel elemen src video ke manifes/media. Jadi kita bergantung pada browser yang mendukung manifes.
  • Karena Ekstensi MediaSource iPadOS 13 didukung
  • Sejak iPadOS 17 dan iOS 17.1 ManagedMediaSource Extensions didukung

Matriks dukungan format manifes

Format Video Sesuai Permintaan Hidup Peristiwa Perekaman Sedang Berlangsung
BERJALAN Y Y - Y
HLS Y Y Y -
MSS Y - - -

Anda juga dapat membuat plugin parser manifes untuk mendukung format manifes khusus.

fitur DASH

Fitur DASH yang didukung:

  • Rekaman VOD, Langsung, dan Sedang Berlangsung (konten VOD dinamis)
  • MPD@timeShiftBufferDepth untuk melihat ke belakang dalam streaming langsung
  • Konten multi-periode (statis dan dinamis)
  • Elemen Xlink (aktuasi=hanya onLoad, resolusi ke nol, konten cadangan)
  • Segala bentuk info indeks segmen: SegmentBase@indexRange, SegmentTimeline, SegmentTemplate@duration, SegmentTemplate@index, SegmentList
  • Manifes multi-codec/multi-kontainer (kami akan menegosiasikan dukungan dengan browser dan memilih yang terbaik)
  • Konten terenkripsi (termasuk skema ContentProtection khusus, PSSH dalam manifes)
  • Rotasi kunci
  • Trek mode trik
  • WebVTT dan TTML
  • Keterangan CEA-608/708
  • Varian multi-codec (pada platform dengan dukungan changeType)
  • Rangkaian MPD
  • Pembaruan Patch MPD untuk SegmentTemplate dengan $Nomor$ , SegmenTimeline dengan $Nomor$ dan SegmentTimeline dengan $Waktu$

Fitur DASH tidak didukung:

  • Xlink dengan actuate=onRequest
  • Manifes tanpa info segmen apa pun: #1088
  • Beberapa trek mode trik untuk resolusi yang sama pada framerate atau bitrate yang berbeda-beda
  • Skala waktu sangat besar sehingga stempel waktu tidak dapat direpresentasikan sebagai bilangan bulat dalam JavaScript (2^53): #1667
  • Memodifikasi elemen dengan atribut @schemeIdUri melalui MPD Patch
  • Dereferensi Xlink dengan MPD Patch

Fitur HLS

Fitur HLS yang didukung:

  • Jenis VOD, Siaran Langsung, dan Acara
  • Streaming berlatensi rendah dengan segmen parsial, petunjuk pramuat, pembaruan delta, dan memblokir pemuatan ulang daftar putar
  • Pemegatan
  • Dukungan ISO-BMFF / MP4 / CMAF
  • Dukungan MPEG-2 TS
  • WebVTT dan TTML
  • Keterangan CEA-608/708
  • Konten terenkripsi dengan PlayReady dan Widevine
  • Konten terenkripsi dengan FairPlay (khusus Safari di macOS dan iOS 9+)
  • Dukungan AES-128, AES-256 dan AES-256-CTR pada browser dengan dukungan Web Crypto API
  • Dukungan SAMPLE-AES dan SAMPLE-AES-CTR (identitas) pada browser dengan dukungan ClearKey
  • Rotasi kunci
  • AAC mentah, MP3, AC-3 dan EC-3 (tanpa wadah MP4)
  • Daftar putar I-frame saja (untuk permainan trik dan thumbnail)
  • #EXT-X-IMAGE-STREAM-INF untuk thumbnail
  • Pengantara
  • Perubahan wadah selama pemutaran (misalnya: MP4 ke TS, atau AAC ke TS)

Fitur HLS tidak didukung:

  • Atribut X-SNAP di interstisial

Tag HLS yang didukung

Untuk detail tentang format HLS dan arti tag ini, lihat https://datatracker.ietf.org/doc/html/draft-pantos-hls-rfc8216bis

Tag Daftar Putar Multivarian

  • #EXT-X-STREAM-INF:
  • #EXT-X-MEDIA:
  • #EXT-X-IMAGE-STREAM-INF:
  • #EXT-XI-FRAME-STREAM-INF:
  • #EXT-X-SESSION-DATA:
  • #EXT-X-SESSION-KEY: Pemilihan dan pramuat Sistem Kunci EME
  • #EXT-X-START:TIME-OFFSET=
  • #EXT-X-CONTENT-STEERING: Pengarah Konten
  • #EXT-X-DEFINE: Substitusi Variabel (atribut NAME,VALUE,QUERYPARAM )

Tag Daftar Putar Media

  • #EXTM3U
  • #EXTINF:,[]</code></li><li> <code>#EXT-X-PLAYLIST-TYPE:<type</code></li><li> <code>#EXT-X-ENDLIST</code></li><li> <code>#EXT-X-MEDIA-SEQUENCE=<n></code></li><li> <code>#EXT-X-TARGETDURATION=<n></code></li><li> <code>#EXT-X-DISCONTINUITY</code></li><li> <code>#EXT-X-DISCONTINUITY-SEQUENCE=<n></code></li><li> <code>#EXT-X-BYTERANGE=<n>[@<o>]</code></li><li> <code>#EXT-X-MAP:<attribute-list></code></li><li> <code>#EXT-X-KEY:<attribute-list></code> ( <code>KEYFORMAT="identity",METHOD=SAMPLE-AES</code> hanya mendukung segmen MP4)</li><li> <code>#EXT-X-PROGRAM-DATE-TIME:<attribute-list></code></li><li> <code>#EXT-X-START:TIME-OFFSET=<n></code></li><li> <code>#EXT-X-SERVER-CONTROL:<attribute-list></code></li><li> <code>#EXT-X-PART-INF:PART-TARGET=<n></code></li><li> <code>#EXT-X-PART:<attribute-list></code></li><li> <code>#EXT-X-SKIP:<attribute-list></code> Daftar Putar Delta</li><li> <code>#EXT-X-DATERANGE:<attribute-list></code> Metadata</li><li> <code>#EXT-X-DEFINE:<attribute-list></code> Impor dan Substitusi Variabel (atribut <code>NAME,VALUE,IMPORT,QUERYPARAM</code> )</li><li> <code>#EXT-X-GAP</code></li><li> <code>#EXT-X-PRELOAD-HINT:<attribute-list></code></li><li> <code>#EXT-X-BITRATE</code></li> </ul></details><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Dukungan MPEG-5 Part2 LCEVC</h2></div><p dir="auto"> <strong>Hanya didukung pada browser dengan dukungan Media Source Extensions SourceBuffer</strong></p><ul dir="auto"><li><p dir="auto"> Dukungan decoding LCEVC MPEG-5 Part2 (decoding disediakan oleh lcevc_dec.js, harus disertakan secara terpisah)</p></li><li><p dir="auto"> Dokumentasi integrasi: dokumen</p></li><li><p dir="auto"> Lebih lanjut tentang MPEG-5 Part2 LCEVC </p></li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> fitur MSS</h2></div><p dir="auto"> Fitur MSS yang didukung:</p><ul dir="auto"><li> VOD</li><li> AAC dan H.264</li><li> Konten terenkripsi (PlayReady)</li><li> TTML/DFXP</li><li> Hanya didukung dengan codem-isoboxer</li></ul><p dir="auto"> Fitur MSS <strong>tidak</strong> didukung:</p><ul dir="auto"><li> Hidup </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Matriks dukungan DRM</h2></div><markdown-accessiblity-table><table><thead><tr><th align="center"> Peramban</th><th align="center"> Widevine</th><th align="center"> Mainkan Siap</th><th align="center"> Permainan Adil</th><th align="center"> ClearKey⁶</th></tr></thead><tbody><tr><td align="center"> krom¹</td><td align="center"> <strong>Y</strong></td><td align="center"> -</td><td align="center"> -</td><td align="center"> <strong>Y</strong></td></tr><tr><td align="center"> Firefox²</td><td align="center"> <strong>Y</strong></td><td align="center"> -</td><td align="center"> -</td><td align="center"> <strong>Y</strong></td></tr><tr><td align="center"> Tepi³</td><td align="center"> -</td><td align="center"> <strong>Y</strong></td><td align="center"> -</td><td align="center"> -</td></tr><tr><td align="center"> Tepi Kromium</td><td align="center"> <strong>Y</strong></td><td align="center"> <strong>Y</strong></td><td align="center"> -</td><td align="center"> <strong>Y</strong></td></tr><tr><td align="center"> Safari</td><td align="center"> -</td><td align="center"> -</td><td align="center"> <strong>Y</strong></td><td align="center"> -</td></tr><tr><td align="center"> Opera</td><td align="center"> <strong>Y</strong></td><td align="center"> -</td><td align="center"> -</td><td align="center"> <strong>Y</strong></td></tr><tr><td align="center"> Chromecast</td><td align="center"> <strong>Y</strong></td><td align="center"> <strong>Y</strong></td><td align="center"> -</td><td align="center"> <strong>Y</strong></td></tr><tr><td align="center"> TV Tizen</td><td align="center"> <strong>Y</strong></td><td align="center"> <strong>Y</strong></td><td align="center"> -</td><td align="center"> <strong>Y</strong></td></tr><tr><td align="center"> WebOS⁷</td><td align="center"> belum teruji⁷</td><td align="center"> belum teruji⁷</td><td align="center"> -</td><td align="center"> belum teruji⁷</td></tr><tr><td align="center"> Hisense⁷</td><td align="center"> belum teruji⁷</td><td align="center"> belum teruji⁷</td><td align="center"> -</td><td align="center"> belum teruji⁷</td></tr><tr><td align="center"> Xbox Satu</td><td align="center"> -</td><td align="center"> <strong>Y</strong></td><td align="center"> -</td><td align="center"> -</td></tr><tr><td align="center"> Playstation 4⁷</td><td align="center"> -</td><td align="center"> belum teruji⁷</td><td align="center"> -</td><td align="center"> belum teruji⁷</td></tr><tr><td align="center"> Playstation 5⁷</td><td align="center"> -</td><td align="center"> belum teruji⁷</td><td align="center"> -</td><td align="center"> belum teruji⁷</td></tr></tbody></table></markdown-accessiblity-table><p dir="auto"> Sistem DRM lain seharusnya dapat langsung berfungsi jika dapat dioperasikan dan mematuhi spesifikasi EME.</p><p dir="auto"> CATATAN:</p><ul dir="auto"><li> ¹: Hanya versi Chrome resmi yang berisi CDM Widevine. Chromium yang dibuat dari sumber tidak mendukung DRM.</li><li> ²: DRM harus diaktifkan oleh pengguna. Saat pertama kali pengguna Firefox mengunjungi situs dengan media terenkripsi, pengguna akan diminta untuk mengaktifkan DRM.</li><li> ³: PlayReady di Edge sepertinya tidak berfungsi pada VM atau melalui Remote Desktop.</li><li> ⁶: ​​ClearKey adalah alat yang berguna untuk debugging, dan tidak memberikan keamanan konten yang sebenarnya.</li><li> ⁷: Ini diharapkan berhasil, tetapi didukung oleh komunitas dan belum kami uji.</li></ul><markdown-accessiblity-table><table><thead><tr><th align="center"> Tampak</th><th align="center"> Widevine</th><th align="center"> Mainkan Siap</th><th align="center"> Permainan Adil</th><th align="center"> Kunci Jelas</th></tr></thead><tbody><tr><td align="center"> BERJALAN</td><td align="center"> <strong>Y</strong></td><td align="center"> <strong>Y</strong></td><td align="center"> -</td><td align="center"> <strong>Y</strong></td></tr><tr><td align="center"> HLS</td><td align="center"> <strong>Y</strong></td><td align="center"> <strong>Y</strong></td><td align="center"> <strong>kamu</strong> ¹</td><td align="center"> -</td></tr><tr><td align="center"> MSS</td><td align="center"> -</td><td align="center"> <strong>Y</strong></td><td align="center"> -</td><td align="center"> -</td></tr></tbody></table></markdown-accessiblity-table><p dir="auto"> CATATAN:</p><ul dir="auto"><li> ¹: Secara default, FairPlay ditangani menggunakan pemutar HLS asli Apple, saat menggunakan Safari. Namun kami mendukung FairPlay melalui MSE/EME. Lihat nilai konfigurasi <code>streaming.useNativeHlsForFairPlay</code> . </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Wadah media dan dukungan subtitle</h2></div><p dir="auto"> Shaka Pemain mendukung:</p><ul dir="auto"><li> ISO-BMFF / CMAF / MP4<ul dir="auto"><li> Tergantung pada dukungan browser untuk penampung melalui MediaSource</li><li> Dapat mengurai kotak "sidx" untuk SegmentBase@indexRange dan SegmentTemplate@index DASH</li><li> Dapat menemukan dan mengurai kotak "tfdt" untuk menemukan waktu mulai segmen di HLS</li><li> Untuk MSS, diperlukan codem-isoboxer v0.3.7+</li></ul></li><li> WebM<ul dir="auto"><li> Tergantung pada dukungan browser untuk penampung melalui MediaSource</li><li> Dapat mengurai elemen data isyarat untuk SegmentBase@indexRange dan SegmentTemplate@index DASH</li><li> Tidak didukung di HLS</li></ul></li><li> MPEG-2TS<ul dir="auto"><li> Dapat diputar di browser apa pun yang mendukung MP4</li><li> Dapat menemukan dan mengurai stempel waktu untuk menemukan waktu mulai segmen di HLS</li></ul></li><li> WebVTT<ul dir="auto"><li> Didukung dalam bentuk teks dan tertanam dalam MP4</li></ul></li><li> TTML<ul dir="auto"><li> Didukung dalam bentuk XML dan tertanam dalam MP4</li></ul></li><li> CEA-608<ul dir="auto"><li> Didukung tertanam dalam MP4 dan TS</li></ul></li><li> CEA-708<ul dir="auto"><li> Didukung tertanam di MP4 dan TS</li></ul></li><li> AAC mentah<ul dir="auto"><li> Didukung dalam wadah AAC mentah dan transmuxing ke AAC dalam wadah MP4 (tergantung pada dukungan browser melalui MediaSource).</li></ul></li><li> MP3 mentah<ul dir="auto"><li> Didukung dalam wadah MP3 mentah dan transmuxing ke MP3 dalam wadah MP4 (tergantung pada dukungan browser melalui MediaSource).</li></ul></li><li> AC-3 mentah<ul dir="auto"><li> Didukung dalam wadah AC-3 mentah dan transmuxing ke AC-3 dalam wadah MP4 (tergantung pada dukungan browser melalui MediaSource).</li></ul></li><li> EC-3 mentah<ul dir="auto"><li> Didukung dalam wadah EC-3 mentah dan transmuxing ke EC-3 dalam wadah MP4 (tergantung pada dukungan browser melalui MediaSource).</li></ul></li><li> SubRip (SRT)<ul dir="auto"><li> Pengodean UTF-8 saja</li></ul></li><li> Lirik (LRC)<ul dir="auto"><li> Pengodean UTF-8 saja</li></ul></li><li> SubStasiun Alfa (SSA, ASS)<ul dir="auto"><li> Pengodean UTF-8 saja</li></ul></li><li> SubViewer (SBV)<ul dir="auto"><li> Pengodean UTF-8 saja</li></ul></li></ul><p dir="auto"> Subtitle dirender oleh browser secara default. Aplikasi dapat membuat plugin tampilan teks untuk rendering pelanggan agar melampaui atribut yang didukung browser.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Dukungan transmuxer</h2></div><p dir="auto"> Shaka Pemain mendukung:</p><ul dir="auto"><li> AAC mentah ke AAC dalam MP4</li><li> MP3 mentah ke MP3 dalam MP4</li><li> AC-3 mentah hingga AC-3 dalam MP4</li><li> EC-3 mentah hingga EC-3 dalam MP4</li><li> AAC di MPEG-2 TS ke AAC di MP4</li><li> AC-3 di MPEG-2 TS hingga AC-3 di MP4</li><li> EC-3 di MPEG-2 TS hingga EC-3 di MP4</li><li> MP3 di MPEG-2 TS ke MP3 di MP4</li><li> MP3 dalam MPEG-2 TS ke MP3 mentah</li><li> Opus di MPEG-2 TS ke MP3 di MP4</li><li> H.264 dalam MPEG-2 TS hingga H.264 dalam MP4</li><li> H.265 dalam MPEG-2 TS hingga H.265 dalam MP4</li><li> Konten yang dicampur dalam MPEG-2 TS dengan codec sebelumnya </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Dukungan thumbnail</h2></div><p dir="auto"> Shaka Pemain mendukung:</p><ul dir="auto"><li> Thumbnail DASH internal. Menggunakan Set Adaptasi Gambar IOP DASH-IF</li><li> Thumbnail HLS internal. Menggunakan Daftar Putar Media Gambar HLS</li><li> Thumbnail HLS internal. Menggunakan daftar putar I-frame saja dengan codec mjpg</li><li> WebVTT eksternal dengan gambar/sprite (hanya untuk VoD) </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Monetisasi dengan Iklan</h2></div><p dir="auto"> Shaka Pemain mendukung:</p><ul dir="auto"><li> IMA SDK untuk Penyisipan Iklan Sisi Klien</li><li> IMA DAI SDK untuk Penyisipan Iklan Sisi Server</li><li> AWS MediaTailor untuk Sisi Klien</li><li> AWS MediaTailor untuk Sisi Server</li><li> Hamparan AWS MediaTailor</li><li> Interstisial HLS</li><li> Penyisipan Presentasi Media DASH (alternatif MPD)</li><li> Pengantara Khusus</li><li> Dukungan dasar VAST dan VMAP tanpa IMA (pemutaran tanpa pelacakan) </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Dukungan Pengarah Konten</h2></div><p dir="auto"> Shaka Player mendukung Pengarah Konten (v1) di DASH dan HLS.</p><p dir="auto"> Fitur Pengarah Konten yang didukung:</p><ul dir="auto"><li> TTL, jika tidak ada, nilai defaultnya adalah 300 detik.</li><li> RELOAD-URI, jika hilang kami menggunakan url yang disediakan dalam manifes sebagai cadangan.</li><li> Penggantian HOST hanya PRIORITAS JALAN</li></ul><p dir="auto"> Fitur Pengarah Konten <strong>tidak</strong> didukung:</p><ul dir="auto"><li> PATHWAY-CLONES pengganti selain HOST. </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> dukungan VR</h2></div><p dir="auto"> Shaka Player mendukung VR ketika:</p><ul dir="auto"><li> Konten secara otomatis diperlakukan sebagai VR jika memenuhi kriteria berikut:<ul dir="auto"><li> Manifes HLS atau DASH</li><li> segmen fMP4</li><li> Segmen init berisi kotak <code>prji</code> dan <code>hfov</code></li></ul></li><li> Atau, jika diaktifkan secara manual melalui konfigurasi UI.</li></ul><p dir="auto"> Mode VR yang didukung:</p><ul dir="auto"><li> Proyeksi persegi panjang dengan bidang pandang horizontal 360 derajat.</li><li> Proyeksi peta kubus dengan bidang pandang horizontal 360 derajat.</li></ul><p dir="auto"> CATATAN:</p><ul dir="auto"><li> VR hanya didukung untuk streaming jernih atau streaming HLS-AES. DRM mencegah akses ke piksel video untuk transformasi. </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Dokumentasi & Tautan Penting</h2></div><ul dir="auto"><li> Demo (sumber)</li><li> Demo Malam</li><li> Indeks demo</li><li> dokumentasi API</li><li> Tutorial</li><li> Build yang dihosting di Perpustakaan yang Dihosting Google</li><li> Dihosting dibangun di jsDelivr</li><li> Peta jalan pembangunan</li><li> Daftar pengumuman (bergabung untuk pengumuman dan survei yang jarang terjadi)</li><li> Berlangganan rilis dengan mengikuti instruksi dari blog ini </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Pertanyaan Umum</h2></div><p dir="auto"> Untuk bantuan umum dan sebelum melaporkan bug apa pun, harap baca FAQ.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Berkontribusi</h2></div><p dir="auto"> Jika Anda memiliki perbaikan atau perbaikan, kami akan dengan senang hati menerima kontribusi Anda. Silakan baca CONTRIBUTING.md untuk informasi lebih lanjut tentang proses yang kami ingin agar diikuti oleh kontributor.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Integrasi Kerangka</h2></div><p dir="auto"> Tim Shaka tidak memiliki bandwidth dan pengalaman untuk memberikan panduan dan dukungan untuk mengintegrasikan Shaka Player dengan kerangka kerja tertentu, namun beberapa pengguna kami telah berhasil melakukannya dan membuat tutorial untuk membantu pemula lainnya.</p><p dir="auto"> Perpustakaan Shaka + ReactJS</p><ul dir="auto"><li> https://github.com/winoffrg/limeplay</li></ul><p dir="auto"> Integrasi Shaka + ReactJS:</p><ul dir="auto"><li> https://github.com/matvp91/shaka-player-react</li><li> https://github.com/amit08255/shaka-player-react-with-ui-config</li></ul><p dir="auto"> Integrasi Shaka + Next.js:</p><ul dir="auto"><li> https://github.com/amit08255/shaka-player-react-with-ui-config/tree/master/nextjs-shaka-player</li></ul><p dir="auto"> Integrasi Shaka + Vue.js:</p><ul dir="auto"><li> https://github.com/davidjamesherzog/shaka-player-vuejs</li></ul><p dir="auto"> Integrasi Shaka + Nuxt.js:</p><ul dir="auto"><li> https://github.com/davidjamesherzog/shaka-player-nuxtjs</li></ul><p dir="auto"> Integrasi Shaka + video.js:</p><ul dir="auto"><li> https://github.com/davidjamesherzog/videojs-shaka</li></ul><p dir="auto"> Integrasi Shaka + Sudut:</p><ul dir="auto"><li> https://github.com/PatrickKalkman/shaka-player-angular</li></ul><p dir="auto"> Jika Anda telah menerbitkan kode/tutorial Integrasi Shaka, silakan kirimkan PR untuk menambahkannya ke daftar ini, kami dengan senang hati akan menyetujuinya!</p> </div> <div class="zd_btn more_version_btn" data-more="Memperluas" data-less="Tutup">Memperluas</div> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template"> <span class="title">Informasi Tambahan</span> </div> <ul class="more_info grid gap_y6 gap_x6 grid_c3"> <li> <span class="title">Versi</span> <span class="text">v4.11.11</span> </li> <li> <span class="title">Tipe</span> <a class="text" href="/id/category/list_228_1.html">Kode sumber lainnya</a> </li> <li> <span class="title">Waktu Pembaruan</span> <span class="text">2024-11-12</span> </li> <li> <span class="title">ukuran</span> <span class="text"></span> </li> <li> <span class="title">Bahasa</span> <span class="text">Bahasa Mandarin Sederhana</span> </li> </ul> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template arrow_link"> <span class="title">Versi Terkait</span> </div> <ul class="version_list grid gap_x6 gap_y6 grid_c2"> <li> <div class="content"> <h3><a href="/id/download/186835.html">Pemain SFVIP</a></h3> <div class="other"> <div class="time">2024-11-05</div> <a href="/id/download/186835.html" class="download_btn"></a> </div> </div> </li> <li> <div class="content"> <h3><a href="/id/download/186373.html">Pemain Gitar WEBFISHING</a></h3> <div class="other"> <div class="time">2024-11-03</div> <a href="/id/download/186373.html" class="download_btn"></a> </div> </div> </li> <li> <div class="content"> <h3><a href="/id/app/160710.html">Aplikasi KK Player</a></h3> <div class="other"> <div class="time">2024-03-02</div> <a href="/id/app/160710.html" class="download_btn"></a> </div> </div> </li> <li> <div class="content"> <h3><a href="/id/app/121099.html">Perangkat lunak pemutar FX</a></h3> <div class="other"> <div class="time">2023-07-28</div> <a href="/id/app/121099.html" class="download_btn"></a> </div> </div> </li> <li> <div class="content"> <h3><a href="/id/app/89490.html">Perangkat lunak Muso Player</a></h3> <div class="other"> <div class="time">2023-05-18</div> <a href="/id/app/89490.html" class="download_btn"></a> </div> </div> </li> <li> <div class="content"> <h3><a href="/id/download/6300.html">Pemain Jahat</a></h3> <div class="other"> <div class="time">2009-06-22</div> <a href="/id/download/6300.html" class="download_btn"></a> </div> </div> </li> </ul> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template arrow_link"> <span class="title">Direkomendasikan untuk Anda</span> </div> <ul class="column3_box lr_img_text_template grid gap_x6 gap_y6 grid_c3"> <li> <a class="img_item" href="/id/app/176855.html"><img src="https://images.downcodes.com/uploads/20240628/logo_667e0d8fe35261.jpg" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="Mod DLC Kebisingan Menara Pizza"></a> <div class="content"> <h3><a href="/id/app/176855.html">Mod DLC Kebisingan Menara Pizza</a></h3> <div class="cate"> <a href="/id/category/list_299_1.html">Teka-teki kasual</a> </div> <div class="other"> <span>1.0</span> </div> </div> </li> <li> <a class="img_item" href="/id/app/176584.html"><img src="https://images.downcodes.com/uploads/20240624/logo_6678eedab44bc1.jpg" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="Ponsel Simulator Keluarga Rumah Blok Bahagia"></a> <div class="content"> <h3><a href="/id/app/176584.html">Ponsel Simulator Keluarga Rumah Blok Bahagia</a></h3> <div class="cate"> <a href="/id/category/list_307_1.html">Bisnis simulasi</a> </div> <div class="other"> <span>1.0.41</span> </div> </div> </li> <li> <a class="img_item" href="/id/app/176463.html"><img src="https://images.downcodes.com/uploads/20240622/logo_66764c7e969a71.jpg" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="Perbaiki instalasi pelarian kereta bawah tanah kait"></a> <div class="content"> <h3><a href="/id/app/176463.html">Perbaiki instalasi pelarian kereta bawah tanah kait</a></h3> <div class="cate"> <a href="/id/category/list_309_1.html">penembakan penerbangan</a> </div> <div class="other"> <span>1.25.20</span> </div> </div> </li> <li> <a class="img_item" href="/id/app/178338.html"><img src="https://images.downcodes.com/uploads/20240731/logo_66a9c40e360431.png" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="Permainan seluler BodyCam"></a> <div class="content"> <h3><a href="/id/app/178338.html">Permainan seluler BodyCam</a></h3> <div class="cate"> <a href="/id/category/list_309_1.html">penembakan penerbangan</a> </div> <div class="other"> <span>1.0</span> </div> </div> </li> <li> <a class="img_item" href="/id/app/178465.html"><img src="https://images.downcodes.com/uploads/20240802/logo_66ac4e39342541.png" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="Versi seluler BodyCam"></a> <div class="content"> <h3><a href="/id/app/178465.html">Versi seluler BodyCam</a></h3> <div class="cate"> <a href="/id/category/list_309_1.html">penembakan penerbangan</a> </div> <div class="other"> <span>1.0</span> </div> </div> </li> <li> <a class="img_item" href="/id/app/179461.html"><img src="https://images.downcodes.com/uploads/20240828/logo_66cee47da77471.png" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="Bantu saya dengan Pinduoduo"></a> <div class="content"> <h3><a href="/id/app/179461.html">Bantu saya dengan Pinduoduo</a></h3> <div class="cate"> <a href="/id/category/list_285_1.html">Layanan kehidupan</a> </div> <div class="other"> <span>7.13.0</span> </div> </div> </li> <li> <a class="img_item" href="/id/app/177718.html"><img src="https://images.downcodes.com/uploads/20240718/logo_6698949acee951.png" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="Plants vs. Zombies Edisi TK iOS"></a> <div class="content"> <h3><a href="/id/app/177718.html">Plants vs. Zombies Edisi TK iOS</a></h3> <div class="cate"> <a href="/id/category/list_299_1.html">Teka-teki kasual</a> </div> <div class="other"> <span>3.3.0</span> </div> </div> </li> <li> <a class="img_item" href="/id/app/177113.html"><img src="https://images.downcodes.com/uploads/20240704/logo_66860471a2eec1.jpg" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="Penggabungan Tanaman vs. Zombi 1.1"></a> <div class="content"> <h3><a href="/id/app/177113.html">Penggabungan Tanaman vs. Zombi 1.1</a></h3> <div class="cate"> <a href="/id/category/list_299_1.html">Teka-teki kasual</a> </div> <div class="other"> <span>1.1</span> </div> </div> </li> <li> <a class="img_item" href="/id/app/177925.html"><img src="https://images.downcodes.com/uploads/20240723/logo_669f2daa16acc1.png" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="Tanaman vs. Zombi Hibrida 2.4"></a> <div class="content"> <h3><a href="/id/app/177925.html">Tanaman vs. Zombi Hibrida 2.4</a></h3> <div class="cate"> <a href="/id/category/list_299_1.html">Teka-teki kasual</a> </div> <div class="other"> <span>2.4</span> </div> </div> </li> </ul> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template arrow_link"> <span class="title">Informasi Terkait</span> <a href="/category/list_336_1.html">Semua</a> </div> <ul class="cate_list_template"> <li> <a href="/id/wz/211305.html"> <div class="text">Cara Membuat Telur Paskah Manekin Nuketown di Black Ops 6 Musim 1</div> <span class="time">2024-11-15</span> </a> </li> <li> <a href="/id/wz/211304.html"> <div class="text">Di mana mendapatkan semua hadiah pendamping di Dragon Age The Veilguard</div> <span class="time">2024-11-15</span> </a> </li> <li> <a href="/id/wz/210282.html"> <div class="text">Cheat Donkey Kong Country 2 Baru Telah Ditemukan Setelah Puluhan Tahun</div> <span class="time">2024-11-10</span> </a> </li> <li> <a href="/id/wz/210281.html"> <div class="text">Cara Membunuh Dengan Granat Asap & Membuka Kartu Panggilan Trauma Tumpul di Black Ops 6 (BO6)</div> <span class="time">2024-11-11</span> </a> </li> <li> <a href="/id/wz/210268.html"> <div class="text">Tanggal dan waktu rilis Warzone dan Black Ops 6 Musim 1</div> <span class="time">2024-11-10</span> </a> </li> <li> <a href="/id/wz/209430.html"> <div class="text">Panduan Telur Paskah Black Ops 6 Zombies Liberty Falls Bowling Alley</div> <span class="time">2024-11-02</span> </a> </li> <li> <a href="/id/wz/209427.html"> <div class="text">Cara mengalahkan Corius the Icetalon di Dragon Age The Veilguard</div> <span class="time">2024-11-02</span> </a> </li> <li> <a href="/id/wz/209415.html"> <div class="text">Cara mencapai Luma Grove dan Benteng Drakenhold di King Legacy</div> <span class="time">2024-11-02</span> </a> </li> <li> <a href="/id/wz/209409.html"> <div class="text">Kode Zenless Zone Zero bulan November 2024 dan cara menukarkannya</div> <span class="time">2024-11-02</span> </a> </li> <li> <a href="/id/wz/125037.html"> <div class="text">Cara Mendapatkan Chocobo di FF14 Bagikan cara mendapatkan Chocobo di FF14</div> <span class="time">2023-10-31</span> </a> </li> <li> <a href="/id/wz/18117.html"> <div class="text">Kinerja lambat setelah menginstal RealNetworks RealOne Player di WINXP</div> <span class="time">2013-02-16</span> </a> </li> <li> <a href="/id/wz/4560.html"> <div class="text">Pemutar Media Jendela</div> <span class="time">2009-06-20</span> </a> </li> </ul> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template arrow_link"> <span class="title">Komentar Pengguna</span> </div> </div> </section> <footer class="footer_template"> <div class="w12_box"> <div class="clearfix"> <div class="l_item"> <img src="https://images.downcodes.com/newdown/images/down-logo-foot.png" alt=""> <div class="f_icon"> <a href="https://www.facebook.com/" title="facebook"></a> <a href="https://telegram.org/" title="telegram"></a> <a href="https://www.tiktok.com/" title="tiktok"></a> <a href="https://www.youtube.com/" title="youtube"></a> </div> </div> <div class="r_item"> <dl> <dt>Products & Services</dt> <dd><a href="javascript:;">Install APK</a></dd> <dd><a href="javascript:;">APK signature verification</a></dd> <dd><a href="javascript:;">APK Download Service</a></dd> </dl> <dl> <dt>Company</dt> <dd><a href="javascript:;">Developer Console</a></dd> <dd><a href="javascript:;">Submit APK</a></dd> <dd><a href="javascript:;">Monetization of traffic through downcodes</a></dd> </dl> <dl> <dt>Legal</dt> <dd><a href="javascript:;">About us</a></dd> <dd><a href="javascript:;">Contact Us</a></dd> <dd><a href="javascript:;">Cooperation</a></dd> </dl> </div> </div> <p>© 2006-2024Copyright All rights reserves</p> </div> </footer> <!-- Matomo --> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="//tongji.zhangwan.net/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '3']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script> <!-- End Matomo Code --> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-5D64MDP2H8"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-5D64MDP2H8'); </script> </body> <script src="/newdown/js/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="/newdown/js/lazy.js" type="text/javascript" charset="utf-8"></script> <script src="/newdown/js/swiper.min.js" type="text/javascript" charset="utf-8"></script> <script src="/newdown/js/viewer.js" type="text/javascript" charset="utf-8"></script> <script src="/newdown/js/index.js" type="text/javascript" charset="utf-8"></script> <script> commonMethod.appdetail(); function phpLoadPage(){ this.kid = ''; this.lang = 'id'; this.pageIndex = 1; this.resultLen = 10; this. requestUrl = "/show_comment_list"; } phpLoadPage.prototype.init = function() { var _this = this; var moreComment = 'Klik untuk melihat lebih banyak'; $(".loadmore_item").click(function(){ if(_this.resultLen >= 10){ _this.pageIndex = _this.pageIndex + 1 $(".loadmore_item").html("loading...") $.ajax({ async: true, url: _this.requestUrl, type: 'GET', data : { page : _this.pageIndex,kid:_this.kid,lang:_this.lang }, dataType: 'json', timeout: 30000, success: function(result){ _this.resultLen = result.newArray.length if(_this.resultLen < 10){ $(".loadmore_item").html("Reached the end...") }else{ $(".loadmore_item").html(`${moreComment}`) } $(".comment_template").append(_this.mergeHtml(result.newArray)); }, error: function(xhr, status){ console.log('An error occurred...'); }, complete: function(xhr, status){ console.log('Ajax request has ended...'); } }) } }) } phpLoadPage.prototype.mergeHtml = function(data){ var textHtml = ""; var lang = 'id'; let fromto = 'Berasal dari'; for(var i=0;i<data.length;i++) { var item= data[i]; var lsHtml = item.mark == 1 && item.status == 1 ? `<span class="tip">${fromto}</span><a href="/${lang}/ask/${item.aid}.html">${item.title}</a>` : ''; textHtml += `<dd> <span class="img_item"> <img src="${item.headlogo}" alt="${item.adduser}"> </span> <div class="main"> <div class="title"> <span>${item.adduser}</span> ${lsHtml} <span>${item.showtime}</span> </div> <div>${item.content}</div> </div> </dd>`; } return textHtml; } new phpLoadPage().init() </script> </html>