Advertisement
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
|
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
Gambar
13.1 video pada tampilan web menggunakan browser chrome
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 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
|
Penggunaan Antribut 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>
|
Ketika kode program di atas dijalankan
maka akan menghasilka tampilan web seperti berikut ini
Penggunaan 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>
|
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>
|
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.
|
Silahkan berkomentar dengan sopan sesuai topik yang dibahas. Mohon tidak meninggalkan URL. Silahkan berkomentar dengan sopan serta sesuai topik dan dimohon untuk tidak meninggalkan link aktif.
Terima Kasih.
EmoticonEmoticon