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 yang dapat Anda gunakan untuk memperluas atau mengganti
perilaku pemutar video HTML5 default.
Framework media tersedia dalam berbagai jenis eksklusif dan open source, dan pada inti-nya adalah serangkaian API yang mendukung pemutaran audio dan/atau video untuk berbagai format penampung dan protokol transmisi. Framework yang baik memiliki arsitektur modular dan memberikan dokumentasi yang jelas dan mendetail. Idealnya, alat ini juga harus relatif mudah disiapkan dan digunakan. Anda mungkin bertanya-tanya, "Jika pemutar video HTML5 sudah menyediakan sebagian besar fitur, mengapa saya harus menggunakan framework atau library?" Pertanyaan bagus, mari kita bahas.
Manfaat menggunakan framework
Dalam sebagian besar situasi yang berada di luar kebutuhan halaman web dasar, Anda akan ingin menggunakan framework media untuk menayangkan konten. Kecuali jika Anda siap mengembangkan dan mengelola kumpulan fitur yang kaya seperti pemutaran offline, streaming, analisis, picture-in-picture, thumbnail pratinjau, penyematan, dan monetisasi seperti pengoptimalan rasio pengisian, Penjadwalan iklan, atau bidding header, untuk menyebutkan beberapa hal, sebaiknya Anda memindahkan kompleksitas tersebut ke solusi yang ada.
Di sinilah framework media berperan. Framework ini memberi Anda serangkaian fitur, dan kondisi tempat Anda dapat menggunakan fitur tersebut, lalu Anda harus memutuskan framework mana yang tepat untuk project Anda. Di artikel berikutnya, kita akan membahas cara membuat PWA dengan streaming offline yang mengimplementasikan beberapa fitur kompleks. Peringatan spoiler, ini adalah pekerjaan yang berat dan masih jauh dari solusi yang siap produksi. Jangan repot-repot dan gunakan framework.
Ada banyak opsi yang dapat dipilih, untuk saat ini artikel ini akan berfokus pada tiga opsi, yaitu Shaka Player, JW Player, dan Video.js.
Shaka Player
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 mana pun. Penyimpanan lisensi bergantung pada dukungan browser.
Ada petunjuk untuk penggunaan dasar di situs dokumentasi Shaka Player. Namun, secara singkat, untuk menggunakan Shaka Player, Anda harus membuat halaman HTML dengan elemen video atau audio terlebih dahulu. Kemudian, di JavaScript aplikasi, Anda akan 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 harus menghosting dan mengenkode file media sendiri. Membuat server media tidak terlalu rumit, tetapi encoding/transcoding media dapat memakan waktu dan rumit. Anda mungkin ingin memindahkan bagian ini ke layanan seperti Zencoder, Amazon Elastic Encoder, atau Google Transcoder API untuk mengotomatiskan tugas berulang dan mempercepat prosesnya.
Keunggulan Shaka Player adalah ada juga alat yang sangat fantastis dan SDK pengemasan media untuk pengemasan dan enkripsi DASH dan HLS yang disebut Shaka Packager. Alat ini dapat menyiapkan dan memaketkan konten media untuk streaming online, yang telah Anda pelajari sebelumnya di Konversi media dan Enkripsi media.
JW Player
Jika Anda mencari opsi yang menyediakan layanan hosting dan encoding/transcoding, Anda dapat melihat JW Player, tetapi perlu diingat bahwa JW Player adalah software eksklusif. Artinya, Anda tidak memiliki banyak kontrol atas platform atau roadmap. Ada versi gratis dasar yang menampilkan video dengan watermark, dan versi komersial.
JW Player mendukung streaming dengan MPEG-DASH (khusus versi berbayar), Manajemen hak digital (DRM) (dengan Vualto), iklan interaktif, penyesuaian antarmuka, dan penyematan. Ada API dan SDK yang didokumentasikan dengan baik. Namun, jika Anda hanya mencari cara cepat dan gratis untuk menghosting media, menyematkan video YouTube biasanya akan menjadi opsi gratis terbaik Anda.
Video.js
Menurut situsnya, Video.js dibuat dari awal untuk dunia HTML5. Pemutar ini mendukung video HTML5 dan format streaming modern seperti DASH dan HLS, serta YouTube, dan Vimeo. Pemutar 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 yang paling mudah adalah menggunakan versi CDN gratis yang disediakan oleh Fastly. Anda dapat mempelajari lebih lanjut cara menyiapkan pemutar di halaman memulai. Video.js adalah pemutar video yang sangat canggih, dan seperti Shaka Player, Anda juga harus menghosting dan mengenkode video. Namun, satu perbedaannya adalah pada sistem plugin tempat Anda dapat melakukan hal-hal seperti memutar video YouTube di pemutar Video.js, yang juga dapat disesuaikan.
Framework lainnya
Ada banyak framework dan library yang tersedia, artikel ini hanya membahas sedikit tentang apa yang ada di luar sana. Saat memilih framework, Anda harus mempertimbangkan fitur yang diperlukan untuk project dan cara Anda berencana menghosting serta mengenkode atau mentranskode 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 pertimbangan lainnya. Lakukan riset dan minta saran dari orang-orang di jaringan Anda. Ada banyak opsi menarik lainnya, dan sebelum Anda membuat pilihan, luangkan waktu untuk memilih salah satu yang cocok untuk tim Anda dan hindari menciptakan utang teknis atau kompleksitas yang tidak perlu untuk dikelola selama siklus proses project.
Selanjutnya, Anda akan mempelajari PWA dengan streaming offline yang kami buat untuk menunjukkan cara mendekati dan mengatasi tantangan utama yang muncul saat meluncurkan solusi Anda sendiri hanya menggunakan objek video HTML5 tanpa framework untuk menangani tugas berat.