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 *.htm dan 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
Bila dijalankan akan
menghasilkan tampilan video di browser mozilla firefox, video tidak akan muncul
hal ini dikarenakan browser mozilla firefox tidak mendukung format file *.mp4.
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
|
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
berulangulang
|
|
|
<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.
Berikut adalah potongan kode yang
menggunakan atribut poster
|
<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>
|
Ketika
kode program di atas dijalankan maka akan menghasilka tampilan web seperti
berikut ini
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>
|
4.) 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>
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.
|
Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :
1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon