Ekstensi Sumber Media HTML5: Membawa Video Produksi ke Web

Dalam dekade terakhir, plugin seperti Flash dan Silverlight telah memungkinkan konsumsi video yang kaya di browser, mendukung layanan populer seperti YouTube dan Netflix. Namun, pendekatan ini telah bergeser ke arah HTML5 selama beberapa tahun terakhir.

Hampir dua tahun yang lalu, W3C menerbitkan rekomendasi terakhir dari spesifikasi HTML5, yang datang dengan serangkaian elemen HTML dan API baru, terutama untuk video. Beberapa dari mereka bertujuan untuk lebih banyak semantik di halaman web tetapi tidak memperkenalkan fitur baru. Lainnya memperluas kemungkinan web dan meningkatkan kemungkinan bagi pengembang tanpa memerlukan plugin seperti Adobe Flash, Microsoft Silverlight atau Java.

Bacaan Lebih Lanjut tentang SmashingMag:

• Memberikan Pengalaman Asli Dengan Teknologi Web
• Membuat Polyfill Lengkap Untuk Elemen Detail HTML5
• Panduan Pemula Untuk Aplikasi Web Progresif
• Logo HTML5: Bagaimana Menurut Anda?

Ini sangat penting karena, misalnya, Google telah mengumumkan penghapusan NPAPI (API yang digunakan oleh plugin ini), seperti halnya Firefox, dan Microsoft menganjurkan penjelajahan bebas plugin. Meskipun vendor ini masih menyediakan Flash player, mungkin hanya masalah waktu sebelum mereka tidak menyediakannya. Selain itu, browser di perangkat seluler selangkah lebih maju karena kebanyakan dari mereka tidak mendukung plugin dan tidak memiliki pemutar Flash.

Mari kita lihat beberapa elemen HTML5 baru dan apa yang ditingkatkan untuk video:

• <canvas> menyediakan skrip untuk merender grafik, grafik game, dan lainnya. Ini terkadang disebut sebagai Canvas JavaScript API. Elemen canvas juga dapat digunakan dengan WebGL untuk merender grafik 2D dan 3D, menggunakan GPU kartu grafis.
• <video> memungkinkan pemutaran video out-of-the-box, yang benar-benar mengagumkan. Ini akhirnya membuat multimedia bebas plugin di web menjadi kenyataan. Faktanya, vendor browser tampaknya menyetujui satu format — MPEG-4/H.264, yang didukung secara universal di browser modern, dengan pengecualian Opera Mini.
• <audio> memungkinkan pemutaran konten audio langsung di halaman web. Seperti halnya video, keputusan format container dan codec mana yang akan didukung diserahkan kepada vendor browser.
• <track> dapat digunakan untuk trek teks berwaktu, seperti subtitel dan teks dalam video. File WebVTT didukung di luar kotak.

Sebagian besar elemen baru telah diketahui dan digunakan untuk sementara waktu dalam kode pemutar video HTML5 karena telah diterapkan di semua peramban modern. Spesifikasinya stabil. Namun, W3C masih memiliki banyak pekerjaan yang harus dilakukan.

Bagi saya, standar terpenting yang sedang dikerjakan W3C adalah standar “Media Source Extensions” (MSEs), yang saat ini berstatus “Rekomendasi Kandidat.” API JavaScript ini memungkinkan kami menghasilkan aliran media untuk <video> , <audio> dan elemen lainnya, memungkinkan standar streaming adaptif seperti MPEG-DASH dalam HTML5 dan JavaScript murni.

Yang menarik lainnya adalah standar "Ekstensi Media Terenkripsi", yang memungkinkan pemutaran konten yang dilindungi dalam HTML5 dan JavaScript. Namun, ini saat ini masih dalam "Draf Kerja" dan akan membutuhkan beberapa saat untuk diselesaikan.

Kami menyambut standar baru dan menantikan saat ketika kami tidak membutuhkan pemutar Flash atau plugin, ketika multimedia dapat dilihat di hampir semua perangkat dengan satu implementasi.

Mengapa MPEG-DASH?

