Implementasi Media Video dan Audio pada HTML5

Perlu kita ketahui, konten dari sebuah website tidak hanya berupa teks dan gambar saja. Saat ini konten website telah mendukung adanya media audio dan video. Untuk menampilkan konten tersebut, HTML memiliki tag <video> untuk menambahkan video dan juga tag <audio> untuk menambahkan audio musik ke dalam tampilan HTML. Pada artikel kali ini kita akan mendalami Implementasi Media Video dan Audio pada HTML5 sebagai berikut.

Video dan Audio Pada HTML5

Kedua tag tersebut sama-sama memerlukan atribut src di dalamnya. Fungsi atribut source adalah untuk menyediakan beberapa file sebagai bagian dari kompatibilitas untuk perangkat yang berbeda-beda. Sebelum terdapat tag <audio> dan <video>, file-file selain gambar ditampilkan dengan tag <object>. Walaupun sudah terdapat tag khusus untuk menampilkan video dan audio, akan tetapi tag <object> masih dibutuhkan hingga saat ini untuk menampilkan beberapa media lain seperti docx, vector, pdf, dan lain sebagainya.

Tag Video HTML5

Elemen video pada HTML digunakan untuk mengarahkan sumber file video, sehingga dapat ditampilkan dan diputar pada halaman website.

Dalam menentukan sumber file video, perlu menggunakan atribut src yang menunjukkan source (sumber) yang mengarah pada link lokasi file video tersebut berada. Dapat ditulis dalam elemen <video> itu sendiri maupun dalam elemen <source> yang merepresentasikan sumber video lebih dari satu format, sehingga browser pengguna dapat memilih format video yang didukung. Jika browser tidak mendukung tag videonya, maka muncul teks browser tidak mendukung tag video akan tampil. Tapi jika browser mendukung, maka videonya yang akan tampil.

Contoh:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Contoh Video di HTML</title>
   </head>
   <body>
      <h1>Contoh Video di HTML</h1>
      <video controls>
         <source src="yntkts.mp4" type="video/mp4" />
         2022, Your Browser not supported a video?
      </video>
   </body>
</html>

Path File Tag Video HTML5

Pada contoh di atas, nama video yang tampil tertulis secara langsung. Ini karena videonya berada dalam satu folder dengan file HTML. Jika file video tersebut tersimpan di lokasi folder yang berbeda, maka kita perlu menulis alamat folder atau path-nya. Misalnya, saya meletakkan videonya di dalam folder video_web. Maka, alamat pathnya adalah:

<video>
<source src="video_web/nama_video.mp4">
</video>

Jika kita mengambil videonya dari online web. kita dapat mengisi nilai atribut src dengan url video. Contohnya:

<video>
<source src="www.video.com/nama-video.mp4">
</video>

Namun jika url video berasal dari youtube, kita dapat menggunakan tag <iframe> untuk memanggilnya. Iframe adalah singkatan dari Inline Frame. Tag ini berfungsi untuk menyertakan atau memasukkan semua jenis media yang dapat dipasangkan di website.

Contoh:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Video Youtube HTML5</title>
   </head>
   <body>
      <h1>Video Youtube</h1>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/4K5sK4Pl53s"></iframe>
   </body>
</html>

Format Tag Video HTML5

Terdapat beberapa format video yang didukung oleh elemen <video> HTML sebagai berikut:

Format	Keterangan	Ekstensi	Tipe MIME
MP4	File MPEG4, dengan video codec H264 + audio codec AAC.	.mp4	video/mp4
Ogg	File Ogg, dengan video codec Theora + audio codec Vorbis.	.ogm atau .ogv atau .ogg	video/ogg
WebM	File WebM dengan video codec VP8 + audio codec Vorbis.	.webm	video/webm

Subtitle Tag Video HTML5

Selain itu, kita juga dapat memberi subtitle pada video kita dengan menggunakan tag <track>. Tag ini mempunyai atribut src berguna untuk menambahkan file subtitle. Format file subtitle untuk video HTML adalah WebVTT (.vtt) atau Web Video Text Track. File ini bisa dibuat dengan teks editor. Contoh isi dari file .vtt seperti:

WEBVTT

0
00:00:00.000 --> 00:00:03.000
Yo ndak tau kok tanya saya.

Setelah membuat file .vtt, selanjutnya kita hanya perlu menggunakan tag <track> seperti contoh di bawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Subtitle Video HTML5</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
  <h1>Video Subtitle</h1>
  <video controls>
    <source src="yntkts.mp4" type="video/mp4"/>
    <track src="yntkts.vtt" kind="subtitles" srclang="id" label="Indonesia"/>
  </video>  
</body>
</html>

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

Terdapat cara penulisan atribut video HTML5, sebagai berikut:

Jika atribut bernilai true, dapat dituliskan nama atributnya saja.

<video controls="true">
<source src="video.mp4" />
</video>

Jika disingkat menjadi:

<video controls>
<source src="video.mp4" />
</video>

Bila atribut bernilai false, maka atribut tersebut boleh tidak ditulis:

<video loop="false">
<source src="video.mp4" />
</video>

Boleh ditulis:

<video>
<source src="video.mp4" />
</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:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Implementasi Tag Video HTML5</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
  <h1>Youtube KW</h1>
  <video controls>
    <source src="yntkts.mp4" type="video/mp4"/>
  </video>  
  <h2>Video pertama</h1>
  <p>Ini merupakan contoh video pertama</p>
  <br>
<video controls>
    <source src="yntkts.mp4" type="video/mp4"/>
  </video>  
  <h2>Video kedua</h1>
  <p>Ini merupakan contoh video kedua</p>
</body>
</html>

*Sebelumnya, tempatkan video dan file html pada satu folder.

Tidak terasa, kita telah selesai mendalami Tag Video pada HTML5. Beberapa unsur penting pada tag <video> telah kita pelajari, seperti path file, format, atribut, dan lain sebagainya. Mungkin kalian bertanya-tanya, “mana penjelasan mengenai tag audio html5?” Untuk penjelasan mengenai materi tersebut selanjutnya akan kita pelajari pada artikel Implementasi Media Video dan Audio pada HTML5 Part 2.