Bagaimana cara menyisipkan video pada HTML? Ini caranya!
Menyisipkan
video menggunakan sintak HTML memang wajib mengetahui caranya bagi programer
web. Ditambah lagi dengan seiring kemajuan teknologi di zaman ini yang lebih
mengutamakan dunia film sebagai bahan pelajaran dibandingkan dengan gambar,
suara atau bahkan teks.
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.
A.
Google
Chrome : Mp4? Yes, OGG? Yes, WebM? Yes
B.
Internet
Explorer : Mp4? Yes, OGG? No, WebM? No
C.
Safari
: Mp4? Yes, OGG? No, WebM? No
D.
Opera
: Mp4?
No, OGG? Yes, WebM? Yes
E.
Firefox
: Mp4? No, OGG? Yes, WebM? Yes
Dari daftar 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.
File video seperti mp4 dapat dimainkan
pada halaman web diantara tag<video> < /video>. Ketika mencoba
menjalankan video pada halaman web , file video ditempatkan dalam satu folder
yang sama dengan file *.html dan nama file audio nya disesuaikan dengan
file audio yang Anda gunakan. Berikut salah
satu sintak untuk menyisipkan video menggunakan HTML.
Sebagai
contoh kita akan menyisipkan video yang berjudul “pergaulan bebas” dengan
format file Mp4.
<html>
<head>
<title>Menyisipkan
Video</title>
</head>
<body>
<video width="640"
height="480" controls>
<source src="pergaulan
bebas.mp4" type="video/mp4">
</body>
</html>
Setalah
itu disimpan dan disatukan satu folder dengan video yang berjudul “Pergaulan
bebas”. Lalu dibuka menggunakan browser yang Anda gunakan. Dan hasilnya akan seperti ini :
Berikut
salah satu bentuk umum yang digunakan untuk membuat file berfotmat HTML :
<video
width=”Lebar video” height=”Tinggi video” atribut yang digunakan=”atribut yang
digunakan>
<source
src=”Derektori/nama file video” type=”type file video>
Contoh :
<video width=”320” Height=”640”
controls=”controls” autoplay=”autoplay”>
<source src=”Pergaulan bebas.Mp4”
type=”video/mp4”>
Untuk menggunakan atribut-atribu yang digunakan
pada video, berikut beberapa atribut yang sering digunakan pada video :
- Atribut Autplay. (<video autoplay=”autoplay”>) yang berfungsi untuk memulai video secara otomatis.
- Atribut Controls. (<video controls=”controls”>) yang berfungsi untuk menampilakn tombol kontrol pada video.
- Atribut Height. (<video height=”240”>) yang berfungsi untuk mengatur tinggi frame video.
- Atribut width. (<video width=”480”>) yang berfungsi untuk mengatur lebar frame video.
- Atribut Loop. (<video loop =” loop”>) yang berfungsi untuk memutar video secara ulang
- Atribut Muted. (<video muted =”muted”>) yang berfungsi untuk mematikan suara pada video.
- Atribut Poster. (<video poster=”poster”>) yang berfungsi untuk memunculkan poster pada saat video diunduh.
- Atribut preload. (<video preload=”preload”>) yang berfungsi untuk memuat ulang video.
- Atribut src. (<video src=”pergaulan bebas.mp4” type=”video.mp4”>) yang berfungsi untuk memberikan link video.
Sekian saja yang dapat saya
sampaikan tentang cara menyisipkan video pada HTML, kurang lebihnya mohon maaf
jika ada kesalahan. Untuk hal-hal yang kurang dimengerti bisa tanyakan langsung
pada kolom komentar. Terimakasih, semoga bermanfaat ^_^
0 komentar:
Post a Comment