Format Tampilan Video dan Animasi
1) Format tampilan file Video
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.
|
Browser
|
MP4
|
WebM
|
Ogg
|
|
Internet
Explorer
|
Yes
|
no
|
no
|
|
Chrome
|
Yes
|
yes
|
yes
|
|
Firefox
|
no
update: firefox 21 running on windows 7, windows 8, windows vista, and android now supports mp4 |
yes
|
yes
|
|
Safari
|
Yes
|
no
|
no
|
|
Opera
|
No
|
yes
|
yes
|
Dari tabel di atas dapat
dilihat bahwa bila saat meletakan file mp4 di web yang kita buat, akan ada
beberapa orang yang tidak bisa memutar
hasil embed mp4 di web yan telah kita buat tersebut. Hal tersebut bisa jadi
disebabkan browser yang digunakan tidak
support pada file berekstensi mp4.
Bila anda hendak
menampilkan video pada halaman web sedangkan
file video yang anda miliki
berformat seperti *.avi, maka video dengan format *.avi tersebut harus
dikonversi terlebih ke format yang didukung oleh HTML5 dengan menggunakan
program gratis atau melalui layanan situs web.
Contoh program yang dapat mengkonversi
format video adalah :
§ Miro
Video Converter dapat diunduh secara gratis atau melalui layanan
www.microvideoconverter.com .
§ FormatFactory à di unduh gratis di http://format-factory.en.softonic.com
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 yg 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
|
2) 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 *.htmdan nama
file audio nya disesuaikan dengan file audio yang anda gunakan.Berikut
adalah format lengkap untuk memainkan video ke dalam aplikasi web
|
<html>
<head>
<title>cek
video</title>
</head>
<body>
<video
width="320" height="240" controls>
<source
src="bola.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
|
Atribut
|
Sintaks
|
Deskripsi
|
|
<video autoplay="autoplay">
|
Memulai secara otomatis video
|
|
|
<video controls =
"controls" >
Atau juga bisa ditulis
<video controls>
|
menampilkan tombol kontrol video
|
|
|
height
|
<video
height="240">
|
mengatur tinggi frame video
|
|
<video
width="320">
|
mengatur lebar frame video
|
|
|
<video
loop=”loop”>
|
Memutar video secara
berulang-ulang
|
|
|
<video
muted=”muted”>
|
mematikan fungsi suara pada video
|
|
|
<video
poster="anak.gif">
|
memunculkan poster/gambar pada
saat video buffer atau diunduh.
|
|
|
<video
preload="preload">
|
memuat ulang video
|
|
|
<source src="bola.mp4"
type="video/mp4">
|
memberikan link video
|
Poster
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.
|
<html>
<head>
<title>cek
video</title>
</head>
<body>
<video
width="320" height="240" controls poster="anak.gif">
<source
src="bola.mp4" type="video/mp4">
browser anda tidak mendukung format video
ini.
</video>
</body>
</html>
|
SRC
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 .Dapat dilihat pada potongan kode berikut :
|
<html>
<head>
<title>cek
video</title>
</head>
<body>
<video
width="320" height="240" controls>
<source
src="bola.mp4" type="video/mp4">
<source
src="bola.ogg" type="video/ogg">
<source
src="bola.WebM " type="video/WebM">
browser anda tidak
mendukung format video ini.
</video>
</body>
</html>
|
1.) Menyajikan
animasi pada tampilan web
File animasi juga dapat
ditampilkan pada halaman web dengan cara di embed-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>
|
Bila kode program diatas dijalankan maka akan muncul file
animasi “siboy.swf” pada halaman web.
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 rose.gif merupakan gambar
bergerak (animasi)
|
<html>
<head>
<title>animasi</title>
</head>
<body>
<embed src="rose.gif">
</body>
</html>
|
Saat kode program diatas dijalankan maka animasi akan muncul
dihalama web seperti terlihat pada gambar berikut
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.
|
Rangkuman
o
cara standar untukmenanamkanfile
audiopada halamanweb: elemen<video></video>.
o
File-file
video yang didukung HTML5 adalah MP4,WebM dan OGG.
o
Atribut
video dituliskan dalam elemen <video xxxxxx= “ xxxxxx” >
o
Atribut
Audio yang digunakan dalam penulisan html diantaranya autoplay, controls,
height, width, loop, muted,poster, preload, src.
o
Animasi
dapat ditampilkan dalam web dengan menuliskan <embed
src="file.swf">
o
File
animasi berupa *.swf dan *.gif dapat
ditampilkan pada halaman web.
Komentar
Posting Komentar