HTML 5 Video & HLS

HTLM5 Video Tag

Tersedia 2 macam file video (lebih tepatnya Video Container, bukan Video Codec) yang di support HTML5:
1. Webm (didukung Firefox)
2. MP4 (didikung Chrome)
Ada satu standar lagi yaitu Ogg, yang dipakai oleh Opera Browser.

Sejarah:
Sebelumnya munculnya HTML5, tidak tersedia pemutar Video di Web Browser. Oleh karena itu muncul beberapa plug-in. Yang paling terkenal adalah Flash Player.

Timbul keinginan untuk memasukkan kemampuan pemutar Video di Web Browser tanpa perlu plug-in. Dinginkan adanya satu open standar. Banyak terjadi keberatan dari perusahaan yang membuat plug-in, termasuk dari pembuat Web Browser.

Masalah di perparah karena yang jadi format standar MP4 dimana container MP4 ini juga bukan benar-benar free.

Akhirnya W3C bersepakat mengeluarkan spek HTML5 video dengan menggunakan code Javascript yag secara inherent sudah di support oleh semua browser (tanpa perlu mendownload JRE, atau plug-in Java, atau plug-in player spt Flash Player).

Tahun 2008, Kaltura Project diluncurkan, dimana disediakan HTML5 Player dalam bentuk Javascript yang bisa digunakan untuk play video menggunakan <video> tag di HTML5. Selanjutnya banyak player-player HTML5 open source (Javascript) yang bermunculan yang bisa dipakai oleh user sebcara bebas seperti Video.JS dari Brightcove, dan player2 lain.

Beberapa perusahaan spt. JWPlayer memperbarui source code yang dia miliki dan menambahkan fitur didalamnya untuk menjadi satu Code baru yang yang propietary untuk support HTML5 video dan punya fasilitas fall-back ke Flash. User bisa menggunakan library code ini (dengan berbayar).

Daftar player HTML5 lengkap ada di sini. 

TIPS MEMILIH PLAYER

Kita dapat memutar video pada browser yang support HTML5. Akan tetapi terdapat kendala jika kita hanya berpatokan dengan HTML5 video, karena HTML5 memiliki 3 format video container (mp4, ogg, webm). Tidak semua browser support ke tiga macam video container tsb.

Codec yang disupport masing-masing container di HTML5 Video adalah sbb:

.mp4 = H.264 + AAC
.ogg/.ogv = Theora + Vorbis
.webm = VP8 + Vorbis

Disamping itu Flash Video masih (at least sampai saat ini) mendominasi Video Player di Internet.

Oleh karena itu jalan tengahnya adalah mensupport HTML5 video dan pada saat yang sama bisa fallback ke Flash. Beberapa player yang bisa melakukan hal tsb:

• Video.js
• JW Player
• Theoplayer

Untuk play Flash video, player diatas tetap menggunakan Flash Player plug-in sebagai rendering engine, namun apabila di broswer belum terinstall Flash Player plug-in (atau tidak support Flash Player spt di Android dan iOS Smartphone) maka player akan menjalankan HTML5 video player, dimana player tsb sudah mengangkut kode JavaScript Video Player HTML5.

Berikut adalah kompilasi dari Delivery Video


1. Delivery VOD via HTTP Progressive Download

2. Delivery Streaming (Live maupun VOD) via HTTP

3. Delivery Realtime Streaming (Live) via RTMP, RTSP

HTTP Progressive Download

Semua HTML5 browser support progressive download, dimana file Video di ambil pakai HTTP, lalu sembari download player langsung play content video tsb.

Kelemahan Progressive Download, adalah kalau user jump ke time tertentu maka play ke time tsb baru bisa terjadi setelah player mendownload sampai ke time tsb. Berbeda dengan Streaming, dimana player bisa langsung memutar ke time yang dituju (tanpa harus mendownload file dari awal sampai time yang diminta).


HTTP Streaming

Yang paling umum digunakan adalah HLS (HTTP Live Streaming) dengan menggunakan chunk .TS file yang dirangkum dalam file m3u8.

Karena menggunakan HTTP maka tidak diperlukan Media Streaming Server (seperti Wowza, Helix, dll). Cukup Web Server menggunakan Apache, atau NGINX dan file m3u8 serta file media .TS disimpan dalam Web Server tsb, maka sudah bisa di create layanan Adaptive Bitrate Streaming.

Reatime Streaming

Kalau HLS bagus dan simple, tapi punya kelemahan dimana chunk file harus di download dulu. Biasanya chunk file ini durasi nya di set pada saat melakukan Transcoding sebuah File, biasanya di set 5 detik. Lebih jauh, kalau ada Live Streaming, maka encoder harus menyimpan chunk-chunk file ini terlebih dahulu di hardis local Encoder, lalu dengan teknik mirror file tsb di simpan ke Web Server. Proses ini memakan waktu. Dalam kebanyakan case bisa memakan sampai 60 detik.

Sehingga HLS jika digunakan untuk Realtime Streaming (spt menyiarkan siaran Sepak Bola live) menjadi tidak begitu jadi solusi yang bagus.

Untuk Realtime Streaming, maka yang umum digunakan adalah protocol RTSP atau RTMP. Protocol RTSP tidak adaptive bitrate, dan ini adalah protocol yang sudah sangat kuno (mulai digunakan di era 95'an). Sedangkan RTMP bisa adaptive menggunakan Adaptive RTMP.

Problemnya jika menggunakan RTMP maka pilihan player nya terbatas. RTMP dibuat oleh Adobe, sehingga pemutar video (rendering video) dilakukan oleh Flash Player. Sayangnya Flash player tidak di support oleh Apple iOS dan Android 4 ke atas.

Saat ini untuk bisa di play di banyak platform pilihannya adalah HLS.

VIDEO PLAYER di HANDSET

Seperti terlihat di gambar, rendering video di handset pada dasarnya tersedia 2 macam:
1. HTML5 video rendering engine (JavaScript)
2. Flash Player rendering engine

Akan tetapi untuk Windows Phone, di dalamnya support Silverlight rendering engine.

Dari aspect HTML coding, apabila coding HTML untuk video diinginkan bisa di play di Browser PC dan di Browser Handphone, maka pilihannya adalah: MediaElement.js. Karena Mediaelement,js support untuk 3 rendering engine yaitu: HTML5 video rendering engine, Flash Player rendering engine, dan Silverlight rendering engine.

Tapi MediaElement.js tidak support RTMP. Apabila website yang kita buat ingin meng-cover Realtime Streaming via RTMP, maka pilihan yang paling bagus adalah JWPlayer. Karena JWPlayer support untuk HTTP Progressive Download, HLS, dan RTMP.