Implementasi Media Video dan Audio pada HTML5

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 dan height 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.

<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>

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!

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 ditampilkan
• controls: menampilkan tombol kontrol video (play, pause, volume, dll)
• autoplay: otomatis memutar video saat halaman dimuat
• loop: mengulang video secara otomatis saat selesai diputar
• width dan height: menentukan ukuran lebar dan tinggi dari video
• <source>: menunjukkan sumber alternatif untuk video dengan format yang berbeda-beda, sehingga browser dapat memilih format yang didukung
• type: menentukan tipe format video yang disediakan dalam elemen <source>
• <track>: menambahkan subtitle pada video dengan menunjukkan sumber subtitle dalam format .vtt. Atribut kind menunjukkan jenis subtitle, sedangkan label 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!