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, aplikasi 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 kerangka kerja atau pustaka?" Pertanyaan yang bagus, ayo kita pelajari.
Manfaat menggunakan kerangka kerja
Dalam sebagian besar situasi di luar kebutuhan halaman web dasar, Anda mungkin ingin menggunakan framework media untuk menyajikan konten. Kecuali jika Anda siap mengembangkan dan mempertahankan set 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, Anda mungkin harus mengalihkan kompleksitas tersebut ke solusi yang sudah ada.
Di sinilah kerangka kerja media berperan. Keduanya memberi Anda serangkaian fitur, dan kondisi yang memungkinkan penggunaan fitur tersebut, sehingga Anda harus memutuskan framework mana 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}, banyak pekerjaan yang harus dilakukan dan masih jauh dari menjadi solusi siap produksi. Hindari pusing dan gunakan kerangka kerja.
Ada banyak opsi yang dapat dipilih. Untuk saat ini, artikel ini akan berfokus pada tiga, yaitu Shaka Player, JW Player, dan Video.js.
Pemutar 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, secara singkat untuk menggunakan Shaka Player, Anda harus membuat halaman HTML dengan elemen video atau audio terlebih dahulu. Kemudian, di 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 sendiri file media Anda. Membuat server media tidak terlalu rumit, tetapi 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.
Keunggulan Shaka Player adalah adanya alat dan SDK pengemasan media yang sangat fantastis untuk pengemasan dan enkripsi DASH dan HLS, yang disebut Shaka Packager. API ini dapat menyiapkan dan mengemas konten media untuk streaming online, yang telah Anda pelajari sebelumnya dalam Konversi media dan Enkripsi media.
JW Player
Jika Anda mencari opsi yang menyediakan layanan hosting dan encoding/transcoding, Anda dapat mencoba 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 di mana video ditampilkan dengan tanda air, dan versi komersial.
JW Player mendukung streaming dengan MPEG-DASH (khusus versi berbayar), Pengelolaan 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 yang cepat dan gratis untuk menghosting media, menyematkan video YouTube biasanya akan menjadi opsi gratis terbaik.
Video.js
Menurut situs 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 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, ada satu perbedaan pada sistem plugin, yang memungkinkan Anda melakukan berbagai 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 menjelaskan sedikit tentang 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 Anda dan minta saran dari orang-orang di jaringan Anda. Ada banyak opsi bagus lainnya, dan sebelum Anda membuat pilihan, luangkan waktu untuk memilih salah satu opsi yang tepat bagi tim Anda dan hindari membuat utang teknis yang tidak perlu atau kompleksitas 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 yang muncul saat meluncurkan solusi Anda sendiri hanya menggunakan objek video HTML5 tanpa framework untuk menangani tugas berat tersebut.