- Cari disini...
- Browse
Katalog Kelas
Ikuti materi yang kamu butuhkan
Roadmap
Belajar online dengan terarah
Bootcamp
Codepolitan x Catamyst
- Explore
Tutorial & Artikel
Temukan Artikel menarik
Podcast
Podcast seputar pemrograman
Webinar
Ikuti Berbagai Webinar
Event
Temukan Event menarik
Beasiswa
Program Beasiswa
Discord
Komunitas Discord
Forum
Diskusi antar Programmer
Leaderboard
Ranking siswa Codepolitan
- Partnership
For Company
Solusi tepat untuk perusahaan
For School
Kerjasama untuk sekolah
For Campus
Kerjasama untuk kampus
For Mentor
Peluang penghasilan untuk mentor
- Career
LoginRegister
HTML Fadlullah Fadul December 3, 2018
Referensi Belajar HTML video tag. Tutorial dan panduan mengenai element <video>...</video> yang digunakan untuk memutar video. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <video>.
Deskripsi
Penjelasan HTML video
HTML <video> element digunakan untuk merujuk sumber file video, sehingga dapat diputar (dimainkan) pada halaman web.
Dalam merujuk sumber file video, digunakan attribute src yang menunjukkan source (sumber) yang mengarah pada link file video tersebut berada (disimpan), ditulis baik didalam element <video> itu sendiri atau didalam element <source> yang merepresentasikan sumber video lebih dari satu format, sehingga browser dapat memilih format video yang tepat (didukung).
Didalam element <video> dapat ditulis konten (teks), untuk browser lawas yang tidak mendukung HTML5 video. Teks ini, akan tampil sebagai ganti dari video yang tidak dapat diputar.
HTML <video> merupakan tag yang baru diperkenalkan pada HTML5.
Video Formats
Beberapa format video yang didukung oleh HTML <video> element.
MP4 | File MPEG 4, dengan video codec H264, dan audio codec AAC. | .mp4 | video/mp4 |
Ogg Theora | File Ogg, dengan video codec Theora dan audio codec Vorbis. | .ogm / .ogv / .ogg | video/ogg |
WebM | File WebM dengan video codec VP8 dan audio codec Vorbis. | .webm | video/webm |
Adapun untuk dukungan format video setiap browser berbeda-beda.
Chrome | |||
Firefox | |||
Internet Explorer | . | ||
Safari | |||
Opera |
Attributes
Atribut HTML Tag <video>
Menginstruksikan browser untuk mulai memutar video secara otomatis sesegera mungkin tanpa berhenti.
Menginstruksikan browser untuk menampilkan antarmuka (user interface) untuk video control (seperti menampilkan tombol putar (play), kontrol volume dan lain sebagainya).
Menentukan (ukuran) tinggi pemutar video (video player).
Menginstruksikan browser untuk memutar ulang video ketika selesai (mencapai waktu akhir putar).
Menginstruksikan browser untuk membisukan (tanpa suara) video.
Menentukkan URL yang merujuk sebuah gambar yang akan dijadikan poster frame yang akan tampil sebelum video diputar (mengklik tombol "play").
Menginstruksikan browser untuk menentukkan jika dan bagaimana penulis memuat video ketika halaman web dimuat (termasuk mengunduh (download) video dan metadata-nya) demi pengalaman menjelajah yang baik untuk user.
Menentukkan URL yang mengarah pada sumber video file berada (disimpan).
Menentukkan (ukuran) lebar pemutar video (video player).
Global Attributes
Atribut Secara Global (Keseluruhan)
<video> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.
Event Attributes
Atribut event (Peristiwa)
<video> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.
Example
Contoh HTML <video> element
Contoh 1:
HTML video element sederhana.
<video src="/media/video/myVideo.mp4" controls> </video>
Contoh 2:
HTML video element yang merujuk format video lebih dari satu didalam element <source> untuk dukungan browser yang berbeda-beda.
<video width="400" controls preload="metadata"> <source src="/media/video/myVideo.mp4" type="video/mp4"/> <source src="/media/video/myVideo.webm" type="video/webm"/> <source src="/media/video/myVideo.ogv" type="video/ogg"/> </video>
Dibawah ini, contoh berikut editor untuk belajar HTML video dengan track dan .vtt file yang dapat digunakan untuk menulis caption atau judul video, dapat pula digunakan untuk menulis subtitle yang sering kita lihat pada video karaoke.
Untuk lebih jelasnya, silahkan pelajari juga mengenai HTML <track> element.
Contoh Lengkap
Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Demo HTML video - by: apacara.com</title> <style></style> </head> <body> <video width="320" height="240" controls> <source src='/media/video/halwa.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src='/media/video/halwa.ogv' type='video/ogg; codecs="theora, vorbis"'> <source src="/media/video/halwa.webm" type='video/webm; codecs="vp8, vorbis"'> <track label="English" kind="subtitles" srclang="en" src="/media/video/subtitles-en.vtt"> <track label="Indonesian" kind="subtitles" srclang="id" src="/media/video/subtitles-id.vtt" default> Browser Anda tidak mendukung HTML video tag. </video> </body> </html>
Harap diperhatikan: Untuk contoh diatas, apabila subtitle tidak terlihat di dalam video, kemungkinan browser Anda tidak mendukung HTML <track> element. Gunakan browser (Google Chrome) terbaru untuk mencobanya.