I forget stuff… really!!!

Video di HTML5

Sebagai kelanjutan tulisan saya terdahulu, sekarang saya ingin mencoba salah satu fitur HTML5 yaitu Video, dalam hal ini saya mencoba 2 format, yang pertama adalah Ogg Video.

Format video Ogg adalah format yang selalu saya gunakan dalam merender video dari Pitivi dimana hasilnya saya unggah ke youtube.com. Dalam tulisan ini saya menggunakan hasil rekaman Ultah ke 3 anak saya.

eh… omong2 ultah… todays my birthday… 😛

Anyway… browser compatibilty video berformat Ogg adalah sebagai berikut :
1. Out of the box untuk
– Firefox 3.5+ (sudah saya coba di FF 3.6)
– Opera 10.50 (saya mencoba Opera 10.10 dan tidak berhasil)
– Chrome 3.0+ (sudah saya coba di Chrome 5.0)
2. Safari perlu menginstal XiphQT
3. IE perlu menginstal vlc plugin

Format kedua yang saya sediakan adalah MP4, katanya sih browser Safari dan Webkit lainnya di Mac bisa langsung memainkan Video tersebut (mungkin temen2 yang pakai Safari di Mac bisa kasih feedback setelah mencoba tautan di bawah)

Agar kedua format tersebut diproses dengan benar oleh Web Server, telebih dahulu saya memastikan apakah masing2 Mime Type sudah teregister… perintah

[email protected]:~$ cat /etc/mime.types | grep “ogg\|mp4”

memberikan keluaran sebagai berikut

application/ogg ogg ogx
audio/mp4a-latm
audio/ogg oga spx
video/mp4 mp4
video/ogg ogv
video/mp4v-es

ternyata server Hardy Heron saya telah mengenali ogg video dan mp4 tanpa harus melakukan modifikasi.

Langkah berikutnya adalah menempatkan file2 ultahsekar.ogv dan ultahsekar.mp4 serta file video.html berikut

<!DOCTYPE html>
<html lang="en">
<head>
<title>Mencoba HTML5 Video</title>
</head>
<body>
<h2>Mencoba HTML5 Video</h2>
<video type=video/ogg src="ultahsekar.ogv" controls>
<video type=video/mp4 src="ultahsekar.mp4" controls>
<p>Browser anda tidak men-support HTML5 Ogg/MP4 video.</p>
</video>
</body>
</html>

ke salah satu direktori di webserver, sehingga hasilnya bisa anda coba pada tautan berikut : Video

Keren juga… hanya sedikti code dan nggak perlu Flash… 😀

Update 8 Feb 2010: Iseng coba akses dari Chrome di Debian Lenny pakai kernel AMD64… lancar jaya… tanpa flash… 😀

  • wogh, met ultah dulu om… moga panjang umur..

    itu, tag videonya gk ditutup? biar xhtml sekalian 😀
    atribut 'controls' buat apa ya?

    *kesummon dari plurk*

  • jacobian64

    wow keren banget ternyata html 5.aq coba utk mempelajarinya dulu kalau gt. 🙂

    my_blog

  • Hehehe.. Thanks.. 😀

    atribut 'controls' akan mendefinisikan tombol2 play/pause, volume dll… jika dihilangkan tombol2 tersebut tidak ditampilkan dalam web browser…

    Wew… ternyata ada juga traffic dari plurk… 😀

  • monggo… silahkan dicoba… sepertinya www bakal bergeser ke situ… 😀

  • sumodirjo

    selain video fitur HTML 5 yang penting apa ya pak? embed video ini sebenarnya untuk meminimalisir flash player yang proprietary kan?

  • Video di HTML5 termasuk fitur Web Applications 1.0, lebih detail bisa refer ke

    http://www.whatwg.org/specs/web-apps/2009-10-27/

Powered by Wordpress | Designed by Elegant Themes