Cara Menyisipkan Video dan Audio dengan HTML 5
Diposting oleh Unknown | | Posted On Jumat, 30 Desember 2016 at 18.27
Hay,, Selamat Pagi, masih bersama mimin cantikkk. kali ini kita akan belajar gimana sih caranya menyisipkan video dan audio dengan menggunakan HTML 5 ?? Udah gak sabar yahh, Oke kita mulai saja...
Cekidot !!!
Video
Pada versi HTML sebelumnya,
tidak disertai oleh tag <video>. Apabila ingin memasukkan video ke dalam
sebuah web masih harus menggunakan plugins tambahan yang biasa disebut flash player. Kelebihan di dalam tag
<video> adalah dalam browser tidak perlu menggunakan flash player, dan
buffering menjadi lebih ringan karena fasilitasnya sudah di backing oleh kode
HTML sendiri
Atribut Opsional :
Attribute
|
Value
|
Description
|
autoplay
|
autoplay
|
Menentukan bahwa video
akan mulai berputar otomatis
|
controls
|
controls
|
Menentukan kontrol video yang akan ditampilkan
(Contoh:
tombol play/pause)
|
height
|
pixels
|
Mengeset tinggi dari
video player
|
loop
|
loop
|
Menentukan bahwa video akan berputar
kembali meski video telah habis
|
muted
|
muted
|
Menentukan bahwa output
suara akan di mute / dihilangkan
|
poster
|
URL
|
Menentukan gambar yang akan tampil
ketika video masih belum berputar
|
preload
|
auto metadata none
|
Menentukan jika dan bagaimana kapan
video ini harus menjalani proses loading ketika halaman terbuka
|
src
|
URL
|
Menentukan alamat URL
dari mana sumber video
|
width
|
pixels
|
Mengeset lebar dari
video player
|
Audio
Digunakan untk memasukkan audio, misalnya lagu kedalam halaman web. Pada HTML5, hal itu dipermudah dengan tag <audio>, ketika di generasi sebelumnya (HTML 4.01) memasukkan audio ke dalam web masih harus menggunakan flash.
Digunakan untk memasukkan audio, misalnya lagu kedalam halaman web. Pada HTML5, hal itu dipermudah dengan tag <audio>, ketika di generasi sebelumnya (HTML 4.01) memasukkan audio ke dalam web masih harus menggunakan flash.
Atribut Opsional :
Attribute
|
Value
|
Description
|
autoplay
|
autoplay
|
Menentukan bahwa audio akan mulai berputar otomatis
|
controls
|
controls
|
Menentukan
kontrol audio yang akan ditampilkan (Contoh:
tombol play/pause)
|
loop
|
loop
|
Menentukan bahwa audio akan berputar
kembali meski
|
preload
|
auto
|
Menentukan jika dan bagaimana
kapan audio ini harus menjalani metadata
|
src
|
URL
|
Menentukan alamat URL dari mana sumber
audio
|
Berikut syntax dari video dan audio
<html>
<head>
<title>lat video n audio</title>
</head>
<body
background="23.jpg">
<font
size="24" color="black" face="Hobo
Std">------------------------------ VIDEO
------------------------------</font><br>
<br><br>
<video
width="320" height="240" controls="controls">
<source
src="Aku Anak ROHIS.MP4" type="video/mp4">
</video>
<video
width="320" height="240" controls="controls">
<source
src="Rasulullah.mp4" type="video/mp4">
</video>
<video
width="320" height="240" controls="controls">
<source
src="Salahuddin.mp4" type="video/mp4">
</video>
<br><br><br><br><br>
<font
size="24" color="red" face="Hobo
Std">------------------------------ AUDIO
------------------------------</font><br>
<br><br>
<audio
controls>
<source
src="Izis_Hai Mujahid Muda.mp3" type="audio/mp3">
</audio>
<audio
controls>
<source
src="Mother.mp3" type="audio/mp3">
</audio>
<audio
controls>
<source
src="Maher Zain - Palestine Will Be Free.mp3"
type="audio/mp3">
</audio>
</body>
</html>
Kereenn kan ???? Masih ogah-ogahan buat belajar HTML 5 ?? Rugi banget dechh... Yukk bangun , bangkit, kita berkarya untuk Negeri tercintahhh. Ketemu lagi next time.. See You
Posting Komentar