Mari kita lihat format streaming MPEG-DASH dan mengapa digunakan dalam HTML5. MPEG-DASH (DASH adalah kependekan dari dynamic adaptif streaming over HTTP) adalah standar internasional yang independen dari vendor yang diratifikasi oleh MPEG dan ISO (ISO/IEC 23009-1). Teknologi streaming adaptif sebelumnya — seperti Apple HLS, Microsoft Smooth Streaming, dan Adobe HDS — dirilis oleh vendor dengan dukungan terbatas untuk server streaming independen vendor atau untuk klien pemutaran. Situasi yang bergantung pada vendor jelas tidak diinginkan, sehingga badan standardisasi memulai proses harmonisasi, yang menghasilkan ratifikasi MPEG-DASH pada tahun 2012.

Ini adalah tujuan dan manfaat MPEG-DASH secara singkat:

• Kurangi penundaan startup serta buffering dan jeda selama pemutaran video.
• Lanjutkan adaptasi dengan situasi bandwidth klien.
• Gunakan logika streaming berbasis klien untuk mengaktifkan skalabilitas dan fleksibilitas tertinggi.
• Gunakan CDN, proxy, dan cache berbasis HTTP yang ada dan hemat biaya.
• Secara efisien melewati NAT dan firewall melalui penggunaan HTTP.
• Aktifkan enkripsi umum melalui pensinyalan, pengiriman, dan penggunaan beberapa skema DRM bersamaan dari file yang sama.
• Aktifkan penyambungan sederhana dan penyisipan iklan (bertarget).
• Mendukung "mode trik" secara efisien.
• Dan banyak lagi!

Dalam beberapa tahun terakhir, MPEG-DASH telah diintegrasikan dalam upaya standarisasi baru — seperti HTML5 MSE, yang memungkinkan pemutaran DASH melalui tag video dan audio HTML5, serta Ekstensi Media Terenkripsi HTML5, yang memungkinkan pemutaran yang dilindungi DRM di browser web . Selanjutnya, perlindungan DRM dengan MPEG-DASH diselaraskan di berbagai sistem dengan MPEG-CENC (untuk enkripsi umum); dan pemutaran MPEG-DASH pada platform smart TV yang berbeda diaktifkan melalui integrasi dengan Hybrid Broadcast Broadband TV (HbbTV 1.5 dan HbbTV 2.0).

Selain itu, penggunaan standar MPEG-DASH telah disederhanakan oleh upaya industri di sekitar Forum Industri DASH dan rekomendasi DASH-AVC/264-nya, serta dengan inisiatif berwawasan ke depan seperti rekomendasi DASH-HEVC/265 tentang penggunaan H.265/HEVC dalam MPEG-DASH.

Saat ini, MPEG-DASH semakin banyak digunakan, dipercepat oleh layanan seperti Netflix dan Google, yang baru-baru ini beralih ke standar baru ini. Dengan dua sumber lalu lintas utama ini, MPEG-DASH telah menyumbang 50% dari total lalu lintas Internet.

Bagaimana Cara Kerja UMK?

Sekarang mari kita lihat detail UMK dan bagaimana mereka dapat digunakan oleh pengembang. MSE adalah spesifikasi yang memperluas HTMLMediaElement untuk memungkinkan JavaScript membangun aliran media secara dinamis untuk tag audio dan video . Ini tidak mungkin sebelumnya karena tag ini hanya dapat mengakses file lengkap (yaitu file MP4). Pendekatan ini juga disebut streaming progresif, atau pengunduhan progresif, karena file media diunduh dan diputar pada saat yang sama, memungkinkan streaming semu.

Namun, ini membawa serta kemampuan pencarian yang buruk dan tidak ada kemungkinan untuk menyesuaikan kualitas video dan audio dengan situasi bandwidth pengguna. Dengan membangun aliran media dalam JavaScript sebagai input untuk tag audio dan video , pengembang sekarang dapat secara dinamis menyesuaikan aliran media dengan konteks pengguna, sehingga meningkatkan pengalaman streaming.

