Ada beberapa cara untuk menambahkan media ke halaman web. Sebelumnya, Anda telah mempelajari cara menggunakan tag <video> standar. Dalam artikel ini, Anda akan mempelajari beberapa
framework media (atau library) yang tersedia dan dapat digunakan untuk memperluas atau mengganti
perilaku pemutar video HTML5 default.
Framework media tersedia dalam variasi eksklusif dan open source, dan pada intinya adalah sekumpulan API yang mendukung pemutaran audio dan/atau video untuk berbagai format container dan protokol transmisi. Framework yang baik memiliki arsitektur modular dan memberikan dokumentasi yang jelas dan mendetail. Idealnya, data juga harus relatif mudah disiapkan dan digunakan. Anda mungkin bertanya pada diri sendiri, "Jika pemutar video HTML5 sudah menyediakan sebagian besar fitur, lalu mengapa saya menggunakan kerangka atau pustaka?" Pertanyaan yang bagus, mari kita bahas.
Manfaat menggunakan kerangka kerja
Dalam sebagian besar situasi yang berada di luar kebutuhan halaman web dasar, Anda sebaiknya menggunakan framework media untuk menayangkan konten. Kecuali jika Anda siap untuk mengembangkan dan mengelola rangkaian fitur lengkap seperti pemutaran offline, streaming, analisis, picture-in-picture, thumbnail pratinjau, penyematan, dan monetisasi seperti pengoptimalan rasio pengisian, Penjadwalan iklan, atau bidding header, sebagai contoh, Anda mungkin harus melimpahkan kompleksitas tersebut ke solusi yang ada.
Di sinilah kerangka media berperan. Fitur ini memberi Anda serangkaian fitur dan kondisi yang dapat digunakan untuk menggunakan fitur tersebut. Selanjutnya, Anda harus memutuskan framework yang tepat untuk project Anda. Dalam artikel berikutnya, kita akan membahas cara membuat PWA dengan streaming offline yang menerapkan beberapa fitur kompleks. Peringatan {i>spoiler<i}, itu adalah pekerjaan yang banyak dan masih jauh dari solusi siap produksi. Hindari sakit kepala dan gunakan kerangka kerja.
Ada banyak opsi di luar sana yang dapat dipilih, untuk saat ini artikel ini akan berfokus pada tiga opsi, yaitu Shaka Player, JW Player, dan Video.js.
Pemain Shaka
Menurut dokumentasi, Shaka Player Google adalah library JavaScript open source untuk media adaptif. Pemutar ini memutar format media adaptif (seperti DASH dan HLS) di browser, tanpa menggunakan plugin. Sebagai gantinya, Shaka Player menggunakan standar web terbuka MediaSource Extensions dan Encrypted Media Extensions.
Shaka Player juga mendukung penyimpanan dan pemutaran offline media menggunakan IndexedDB. Konten dapat disimpan di browser apa pun. Penyimpanan lisensi bergantung pada dukungan browser.
Petunjuk untuk penggunaan dasar tersedia di situs dokumentasi Shaka Player. Namun, singkatnya untuk menggunakan Shaka Player, Anda harus terlebih dahulu membuat halaman HTML dengan elemen video atau audio. Kemudian pada JavaScript aplikasi, Anda menginstal polyfill dan memeriksa dukungan browser. Setelah browser mengonfirmasi dukungan untuk Shaka Player, skrip akan membuat objek Player untuk menggabungkan elemen media, memproses error, lalu memuat file manifes. Shaka Player akan mengambil alih dari sana.
Dengan Shaka, Anda perlu menghosting dan mengenkode file media Anda sendiri. Membuat server media tidak terlalu rumit, tetapi proses encoding/transcoding media dapat memakan waktu dan rumit. Anda mungkin ingin mengalihkan bagian ini ke layanan seperti Zencoder, Amazon Elastic Encoder, atau Google Transcoder API untuk mengotomatiskan tugas berulang dan mempercepat prosesnya.
Hebatnya, Shaka Player juga dilengkapi dengan alat dan SDK pengemasan media yang sangat fantastis untuk paket serta enkripsi DASH dan HLS yang disebut Shaka Packager. Layanan ini dapat menyiapkan dan mengemas konten media untuk streaming online, yang telah Anda pelajari sebelumnya di bagian Konversi media dan Enkripsi media.
Pemutar JW
Jika mencari opsi yang menyediakan layanan hosting dan encoding/transcoding, Anda dapat mencari JW Player. Namun, perlu diingat bahwa JW Player adalah software eksklusif. Artinya, Anda tidak memiliki banyak kontrol atas platform atau roadmap. Ada versi gratis dasar di mana video ditampilkan dengan watermark, dan versi komersial.
JW Player mendukung streaming dengan MPEG-DASH (khusus versi berbayar), Digital Rights Management (DRM) (dengan Vualto), iklan interaktif, penyesuaian antarmuka, dan sematan. Ada API dan SDK yang terdokumentasi dengan baik. Namun, jika Anda hanya mencari cara yang cepat dan gratis untuk menghosting media, maka menyematkan video YouTube biasanya akan menjadi opsi gratis terbaik Anda.
Video.js
Menurut situs web mereka, Video.js dibuat dari dasar untuk dunia HTML5. Alat ini mendukung video HTML5 dan format streaming modern seperti DASH dan HLS, serta YouTube, dan Vimeo. Alat ini mendukung pemutaran video di desktop dan perangkat seluler, serta terlihat bagus di mana saja dengan skin berbasis CSS.
Ada beberapa cara untuk menggunakan Video.js, tetapi cara yang paling mudah adalah menggunakan CDN versi gratis yang disediakan oleh Fastly. Anda dapat mempelajari lebih lanjut cara menyiapkan pemain di halaman memulai. Video.js adalah pemutar video yang sangat canggih, dan seperti Shaka Player, Anda juga perlu menghosting dan mengenkode video. Namun, ada satu perbedaan pada sistem plugin yang memungkinkan Anda melakukan berbagai hal seperti memutar video YouTube di pemutar Video.js, yang juga dapat disesuaikan.
Lain-lain
Ada banyak framework dan library yang tersedia, artikel ini hanya membahas apa yang ada di luar sana. Saat memilih framework, Anda harus mempertimbangkan fitur yang diperlukan untuk project serta rencana untuk menghosting dan mengenkode atau melakukan transcoding media. Apakah Anda memerlukan Iklan pre-roll atau strategi monetisasi lainnya? Apakah media Anda akan tersedia secara offline? Seberapa besar atau kecil anggaran Anda? Atau sejumlah pertimbangan lainnya. Lakukan penelitian dan minta saran dari orang-orang di jaringan Anda. Ada lusinan opsi bagus lainnya dan sebelum Anda membuat pilihan, luangkan waktu untuk memilih salah satu yang cocok bagi tim Anda dan menghindari timbulnya utang teknis yang tidak perlu atau kerumitan yang harus dipertahankan selama siklus proses project.
Selanjutnya, Anda akan mempelajari PWA dengan streaming offline yang kami buat untuk menunjukkan cara mendekati dan mengatasi tantangan utama saat meluncurkan solusi Anda sendiri hanya menggunakan objek video HTML5 tanpa framework untuk menangani pekerjaan yang berat.