Untuk menampilkan video pada halaman web dapat ditangani secara langsung oleh HTML5. Tag yang digunakan untuk menampilkan video adalah <video> </video>. Namun tidak semua format videonya dapat ditampilkan di web. Sementara ini, hanya beberapa format video yang bisa diproses, di antaranya adalah WebM ,OGG , MP4. Berikut daftar ke kompabilitasan dari masing-masing browser terhadap file video.
A. MIME untuk format Video
MIME (Multipurpose Internet Mail Extension) digunakan untuk mekanisme untuk mengirim berbagai informasi seperti text, aplikasi, gambar, suara, video, dan lain sebagainya agar browser tidak salah menterjemahkan konten yang diterima. Tidak hanya pada web, email juga menggunakan MIME. Berikut adalah tipe mime untuk format video.
| Format | MIME-type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
B, Menyajikan File Video pada Tampilan Web
File video seperti mp4 dapat dimainkan pada halaman web melalui tag<video></video>. Ketika mencoba menjalankan video pada halaman web , file video ditempatkan dalam satu folder yang sama dengan file *.htm dan nama file audio nya disesuaikan dengan file audio yang anda gunakan.Berikut adalah format lengkap untuk memainkan video ke dalam aplikasi web</video>.
<html>
<head>
<title>cek video</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="mobil.mp4" type="video/mp4">
browser anda tidak mendukung format video ini.
</video>
</body>
</html>
Atribut Height dan Width dalam tag <video> digunakan untuk menentukan tinggi dan lebar penampilan video. Atribut Src menentukan file video. Bila listing program diatas dijalankan akan menghasilkan tampilan video di browser chrome . Tekan tombol play untuk memulai menjalankan videonya
Tag <video> memiliki beberapa atribut, tidak hanya width dan height saja. Kontrol atribut menambahkan kontrol video, seperti play, pause, dan volume. Berikut ini adalah atribut – atribut yang digunakan pada tag <video>.
| Atribut | Sintaks | Keterangan |
|---|---|---|
| autoplay | <audio autoplay="autoplay"> | Memulai secara otomatis video |
| controls | <video controls = "controls" > Atau juga bisa ditulis <video controls> | Menampilkan tombol kontrol video |
| height | <video height="240"> | Mengatur tinggi frame video |
| width | <video width="320"> | Mengatur lebar frame video |
| loop | <video loop=”loop”> | Memutar video secara berulang-ulang |
| muted | <video muted=”muted”> | mematikan fungsi suara pada video |
| poster | <video poster="anak.gif"> | Memunculkan poster/gambar pada saat video buffer atau diunduh. |
| preload | <video preload="preload"> | Memuat ulang video |
| src | <source src="bola.mp4" type="video/mp4"> | Memberikan link video |
Atribute poster berfungsi untuk memunculkan poster/gambar pada saat video buffer atau diunduh. Misalnya saat buffer video akan muncul gambar “anak.gif” maka dalam tak <video> disisipkan atribut poster=”anak.gif” dengan catatan file anak.gif diletakan dalam folder yang sama dengan file html nya.</video>.
Source atau src digunakan disini sama halnya untuk keperluan video dan audio, hanya saja pada <source> akan menggunakan 2 sumber dimana file tersebut memiliki isi yang sama tetapi format yang berbeda. Tujuannya disini adalah web browser akan memilih memutar yang mana nantinya sesuai dengan format yang didukung oleh web browser tersebut.
C. Menyajikan Animasi Pada Tampilan Web
File animasi juga dapat ditampilkan pada halaman web dengan cara diembed-kan. Embed digunakan untuk melampirkan file dari eksternal seperti *.swf dan lain-lain sebagainya. Perintah yang digunakan adalah <embed src="siboy.swf"> Untuk penulisan kode embed selengkapnya adalah sebagai berikut ini.
<html>
<head>
<title>animasi</title>
</head>
<body>
<embed src="siboy.swf">
<p></p><--file animasi flash siboy.swf--></p>
</body>
</html>
Pada halaman web selain animasi dalam bentuk *.swf dengan menggunakan perintah < embed> dapat juga menampilkan animasi dalam bentuk *.gif. Hal ini dapat dilihat pada potongan kode berikut dimana file rol_belakang.gif merupakan gambar bergerak (animasi).
<html>
<head>
<title>animasi</title>
</head>
<body>
<embed src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqDbANoIjXzauHq9ZfUr4wIBuMiE9dmJAZwJPWOmyfk4KDT6wrGogPO4ZQ5AcJ2ZR89pkWKgUSJ2_IiVFOGyEaHwYAQig_ljWYNr0BpL-icGmH7hStYCCHTDK_HUsWPga99r2dA41pcACJ/s1600/rol_belakang.gif">
</body>
</html>
Untuk attribut penggunaan embed bisa ditambahkan pada tag tersebut attribut seperti pada tabel berikut ini.
| Atribut | Nilai | Keterangan |
|---|---|---|
| height | pixels | Mendefenisikan ukuran tinggi frame media. |
| src | URL | Memberikan sumber media yang dilampirkan |
| type | MIME_type | Menspesifikasikan tipe dari MIME |
| width | pixels | Mengatur lebar dari frame media pada saat program dijalankan di browser. |