Belajar Elemen Video HTML5
total read time
Dari artikel yang saya jelaskan sebelumnya, mungkin anda sudah
sedikit mengerti tentang html5 kan? Nah, untuk kali ini langsung saja
kita akan membahas struktur elemennya. Yang pertama kali akan saya bahas
adalah video html5.
Buat kamu yang baru masuk ke sini, coba pelajari dulu tutorial tentang belajar HTML5 dan Belajar Elemen HTML5 ini.
Video html5 elemen diperkenalkan dalam spesifikasi rancangan HTML5
dengan tujuan memutar video atau film. Sebagian fungsinya adalah
menggantikan elemen objek (yang isinya skrip yang rumit). Video HTML5
dimaksudkan untuk menjadi standar baru dalam menampilkan video di web
tanpa plugin. Intinya sih supaya lebih cepat loading ketimbang harus
dengan plugin flash atau yang lain.
Standar HTML5 mencakup banyak fitur baru untuk aplikasi web dan
antarmuka yang lebih dinamis. Salah satu komponen seperti disebut di
atas yakni <video>. Dengan menggunakan Javascript HTML5 video kita
dapat diputar pada perangkat-perangkat mobile terbaru dan bahkan di
browser lama tanpa Flash. Youtube juga telah mencoba fitur baru ini tapi
masih dalam taraf percobaan.
Untuk menampilkan video menggunakan html5, perhatikan script HTML5 berikut ini :
<!DOCTYPE HTML> <html> <body> <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag. </video> </body> </html>
Keterangan :
Atribut kontrol menambahkan kontrol video, seperti play, pause, dan volume.
Sebagaimana kamu lihat, kita juga bisa menyertakan atribut lebar dan
tingginya. Jika tinggi dan lebar diatur, ruang yang diperlukan untuk
video akan dibatalkan pada saat halaman dibuka. Namun, tanpa
atribut-atribut ini, browser tidak mengetahui ukuran video, dan tidak
dapat memesan ruang yang sesuai untuk itu. Efeknya bahwa tata letak
halaman akan berubah selama pembebanan (saat video sedang dimuat).
Anda juga harus memasukkan konten teks antara <video> dan </
video> tag untuk browser yang tidak mendukung elemen <video>.
Unsur <video> memungkinkan beberapa elemen <source>.
elemen <source> dapat link ke file video yang berbeda. Browser
akan menggunakan format diakui pertama.
