Sampai sekarang belum adanya patokan standar yang digunakan untuk memainkan suatu file video pada situs web, sehingga browser satu dengan lainnya memerlukan plug-in berbeda untuk melakukan hal itu.
Di HTML5 ada satu elemen bernama VIDEO, dia digunakan untuk memainkan file video pada situs web.
Contoh berikut menggunakannya untuk memainkan file video Upin & Ipin di web:
CONTROLS, atribut itu untuk menampilkan video controls, seperti tombol play, stop, pause, dll. SRC (atribut wajib yang harus ada), dia itu untuk menetapkan URL dari file video yang ingin dimainkan - untuk contoh di atas upin_dan_ipin.mp4.
Atribut lain untuk elemen VIDEO adalah:
AUTOPLAY="autoplay"
Atribut AUTOPLAY berguna agar ketika video telah siap (browser pertama kali muat), video itu akan langsung dimainkan, tanpa harus menekan tombol play. Atribut AUTOPLAY sering digunakan ketika atribut CONTROLS tidak digunakan, opsional. Sebagai contoh:
LOOP="loop"
Atribut LOOP berguna agar video start kembali, setiap kali video itu telah selesai main. Sebagai contoh:
PRELOAD=["auto","metadata","none"]
Atribut PRELOAD bisa kita gunakan untuk menetapkan bagaimana cara file video dimuat oleh browser ketika halaman pertama kali muat (ditampilkan).
HEIGHT dan WIDTH
Atribut HEIGHT dan WIDTH masing-masing menetapkan tinggi dan lebar dari video player. Sebagai contoh:
POSTER=URI
Atribut POSTER digunakan untuk menetapkan file gambar yang akan ditampilkan selagi video itu sedang dimuat, atau sampai pengguna menekan tombol play. Sebagai contoh:
MUTED="muted"
Atribut MUTED digunakan untuk menetapkan bahwa output audio dari video tidak terdengar (dimatikan). Umumnya untuk mengembalikan output audio agar terdengar kembali, pengguna cukup mengklik gambar speaker tercoret yang ada di video player. Sebagai contoh:
IE9, Firefox, Opera, Chrome, dan Safari mendukung VIDEO. Tetapi, IE8 dan versi sebelumnya, tidak mendukung VIDEO. Saat ini, ada 3 format file yang didukung untuk VIDEO: MP4 (file MPEG 4 dengan H264 video codec dan AAC audio codec), WebM (file WebM dengan VP8 video codec dan Vorbis audio codec), dan Ogg (file Ogg dengan Theora video codec dan Vorbis audio codec).
- IE9 mendukung MP4.
- Firefox 3.6 mendukung WebM dan Ogg.
- Google Chrome 6 mendukung MP4, WebM, dan Ogg.
- Apple Safari 5 mendukung MP4.
- Opera 10.6 mendukung WebM dan Ogg.
Untuk dukungan format file video di atas berlainan untuk setiap browser. Semisal cotoh kasus ketika saya mempunyai kode berikut:
Kode di atas hanya IE9, Google Chrome 6, dan Apple Safari 5 saja yang akan menjalankan file format videonya.
Bagaimana dengan Firefox 3.6 dan Opera 10.6 untuk antisipasinya?
Antisipasinya dengan melibatkan elemen SOURCE, dan menjadi berikut bentuknya:
Lihat pada kode yang diberikan warna biru, itulah antisipasi untuk browser Firefox 4.0 dan Opera 10.6. Begitupun untuk kasus-kasus yang sebaliknya.
