Tag apa yang digunakan untuk menampilkan video?

Hai Selamat datang lagi di tutorial warung belajar, jika dalam tutorial sebelumnya kita telah membahas mengenai bagaimana cara menambahkan audio dengan menggunakan HTML 5, dalam tutorial kali ini kita akan membahas mengenai bagaimana cara menambahkan video dengan menggunakan HTML 5.

Table of Contents Show

Video Tutorial Belajar HTML – Menampilkan Video menggunakan HTML 5
Dukungan Browser
Format File Video yang didukung
Attribute Type
Skrip sederhana
Attribute Lain pada Tag <video>
Tag apa yang digunakan untuk menyisipkan video?
Bagaimana cara menampilkan video pada halaman web?
Apa fungsi dari tag p >?
Apa tag untuk menampilkan gambar?

Video Tutorial Belajar HTML – Menampilkan Video menggunakan HTML 5

Dengan adanya HTML 5 anda dapat menambahkan video dengan mudah, tetapi sama seperti pembahasan audio sebelumnya, terdapat pembatasan dari browser yang support, serta format file video yang didukung, baik kita akan bahas satu – persatu :

Dukungan Browser

Browser	Chrome	Internet Explorer	Mozilla Firefox	Safari	Opera
Support Version	4.0	9.0	3.5	4.0	10.5

itu adalah browser beserta versinya yang mensupport tag video di HTML 5, terlihat hampir seluruh browser telah mensupport dari tag video di HTML 5

(sumber: http://w3schools.com)

Format File Video yang didukung

Setelah membahas browser, selanjutnya kita juga membahas mengenai format file video yang didukung oleh tag <video> di HTML 5 antara lain :

Browser	MP4	WebM	Ogg
Internet Explorer	Yes	No	No
Chrome	Yes	Yes	Yes
Firefox	Yes	Yes	Yes
Safari	Yes	No	No
Opera	Yes (From Opera 25)	Yes	Yes

(sumber: http://w3schools.com)

terlihat hanya ada 3 format file video yang disupport oleh tag <video> di HTML 5 yaitu :

MP4
WebM
Ogg

dimana di masing masing browser memiliki kemampuan yang berbeda dalam mensupport format video yang dapat ditampilkan, tetapi format file mp4 sepertinya dapat disupport hampir di semua browser meskipun di opera harus menggunakan versi minimal 25, jadi saya sarankan teman – teman bisa menggunakan format file mp4 untuk video yang akan ditampilkan di halaman web anda.

Attribute Type

Setelah kita mengetahui bahwa format file yang didukung adalah mp4,webm, dan ogg, anda perlu memberikan deklarasi dari format file video yang akan di tampilkan pada attribute type di tag source, untuk valuenya bisa dilihat di tabel dibawah ini :

File Format	Media Type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

Bagaimana mudah kan… baik kita akan coba untuk membuat code sederhana yang akan menampilkan file video dengan HTML 5

Skrip sederhana

coba anda tuliskan skrip seperti di bawah ini :

<!DOCTYPE html>

<html>

<head>

<title>Menambahkan Video dengan HTML5</title>

</head>

<body>

Browser Anda Tidak Mensupport HTML 5Video

</video>

</body>

</html>

semisal anda simpan dengan nama menambahkan_video_html5.html

jangan lupa untuk meletakkan video dengan nama video.mp4, video.webm, dan video.oog

sebenarnya anda bisa menuliskan hanya satu file saja semisal video.mp4, lalu kenapa harus menuliskan 3 file video ?? nanti kita akan bahas di keterangan skrip.

nah setelah disimpan silahkan di buka di browser, maka hasilnya adalah seperti berikut ini :

terlihat pada browser akan nampak video dan ada juga controllernya seperti play,volume, dan fullscreen button.

Keterangan Skrip

baik kita akan pelajari skripnya satu – persatu :

Tag yang digunakan ada 2 yaitu tag <video> dan tag <source>
Tag <video> digunakan untuk mendeklarasikan bahwa kita akan menampilkan video dengan menggunakan html5
Pada tag <video> ada 3 attribute yang saya tuliskan, width (digunakan untuk mengatur lebar dari video), height (digunakan untuk mengatur tinggi dari video) dalam contoh ini saya buat auto agar menyesuaikan dengan ukuran lebar, dan controls (digunakan untuk menampilkan controller pada video).
Tag <source> digunakan untuk menuliskan alamat dari video yang akan ditampilkan
Dalam masing masing tag <source> ada 2 attribute yaitu src(digunakan untuk menuliskan alamat video yang akan ditampilkan) dan type(digunakan untuk menuliskan tipe format file video)
Dalam skrip ini saya tuliskan 3 buah tag source dimana pada masing – masing tag source saya menampilkan video yang sama tetapi menggunakan format video yang berbeda yaitu mp4,webm, dan ogg, Cara ini digunakan untuk mengatasi ketika browser tidak mensupport format file video yang akan ditampilkan sehingga kita tuliskan 3 format seperti contoh diatas sehingga browser akan menampilkan video yang memiliki format file yang didukung browser tersebut, apakah mp4,webm, dan oog.
Tulisan “Browser Anda Tidak Mensupport HTML 5 Video” kita letakkan dibawah sendiri sebelum tag </video>, text ini akan ditampilkan ketika browser tidak mendukung tag <video> di HTML 5

Attribute Lain pada Tag <video>

Selain attribute width, height, dan controls yang telah kita tuliskan pada contoh skrip, tag <video> masih memiliki attribute lainnya, attribute itu antara lain :

Attribute	Value	Fungsi
Autoplay	bisa dikosongkan	digunakan agar videonya otomatis diplay ketika web telah selesai di load
loop	bisa dikosongkan	digunakan agar videonya melakukan looping (repeat) ketika videonya selesai diputar
muted	bisa dikosongkan	digunakan jika menginginkan videonya tidak bersuara
preload	auto,metadata,none	digunakan untuk melakukan persiapan (buffer) otomatis ketika halaman web telah diload, sehingga ketika anda memplay video, video telah di buffer sebelumnya
src	url video	digunakan untuk mengatur url video jika anda tidak menggunakan tag <source>

nah banyak juga kan, attributenya anda bisa menggunakan attribute sesuai dengan kebutuhan anda, baik sekian dulu cara menambahkan video di html 5, sampai jumpa di tutorial – tutorial lainnya…

[stextbox id=”info”] Anda serius ingin menguasai HTML ?

Warung Belajar telah membuat DVD Tutorial “Tutorial HTML – White Box“. DVD Tutorial ini membahas HTML dengan lebih lengkap dan detail. Penjelasan lebih lanjut bisa ke: Tutorial HTML – White Box[/stextbox]

Tag apa yang digunakan untuk menyisipkan video?

Tag <video>: Menambahkan Video Pada HTML Element tag ini akan menghasilkan tampilan berupa video player yang dilengkapi dengan berbagai control video seperti tombol play, pause, stop, duration, tracking bar, volume dan lainnya. Setiap browser memiliki tampilan pemutar video yang berbeda.