Seperti disebutkan, MPEG-DASH adalah format streaming pilihan untuk UMK. Jadi, mari kita lihat langkah-langkah yang diperlukan untuk membuat pemutar video berbasis HTML5 MSE:

1. Unduh dan urai file manifes — disebut MPD dalam MPEG-DASH — yang menjelaskan detail aliran video, seperti jumlah tingkat kualitas dan resolusi aliran video, bahasa audio dan subtitle, serta nama segmen media dan file di server asal berbasis HTTP atau CDN.
2. Perkirakan bandwidth yang tersedia di perangkat klien, pilih kualitas video yang sesuai untuk mencapai streaming tanpa buffer, dan unduh segmen media dalam JavaScript.
3. Serahkan segmen media yang diunduh ke buffer MSE di JavaScript.
4. Dekode dan render video melalui tag video , biasanya di perangkat keras.

Beginilah cara kerja pemutar streaming adaptif berbasis HTML5, seperti yang digunakan oleh Netflix dan YouTube. Sudah ada solusi yang cukup matang di luar sana, yang memudahkan pengembang dan penyedia konten untuk beralih ke streaming bitrate adaptif di HTML5, seperti proyek sumber terbuka DASH-IF dash.js dan pemutar Bitdash HTML5.

Pembuatan konten MPEG-DASH juga mudah dan didukung oleh alat sumber terbuka seperti x264 dan MP4Box, serta oleh layanan pengkodean komersial seperti Bitcodin

Namun, penggunaan UMK tidak terbatas pada MPEG-DASH. Semakin banyak proyek (termasuk hls.js) dan pemain (termasuk Bitdash) mendukung format HLS Apple dalam HTML5 menggunakan MSE. Mereka melakukan ini dengan melakukan trans-multiplexing segmen media HLS — yang merupakan wadah MPEG2-TS — ke Format File Media Basis ISO yang diperlukan oleh HTML5 dan MPEG-DASH.

Ekstensi Media Terenkripsi Untuk DRM

Perubahan besar saat ini terjadi di pasar DRM, yang disebabkan oleh penurunan plugin NPAPI — seperti Silverlight, yang menyebabkan penurunan sistem DRM terkemuka, PlayReady — dari Chrome dan Firefox. Ini menempatkan hampir semua penyedia konten premium dalam situasi yang sulit karena mereka harus beralih teknologi dan menemukan solusi masa depan.

Penerbit media streaming premium tidak akan dapat mengandalkan DRM PlayReady Microsoft untuk mengamankan konten mereka di Chrome dan Firefox pada PC dan perangkat Android. Mereka harus mengevaluasi kembali perlindungan konten dan strategi platform streaming mereka dan harus menemukan solusi masa depan dan kemudian segera beralih teknologi.

Bagi banyak penyedia konten, MPEG-DASH telah muncul sebagai teknologi pilihan. Proyek DASH telah diluncurkan dengan kecepatan tinggi, dan MSE dan Encrypted Media Extensions (EMEs) dengan Widevine DRM terlihat sebagai alternatif yang paling layak. Selain itu, MPEG-CENC memungkinkan untuk mendukung sistem DRM terpisah hanya dengan satu versi konten yang dilindungi, dan EME didasarkan pada MSE untuk konten berbasis MPEG-DASH.

Jadi, kombinasi sistem DRM yang berbeda ini — misalnya, Widevine Modular untuk Chrome dan Android, Microsoft PlayReady untuk Internet Explorer dan Edge, dan Adobe's Primetime untuk Firefox — untuk satu versi konten memberikan insentif tambahan kepada penyedia konten untuk beralih ke MPEG -DASH sebagai standar internasional, mengingat fleksibilitasnya dengan streaming, DRM, dan CDN.

Dukungan Browser Untuk UMK Dan EME

Setelah beberapa tahun lambat diadopsi oleh vendor browser HTML5 dan khususnya UMK, kami sekarang melihat mayoritas dari mereka mendukungnya. Ini juga berlaku untuk EME, meskipun dalam hal ini setiap vendor menggunakan sistem DRM yang berbeda, dan ekosistemnya sedikit lebih berbeda.

