Agar kita semua bisa sejenak mengingat kembali, berikut adalah contoh bagaimana cara menanamkan video secara klasik ke dalam sebuah halaman web:
<object classid="clsid:d27cdb6e-ae6-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
Sintaks tersebut tentu saja jauh dari indah.
Namun, walaupun mengesampingkan aspek estetik: Sintaks tersebut dalam bentuk ini terlalu rentan terhadap kesalahan dan terlalu kompleks. Dalam HTML5, video bisa lebih mudah disisipkan. Untuk itu, digunakanlah elemen video.
Berikut adalah contoh cara menanamkan elemen video:
<video src="video.ogv" width="300" height="200"> Browser Anda sayangnya tidak kompatibel dengan HTML5 </video>
Ini adalah bentuk yang paling sederhana. Tiga atribut pada bentuk sintaks ini sangat penting. Melalui src, video yang akan disisipkan dapat ditentukan. Pastikan untuk memberikan path yang benar di sini. Dua atribut lainnya, yaitu width dan height mengontrol lebar dan tinggi video. Jika salah satu dari dua nilai tidak disediakan, video akan ditampilkan dalam ukuran aslinya. Jika hanya satu nilai disediakan, browser akan menghitung nilai yang lain secara otomatis. Atribut autoplay menginstruksikan browser untuk secara otomatis memulai video ketika halaman telah dimuat. Atribut ini umumnya sebaiknya tidak diatur, karena pemutaran otomatis seringkali tidak diinginkan oleh pengguna. Hal ini lebih berlaku lagi untuk pengguna perangkat mobile dengan bandwidth yang rendah.
Atribut menarik lainnya adalah controls. Dengan menggunakannya, browser akan menampilkan elemen kontrol bawaan untuk pemutaran dan volume.
<video src="video.ogv" width="300" height="200" controls> Browser Anda sayangnya tidak kompatibel dengan HTML5 </video>
Ini adalah tampilan di browser:
Melalui kontrol yang ditampilkan, video tidak hanya bisa dijeda dan dijalankan kembali, tetapi juga pengaturan volume dapat dilakukan di dalamnya.
Anda dapat menentukan gambar yang ditampilkan sebelum video dimulai melalui atribut poster. Untuk itu, digunakanlah atribut poster.
<video src="video.ogv" width="300" height="200" poster="video.gif"> Browser Anda sayangnya tidak kompatibel dengan HTML5 </video>
Pastikan kembali untuk memberikan path yang benar di sini agar gambar dapat ditampilkan dengan benar.
Hati-hati saat menggunakan atribut autoplay. Atribut ini menyebabkan video dimainkan secara otomatis begitu video tersedia.
<video src="video.ogv" width="300" height="200" autoplay> Browser Anda sayangnya tidak kompatibel dengan HTML5 </video>
Mengenai lalu lintas, atribut preload dapat menjadi penting. Atribut ini mengontrol perilaku prapemuatan. Atribut ini dapat mengambil nilai-nilai berikut:
• auto – Browser dapat memuat seluruh file.
• none – File tidak perlu dimuat sebelumnya.
• metadata – File dapat dimuat sebelumnya.
Jika atribut preload tidak ada, maka browser akan mengambil pengaturan bawaan.
Video dan Codec
Bagi yang terlibat dalam menyematkan dan memutar video di halaman web, pada akhirnya akan menemui masalah dengan berbagai codec yang berbeda. Berkat codec ini, video dapat dikompresi dan didekompresi secara efisien. Masalahnya: Produsen browser hingga saat ini belum bisa sepakat pada format codec yang sama. Untuk HTML5 (dan pada akhirnya untuk Anda juga), hal ini berarti tidak ada codec yang konsisten untuk video dan file audio.
Untuk video, format Ogg dan MP4 sudah banyak digunakan. Oleh karena itu, Anda sebaiknya selalu aman jika video ditawarkan dalam kedua format tersebut. Untuk itu, berikan dua elemen source pada elemen video.
<video width="400" height="300" controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
Jadi, Anda tidak memberikan sumber video di dalam elemen video. Sebaliknya, di sana hanya terdapat informasi umum mengenai tampilan. Video yang akan ditampilkan ditentukan melalui elemen source. Atribut src menunjukkan video yang sesuai. Setelah atribut type, ada informasi tentang jenis video atau format video tersebut.
Jika diberikan beberapa elemen source, browser akan memutar video pertama yang "pas". Konsep "pas" ini akan dijelaskan berikutnya.
Jadi, format apa yang sebenarnya didukung oleh browser tertentu? Jawabannya ada pada tabel berikut.
| Browser | Ogg Theora (.ogg) | h.264 (.mp4) |
| Internet Explorer | Ab Version 9 | |
| Mozilla Firefox | Ya | |
| Google Chrome | Ya | Ya |
| Opera | Ya | |
| Safari | Ya | |
| iPhone | Ya | |
| Android | Ya |
Tabel menunjukkan dilema: interpretasi format hampir merata di berbagai browser. Oleh karena itu, hampir wajib menyediakan video dalam dua format.
Melalui atribut media, yang hanya diperuntukkan untuk elemen source, Anda dapat menentukan secara eksplisit tipe media yang sesuai untuk video tersebut. Untuk menentukan video khusus untuk perangkat tertentu, atribut media harus diberikan di src. Dengan atribut media, Anda dapat menentukan tipe media yang diinginkan.
Contoh penggunaan elemen source bisa seperti berikut:
<video width="400" height="300">
<!-- Hanya untuk perangkat mobile -->
<source src="video_mobil.ogg" media="handheld" />
<!—Semua perangkat lainnya -->
<source src="video_normal.ogg" media="all" />
</video>
Di sini, melalui atribut media, diperiksa apakah itu perangkat mobile. Jika iya, video dengan ukuran kecil akan diputar. Jika bukan, maka menggunakan nilai all.
Menyisipkan Video dengan Aman
HTML5, seperti yang diketahui, belum sepenuhnya didukung oleh semua browser. Hal ini juga berlaku untuk elemen video. Salah satu solusinya adalah dengan mengombinasikan berbagai teknik penyisipan. Elemen-elemen object dan embed yang sudah dikenal dilengkapi dengan elemen video. Berikut adalah contohnya:
<video width="640" height="360" src="http://www.youtube.com/v/mR5h_EXYKA0?fs" autobuffer controls poster="br.gif"> <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640" height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab" /> <param value="http://www.youtube.com/v/mR5h_EXYKA0?fs" /> <param value="true" /> <param value="false" /> <embed src="http://www.youtube.com/v/mR5h_EXYKA0?fs" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object> </video>
Video yang disisipkan dengan cara ini dapat diputar di sebagian besar browser. Browser yang mengenali elemen video akan menggunakan itu. Sementara browser lain akan menggunakan informasi di elemen object atau embed.
