Konten sebuah website tidak hanya terbatas pada teks dan gambar saja, namun juga telah berkembang untuk mendukung media audio dan video. Jika kamu ingin menampilkan konten multimedia yang menarik, HTML menyediakan tag <video> untuk menambahkan video dan tag <audio> untuk menambahkan audio musik pada tampilan HTML.
Di era digital saat ini, penggunaan media audio dan video dapat meningkatkan pengalaman pengunjungmu dalam menikmati konten di website. Oleh karena itu, dalam artikel ini kami akan membahas cara Implementasi Media Video dan Audio pada HTML5, sehingga kamu dapat membuat halaman web yang lebih menarik dan interaktif.
Menampilkan Konten Multimedia dengan HTML5
Konten multimedia seperti video dan audio kini telah menjadi bagian penting dari desain website modern. Dalam HTML5, terdapat tag <video> dan <audio> yang dapat digunakan untuk menampilkan konten multimedia tersebut.
Namun, untuk memastikan konten multimedia bisa ditampilkan dengan baik di berbagai perangkat, kita perlu menyediakan beberapa file dengan format yang berbeda dan menambahkan atribut src di dalam tag tersebut. Atribut ini memungkinkan browser untuk memilih file yang paling sesuai dengan perangkat yang digunakan oleh pengguna.
Meskipun sudah terdapat tag khusus untuk menampilkan video dan audio, tag <object> masih dibutuhkan untuk menampilkan beberapa media lain seperti dokumen dokx, grafik vektor, atau file pdf.
Dengan mengimplementasikan konten multimedia pada website, pengalaman pengguna akan menjadi lebih interaktif dan menarik. Oleh karena itu, sebaiknya jangan ragu untuk memanfaatkan tag <video> dan <audio> pada desain website kamu!
Tag Video HTML5
HTML menyediakan elemen <video> yang memungkinkan kita menampilkan dan memutar video langsung di halaman website kita. Namun, untuk menentukan sumber file video, kita perlu menggunakan atribut src yang menunjukkan link atau alamat file video tersebut. Tidak hanya itu, kita juga dapat menggunakan elemen <source> untuk menentukan sumber video lebih dari satu format, sehingga pengguna dengan browser yang berbeda dapat memilih format video yang didukung.
Namun, jika browser pengguna tidak mendukung tag video, teks “browser tidak mendukung tag video” akan tampil. Tetapi jika browser mendukung, maka video kita akan tampil dengan sempurna.
Contoh:
<video width="640" height="360" controls>
<source src="sample-video.mp4" type="video/mp4">
<source src="sample-video.webm" type="video/webm">
Browser Anda tidak mendukung tag video.
</video>
Penjelasan:
width
danheight
adalah ukuran video dalam piksel.controls
menampilkan kontrol video seperti play, pause, dan volume.<source>
digunakan untuk menentukan sumber video beserta tipe formatnya. Dalam contoh ini, terdapat dua sumber video yaitu file mp4 dan webm.- Jika browser tidak mendukung tag video, maka teks “Browser Anda tidak mendukung tag video.” akan muncul.
Sample video dapat diunduh di https://sample-videos.com/ atau dapat menggunakan video yang sudah ada di perangkat sendiri.
Jika kita mengambil videonya dari online web. kita dapat mengisi nilai atribut src dengan url video. Contohnya:
<video width="640" height="360" controls>
<source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
Browser Anda tidak mendukung tag video.
</video>
Format Tag Video HTML5
Elemen <video> HTML mendukung berbagai macam format video yang dapat diputar langsung pada halaman website. Beberapa format video yang umum didukung antara lain MP4, WebM, dan Ogg. Namun, format MP4 merupakan yang paling banyak digunakan karena kompatibilitasnya yang tinggi dengan berbagai perangkat dan browser. Sedangkan format WebM dan Ogg lebih cocok digunakan untuk penggunaan open source. Dengan memahami format video yang didukung oleh elemen <video>, Anda dapat menyesuaikan format video yang tepat untuk ditampilkan pada halaman website.
Menambahkan Subtitle pada Video HTML dengan Tag <track>
Jika ingin memberikan pengalaman menonton yang lebih baik pada video di halaman website, kita dapat menambahkan subtitle pada video tersebut. Cara yang paling mudah adalah dengan menggunakan tag <track> pada elemen <video> HTML.
Tag <track> memiliki atribut src yang berguna untuk menambahkan file subtitle. Format file subtitle untuk video HTML adalah WebVTT (.vtt) atau Web Video Text Track. File ini dapat dibuat dengan menggunakan teks editor seperti Notepad atau Sublime Text.
Berikut adalah contoh isi file .vtt:
WEBVTT
1
00:00:05.000 --> 00:00:10.000
Welcome to our website!
2
00:00:10.000 --> 00:00:15.000
In this video, we will show you how to add subtitles to your HTML videos.
3
00:00:15.000 --> 00:00:20.000
Make sure to use the <track> tag and specify the source file for your subtitles.
4
00:00:20.000 --> 00:00:25.000
You can also add different subtitle languages and styles for your viewers to choose from.
5
00:00:25.000 --> 00:00:30.000
Thank you for watching and happy coding!
Dengan menambahkan tag <track> pada elemen <video>, maka subtitle yang ada pada file .vtt tersebut akan ditampilkan secara otomatis ketika video diputar.
Atribut Tag Video HTML5
Nama Atribut | Nilai | Fungsi |
autoplay | true / false | Memutar video otomatis |
controls | tre / false | Mengaktifkan control video |
muted | true / false | Menonaktifkan suara video |
loop | true / false | Memutar video berulang |
width / height | angka | Menentukan tinggi dan lebar video |
playsinline | true / false | Menampilkan video secara inline |
poster | path | Menentukan image cover video |
Implementasi Tag Video HTML5
Setelah mempelajari materi di atas, selanjutnya kita dapat menerapkannya untuk membuat website dasar seperti soundcloud. Berikut merupakan implementasi tag video HTML5:
<video src="video.mp4" controls autoplay loop width="640" height="360">
<source src="video.webm" type="video/webm">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
<track src="subtitles.vtt" kind="subtitles" label="English" default>
</video>
Penjelasan dari atribut-atribut yang digunakan:
src
: menunjukkan sumber video yang akan ditampilkancontrols
: menampilkan tombol kontrol video (play, pause, volume, dll)autoplay
: otomatis memutar video saat halaman dimuatloop
: mengulang video secara otomatis saat selesai diputarwidth
danheight
: menentukan ukuran lebar dan tinggi dari video<source>
: menunjukkan sumber alternatif untuk video dengan format yang berbeda-beda, sehingga browser dapat memilih format yang didukungtype
: menentukan tipe format video yang disediakan dalam elemen <source><track>
: menambahkan subtitle pada video dengan menunjukkan sumber subtitle dalam format .vtt. Atributkind
menunjukkan jenis subtitle, sedangkanlabel
menampilkan label subtitle pada tombol pilihan subtitle.
Dengan memanfaatkan atribut-atribut tersebut, kita dapat mengatur tampilan dan fitur yang ada pada video dengan mudah.
Kita telah selesai menjelajahi kehebatan tag <video> pada HTML5! Selama perjalanan kita telah mempelajari berbagai hal penting seperti format file, path, atribut, dan masih banyak lagi. Namun, mungkin kamu bertanya-tanya, “Bagaimana dengan tag audio pada HTML5?” Jangan khawatir, karena di artikel berikutnya, yaitu Implementasi Media Video dan Audio pada HTML5 Part 2, kita akan membahas tentang tag audio dan memperdalam pengetahuan kita tentang media pada HTML5. Jangan sampai ketinggalan ya!