Namun, untuk menjangkau 99% pengguna, kami harus memiliki pengaturan streaming video yang juga mendukung browser yang tidak mendukung UMK, khususnya versi browser lama dan Safari di iOS. Browser lama dapat dilayani dengan mudah menggunakan pemutar berbasis Flash, yang dapat memutar konten MPEG-DASH yang sama yang digunakan oleh UMK, seperti yang ditunjukkan oleh pemutar Bitdash. Untuk mendukung perangkat iOS, kita harus menggunakan format streaming Apple, yang disebut HLS, yang diamanatkan Apple untuk HTML5. Standar terbuka seperti MSE tidak didukung oleh Apple, meskipun didukung di Safari di OS X.

Matriks berikut memberikan gambaran umum tentang status dukungan MSE dan EME di seluruh browser dan platform saat ini (milik Bitmovin):

Masa Depan Video HTML5

Codec media baru mendorong ke pasar, membuat kompresi video menjadi lebih efisien, yang sangat penting untuk format berkualitas lebih tinggi seperti 4K dan UHD dan untuk streaming ke perangkat seluler. Codec yang paling umum adalah HEVC/h.265 , yang bisa menjadi codec default dalam beberapa tahun dari sekarang (jika situasi paten tidak mengacaukannya). Dan itu juga akan memanfaatkan MSE bawaan browser untuk pemutaran dan menggunakan MPEG-DASH sebagai format streaming, yang menunjukkan fleksibilitas standar terbuka ini.

Pengembang pemutar video hanya perlu melakukan beberapa adaptasi sederhana, seperti mengubah atribut codec saat membuat SourceBuffer; dan, jika browser yang mendasari mendukung decoding HEVC (kemungkinan besar dilakukan oleh dekoder perangkat keras), maka Anda akan dapat menonton streaming HEVC MPEG-DASH Anda dalam HTML5! Kami telah berhasil menguji dengan browser, seperti Microsoft Edge, yang dilengkapi dengan dukungan HEVC. Juga, Google baru-baru ini mengumumkan dukungan di browser Chromium-nya.

Namun demikian, HEVC belum tersedia untuk sebagian besar aset video Internet, dan hanya beberapa perangkat yang mampu mendekodekannya. Dan, tentu saja, ini bukan satu-satunya codec di kota. Format pengkodean video terbuka dan bebas royalti VP9 (penerus VP8) bertujuan untuk memiliki efisiensi penyandian yang lebih baik dan sudah didukung oleh browser populer seperti Google Chrome dan Microsoft Edge, dan codec ini juga kompatibel dengan MSE. Namun, kami tidak dapat memperkirakan codec mana yang akan masuk ke rutinitas streaming harian kami. Tapi apakah itu VP8/9, AVC atau HEVC, MSE dan MPEG-DASH sudah siap!

Tren yang akan datang adalah video 360 derajat, yang cukup mudah digunakan di HTML5. Pengembang dapat menggunakan dukungan streaming adaptif dari MSE dan hanya menambahkan lapisan rendering JavaScript atau WebGL untuk pengalaman 360 derajat di atasnya. Baru-baru ini, saya memberikan ceramah tentang topik ini dan tentang cara membangun layanan seperti Netflix untuk realitas virtual menggunakan HTML5, JavaScript, DASH, dan WebGL.

Kesimpulan

Saya harap artikel ini memberi Anda gambaran yang baik tentang keadaan dan masa depan video di web. UMK dan EME adalah langkah besar menuju ekosistem standar terbuka untuk video di web, menggantikan plugin seperti Flash dan Silverlight. Selain itu, HTML5 menjadi platform pilihan di dunia multi-platform saat ini, termasuk lingkungan desktop, seluler, dan TV pintar.

Seiring dengan standar streaming seperti MPEG-DASH, penyedia konten dapat memiliki solusi video terpadu di seluruh platform dan perangkat . Mereka dapat meningkatkan pengalaman pengguna melalui format streaming adaptif, yang mencegah buffering, mengurangi waktu pemuatan, dan memberikan kualitas terbaik untuk bandwidth dan situasi perangkat setiap pengguna.