Thursday, November 17, 2016

Kode html Menampilkan Video dan Animasi

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
§  http://video.online-convert.com à layanan konversi secara online  

 
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>

  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.

[[Berikutnya>> Kode html menambah Gambar dengan Map>>

Artikel Terkait

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