Untuk menampilkan video pada halaman web sanggup ditangani secara eksklusif oleh HTML5. Tag yang dipakai untuk menampilkan video yaitu <video> </video>. Namun tidak semua format videonya sanggup ditampilkan di web. Sementara ini, hanya beberapa format video yang sanggup diproses, di antaranya yaitu WebM ,OGG , MP4. Berikut daftar ke kompabilitasan dari masing-masing browser terhadap file video.
A. MIME untuk format Video
MIME (Multipurpose Internet Mail Extension) dipakai untuk prosedur untuk mengirim banyak sekali gosip menyerupai text, aplikasi, gambar, suara, video, dan lain sebagainya semoga browser tidak salah menterjemahkan konten yang diterima. Tidak hanya pada web, email juga memakai MIME. Berikut yaitu 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 menyerupai mp4 sanggup 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 diadaptasi dengan file audio yang anda gunakan.Berikut yaitu 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> dipakai untuk menentukan tinggi dan lebar penampilan video. Atribut Src menentukan file video. Bila listing kegiatan diatas dijalankan akan menghasilkan tampilan video di browser chrome . Tekan tombol play untuk memulai menjalankan videonya
Tag <video> mempunyai beberapa atribut, tidak hanya width dan height saja. Kontrol atribut menambahkan kontrol video, menyerupai play, pause, dan volume. Berikut ini yaitu atribut – atribut yang dipakai pada tag <video>.
| Atribut | Sintaks | Keterangan |
|---|---|---|
| autoplay | <audio autoplay="autoplay"> | Memulai secara otomatis video |
| controls | <video controls = "controls" > Atau juga sanggup 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 bunyi pada video |
| poster | <video poster="anak.gif"> | Memunculkan poster/gambar pada ketika 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 ketika video buffer atau diunduh. Misalnya ketika 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 dipakai disini sama halnya untuk keperluan video dan audio, hanya saja pada <source> akan memakai 2 sumber dimana file tersebut mempunyai isi yang sama tetapi format yang berbeda. Tujuannya disini yaitu web browser akan menentukan memutar yang mana nantinya sesuai dengan format yang didukung oleh web browser tersebut.
C. Menyajikan Animasi Pada Tampilan Web
File animasi juga sanggup ditampilkan pada halaman web dengan cara diembed-kan. Embed dipakai untuk melampirkan file dari eksternal menyerupai *.swf dan lain-lain sebagainya. Perintah yang dipakai yaitu <embed src="siboy.swf"> Untuk penulisan instruksi embed selengkapnya yaitu 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 memakai perintah < embed> sanggup juga menampilkan animasi dalam bentuk *.gif. Hal ini sanggup dilihat pada serpihan instruksi 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/AVvXsEjz_AQm6oDx9LyzxZIAIpzaEu3ZHhQh_gnm8GE8INB3M5IwDcPKWSBylV02w241GAnxIdr5srWgZ2ve03AOInhUvp-awxyLUk8SLIzgbRzwvkz_gv6XvRML7B7WpUay_Mw4o1zA0aXwcrDA/s1600/rol_belakang.gif">
</body>
</html>
Untuk attribut penggunaan embed sanggup ditambahkan pada tag tersebut attribut menyerupai 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 ketika program dijalankan di browser. |
No comments:
Post a Comment