Sunday, May 17, 2015

Contoh HTML5 Video : Progressive Download

Untuk pengingat, Video dapat diputar di Browser PC, MAC, Smartphone/Tablet Android, SmartPhone/Tablet iOS dengan 3 cara:
1. Progressive Download
2. Streaming
3. Realtime streaming

Baca artikel ini untuk pengingat.

Berikut ini akan diberikan contoh coding untuk HTTP Progressive Download yang bisa diputar di Browser manapun termasuk di Handphone/Smartphone maupun Tablet:




Dalam konteks Player ada 2 opsi:
1. Menggunakan player tambahan spt JW Player
2. Menggunakan player built-in HTML5 Video Player

Note: sebenarnya player spt JW Player menggunakan player (rendering engine Flash Player), dan jika Flash Player tidak tersedia JW Player akan menggunakan rendering engine pakai HTML5 Video Player (Javascript).

Coding berikut adalah native coding HTML5 video tag. Dan karena masing-masing browser hanya support salah satu format container (mp4, webm, ogg), maka ke tiga macam container perlu di masukkan dalam coding html. Tujuannya, agar semua browser bisa play video nya.

File asli: Butterfly.mp4 akan di convert ke 2 container lain: Webm dan Ogg. Tentu saja karena WebM dan Ogg tidak menggunakan codec H264 dan AAC maka transcoding perlu di lakukan. 

Convert MP4 ke Webm:
ffmpeg -i Butterfly.mp4 -vcodec libvpx -acodec libvorbis Butterfly.webm

Convert MP4 ke Ogg:
ffmpeg -i Butterfly.mp4 -vcodec libtheora -acodec libvorbis Butterfly.ogg

Coding HTML5 dengan Video tag

<head>
<title> HTML5 Video by roger rough </title>
<body>
<video controls loop preload="auto">
       <source src="Butterfly.mp4" type='video/mp4' />
       <source src="Butterfly.webm" type='video/webm' />
       <source src="Butterfly.ogg" type='video/ogg codec="theora, vorbis"' />
</video>
</body>
<html>

klik disini untuk melihat hasilnya.

No comments: