HTML5 - Audio & Video
Fitur HTML5 mencakup dukungan audio dan video asli tanpa memerlukan Flash.
Tag <audio> dan <video> HTML5 memudahkan untuk menambahkan media ke situs web. Anda perlu mengatursrc atribut untuk mengidentifikasi sumber media dan menyertakan atribut kontrol sehingga pengguna dapat memutar dan menjeda media.
Menyematkan Video
Berikut adalah bentuk paling sederhana dari menyematkan file video di halaman web Anda -
<video src = "foo.mp4" width = "300" height = "200" controls>
Your browser does not support the <video> element.
</video>
Spesifikasi draf HTML5 saat ini tidak menentukan format video mana yang harus didukung browser di tag video. Tetapi format video yang paling umum digunakan adalah -
Ogg - File Ogg dengan codec video Thedora dan codec audio Vorbis.
mpeg4 - File MPEG4 dengan codec video H.264 dan codec audio AAC.
Anda dapat menggunakan tag <source> untuk menentukan media bersama dengan jenis media dan banyak atribut lainnya. Elemen video memungkinkan beberapa elemen sumber dan browser akan menggunakan format pertama yang dikenali -
<!DOCTYPE HTML>
<html>
<body>
<video width = "300" height = "200" controls autoplay>
<source src = "/html5/foo.ogg" type ="video/ogg" />
<source src = "/html5/foo.mp4" type = "video/mp4" />
Your browser does not support the <video> element.
</video>
</body>
</html>
Ini akan menghasilkan hasil sebagai berikut -
Spesifikasi Atribut Video
Tag video HTML5 dapat memiliki sejumlah atribut untuk mengontrol tampilan dan nuansa serta berbagai fungsi kontrol -
Sr.No. | Atribut & Deskripsi |
---|---|
1 | autoplay Atribut Boolean ini jika ditentukan, video akan mulai diputar ulang secara otomatis segera setelah dapat melakukannya tanpa berhenti untuk menyelesaikan pemuatan data. |
2 | autobuffer Atribut Boolean ini jika ditentukan, video akan secara otomatis memulai buffering meskipun tidak disetel untuk diputar secara otomatis. |
3 | controls Jika atribut ini ada, itu akan memungkinkan pengguna untuk mengontrol pemutaran video, termasuk volume, pencarian, dan jeda / melanjutkan pemutaran. |
4 | height Atribut ini menentukan tinggi area tampilan video, dalam piksel CSS. |
5 | loop Atribut Boolean ini jika ditentukan, akan memungkinkan video secara otomatis mencari kembali ke awal setelah mencapai akhir. |
6 | preload Atribut ini menetapkan bahwa video akan dimuat saat halaman dimuat, dan siap dijalankan. Diabaikan jika ada putar otomatis. |
7 | poster Ini adalah URL gambar untuk ditampilkan sampai pengguna memutar atau mencari. |
8 | src URL video yang akan disematkan. Ini opsional; Anda dapat menggunakan elemen <source> dalam blok video untuk menentukan video yang akan disematkan. |
9 | width Atribut ini menentukan lebar area tampilan video, dalam piksel CSS. |
Menyematkan Audio
HTML5 mendukung tag <audio> yang digunakan untuk menyematkan konten suara dalam dokumen HTML atau XHTML sebagai berikut.
<audio src = "foo.wav" controls autoplay>
Your browser does not support the <audio> element.
</audio>
Spesifikasi draf HTML5 saat ini tidak menentukan format audio yang harus didukung browser dalam tag audio. Tetapi format audio yang paling umum digunakan adalahogg, mp3 dan wav.
Anda dapat menggunakan <source & ggt; tag untuk menentukan media bersama dengan jenis media dan banyak atribut lainnya. Elemen audio memungkinkan beberapa elemen sumber dan browser akan menggunakan format pertama yang dikenali -
<!DOCTYPE HTML>
<html>
<body>
<audio controls autoplay>
<source src = "/html5/audio.ogg" type = "audio/ogg" />
<source src = "/html5/audio.wav" type = "audio/wav" />
Your browser does not support the <audio> element.
</audio>
</body>
</html>
Ini akan menghasilkan hasil sebagai berikut -
Spesifikasi Atribut Audio
Tag audio HTML5 dapat memiliki sejumlah atribut untuk mengontrol tampilan dan nuansa serta berbagai fungsi kontrol -
Sr.No. | Atribut & Deskripsi |
---|---|
1 | autoplay Atribut Boolean ini jika ditentukan, audio akan secara otomatis mulai diputar kembali segera setelah dapat melakukannya tanpa berhenti untuk menyelesaikan pemuatan data. |
2 | autobuffer Atribut Boolean ini jika ditentukan, audio akan secara otomatis memulai buffering meskipun tidak disetel untuk diputar secara otomatis. |
3 | controls Jika atribut ini ada, maka akan memungkinkan pengguna untuk mengontrol pemutaran audio, termasuk volume, pencarian, dan jeda / lanjutkan pemutaran. |
4 | loop Atribut Boolean ini jika ditentukan, akan memungkinkan audio secara otomatis mencari kembali ke awal setelah mencapai di akhir. |
5 | preload Atribut ini menetapkan bahwa audio akan dimuat saat halaman dimuat, dan siap dijalankan. Diabaikan jika ada putar otomatis. |
6 | src URL audio yang akan disematkan. Ini opsional; Anda dapat menggunakan elemen <source> dalam blok video untuk menentukan video yang akan disematkan. |
Menangani Acara Media
Tag audio dan video HTML5 dapat memiliki sejumlah atribut untuk mengontrol berbagai fungsi kontrol menggunakan JavaScript -
S.No. | Deskripsi acara |
---|---|
1 | abort Acara ini dibuat saat pemutaran dibatalkan. |
2 | canplay Peristiwa ini dihasilkan bila tersedia cukup data sehingga media dapat diputar. |
3 | ended Acara ini dibuat saat pemutaran selesai. |
4 | error Acara ini dibuat saat terjadi kesalahan. |
5 | loadeddata Peristiwa ini dibuat saat bingkai pertama media selesai dimuat. |
6 | loadstart Acara ini dibuat saat pemuatan media dimulai. |
7 | pause Acara ini dibuat saat pemutaran dihentikan sementara. |
8 | play Acara ini dibuat saat pemutaran dimulai atau dilanjutkan. |
9 | progress Acara ini dibuat secara berkala untuk menginformasikan kemajuan pengunduhan media. |
10 | ratechange Peristiwa ini dihasilkan saat kecepatan pemutaran berubah. |
11 | seeked Peristiwa ini dibuat saat operasi pencarian selesai. |
12 | seeking Peristiwa ini dibuat saat operasi pencarian dimulai. |
13 | suspend Peristiwa ini dibuat saat pemuatan media ditangguhkan. |
14 | volumechange Acara ini dibuat saat volume audio berubah. |
15 | waiting Peristiwa ini dihasilkan saat operasi yang diminta (seperti pemutaran) ditunda menunggu selesainya operasi lain (seperti seek). |
Berikut adalah contoh yang memungkinkan untuk memutar video yang diberikan -
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
function PlayVideo() {
var v = document.getElementsByTagName("video")[0];
v.play();
}
</script>
</head>
<body>
<form>
<video width = "300" height = "200" src = "/html5/foo.mp4">
Your browser does not support the video element.
</video>
<br />
<input type = "button" onclick = "PlayVideo();" value = "Play"/>
</form>
</body>
</html>
Ini akan menghasilkan hasil sebagai berikut -
Mengkonfigurasi Server untuk Jenis Media
Sebagian besar server tidak secara default menyajikan media Ogg atau mp4 dengan jenis MIME yang benar, jadi Anda mungkin perlu menambahkan konfigurasi yang sesuai untuk ini.
AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4