Pada kelas sebelumnya, kita sudah belajar cara menambahkan gambar di HTML. Namun, ini belumlah cukup. karena sekarang konten di web tidak hanya dalam bentuk teks dan gambar saja.

Konten lainnya yang bisa ditambahkan di HTML adalah audio dan juga video.

Nah, pada kelas kali ini. kita akan belajar cara menambahkan video di HTML.

Cara Menambahkan Video di HTML

Kita membutuhkan sebuah media player untuk menampilkan video di HTML. Dahulu sebelum ada HTML 5, media player di HTML dibuat dengan program eksternal seperti adobe flash. Namun, kini sudah tidak dipakai lagi. HTML sekarang punya tag baru untuk membuat media player, yakni tag video.

Format dasar tag Video

Jika tag video di buka pada browser yang tidak mendukungnya, maka teks browser tidak mendukung tag video akan ditampilkan.

Tapi, kalau mendukung. videonya yang akan ditampilkan.

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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="cat-herd.webm" type="video/webm" />
    Browsermu tidak mendukung tag ini, upgrade donk!
  </video>
</body>
</html>

Pada contoh di atas, kita menuliskan secara langsung nama video yang akan ditampilkan. Ini karena videonya berada dalam satu folder dengan file HTML.

File video dan HTML

Jika video tersebut tersimpan di folder yang berbeda, maka perlu ditulis alamat folder atau path-nya. Misalkan, saya meneruh videonya di dalam folder video. Maka, alamat path yang digunakan adalah:

1
2
3
<video>
<source src="video/nama-video.mp4">
</video>

dan jika videonya berada di website yang berbeda, maka kita harus mengisi atribut src dengan URL lengkap dari video.

1
2
3
<video>
<source src="https://www.petanikode.com/img/html-video/cat-herd.webm">
</video>

Format Video yang Didukung

Tidak semua format video dapat ditampilkan di HTML. Berikut ini beberapa format video yang didukung:

Nama Format Media Type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

Jika kamu punya video dengan format yang berbeda dari ketiga format tersebut, maka kamu harus mengubahnya agar bisa ditambahkan ke HTML.

Atribut untuk Video

Tag video punya beberapa atribut yang bisa diberikan:

Nama Atribut Nilai Fungsi
autoplay true/false Agar video diputar otomatis
controls true/false Untuk mengaktifkan control video player
loop true/false Untuk memutar video terus menerus
muted true/false Untuk menonaktifkan audio
poster Image Path Untuk menentukan gambar cover dari video
width & height angka Untuk menentukan tinggi dan lebar video
playsinline true/false Untuk memutar video secara ‘inline’

Jika atribut bernilai true, maka ia boleh ditulis namanya saja.

Contoh:

1
2
3
<video loop="true">
<source src="video.mp4" />
</video>

Bisa disingkat menjadi:
1
2
3
<video loop>
<source src="video.mp4" />
</video>

Jika nilai atribut bernilai false, maka atribut tersebut boleh tidak ditulis atau juga boleh ditulis.

Contoh:

1
2
3
4
5
6
7
8
<video loop="false">
<source src="video.mp4" />
</video>

<!-- boleh juga seperti ini: -->
<video>
<source src="video.mp4" />
</video>

Nah, untuk atribut lainnya, kamu bisa cek di MDN: The Video Embed element.

Video Sebagai Gambar Animasi Gif

Banyak website modern saat ini menggunakan video sebagai ganti dari animasi gif. Bahkan juga Google menyarankan untuk menggunakan video daripada gif.

Mengapa? Karena ukuran file dari video jauh lebih kecil dibandingkan dengan gif dan juga tentunya akan mempengaruhi kecepatan download.

Nggak percaya? Mari kita bandingkan:

gif-vs-video

File cat-herd.gif punya ukuran 3,6 MB setelah saya covert formatnya menjadi MP4 dan Webm, ukurannya menjadi sangat kecil.

Terbukti kan, file video lebih kecil daripada gif.

Lalu, bagaimana cara membuat video menjadi gambar gif di HTML.

Caranya sama seperti menambahkan video biasa, tapi kita harus mengaktifkan beberapa atribut seperti autoplay, muted, playsinline dan loop.

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contoh Video di HTML</title>
</head>
<body>
  <h1>Contoh Video sebagai gif</h1>
  <video autoplay loop muted playsinline>
    <source src="cat-herd.webm" type="video/webm" />
    <source src="cat-herd.mp4" type="video/mp4" />
  </video>  
</body>
</html>

Subtitle untuk Video

Subtitle adalah teks yang akan ditampilkan dalam video. Biasanya digunakan untuk terjemahan atau alih bahasa dari video dan juga untuk membantu tuna rungu (orang tuli) untuk menyerap informasi pada video.

Subtitle pada HTML dapat kita tambahkan dengan tag track. Tag ini memiliki atribut src yang akan digunakan untuk menambahkan file subtitle.

Kode Subtitle di HTML

Format file subtitle untuk video di dalam HTML adalah WebVTT (.vtt) atau Web Video Text Track. File .vtt ini bisa dibuat dengan teks editor.

Jika kamu punya subtitle dengan format SubRip Text (.srt), kamu bisa mengubahnya menjadi .vtt di srt2vtt.

Sekarang mari kita coba contohnya: video-subtitle.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contoh Video di HTML</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
  <h1>Video Subtitle</h1>
  <video controls>
    <source src="cat-herd.webm" type="video/webm"/>
    <source src="cat-herd.mp4" type="video/mp4"/>
    <track src="cat-herd-id.vtt" kind="subtitles" srclang="id" label="Indonesia"/>
  </video>  
</body>
</html>

Dan berikut ini isi file: cat-herd-id.vtt

1
2
3
4
5
6
7
8
9
WEBVTT

0
00:00:00.000 --> 00:00:03.000
Para penunggang kuda.

1
00:00:04.000 --> 00:00:08.000
Kucing berlari.

Catatan penting:

Subtitle tidak akan ditampilkan jika kita membuka file HTML secara langsung dari browser.

Coba perhatikan di bagian address bar, jika di sana ada tulisan nama, direktori dan ekstensi Filenya berarti kita membuka file HTML secara langsung.

Namun, jika di address bar ada HTTP atau HTTPS itu artinya kita membuka file HTML melalui web server. dan juga jika format file .vtt tidak benar, subtile tidak akan ditampilkan.

Pastikan formatnya valid, silakan gunakan Live WebVTT Validator untuk pengecekan.

Menmabahkan/Menyisipkan Video dari Youtube

Saat tidak ingin repot-repot mengubah format video, kita bisa manfaatkan Youtube.

Tinggal upload saja videonya ke Youtube. Nanti kita akan dapat id unik dari video. Id unik ini bisa kita dapatkan dari URL video.

Contoh: N7iY-jNWeFc

Youtube sendiri sudah punya media player, jadi kita tidak perlu membuatnya dengan tag video.

Tag yang kita butuhkan untuk menambahkan video dari Youtube adalah iframe. Tag ini sebenarnya berfungsi untuk menambahkan halaman lain dalam sebuah frame.

Contoh:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contoh Video di HTML</title>
</head>
<body>
  <h1>Video dari Youtube</h1>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/N7iY-jNWeFc"></iframe>
</body>
</html>

Perhatikan URL yang digunakan pada atribut src, di sana kita menggunakan /embed/. Ini adalah halaman yang digunakan khusus untuk embed video dari Youtube.

Sebenarnya ada cara gampangnya. Pada video Youtube yang ingin kita embed, klik saja tombol share.

Maka akan muncul opsi untuk share video, pilih saja embed dan kita akan mendapatkan kode HTML untuk embed videonya.

Kode ini bisa kita copy ke file HTML.

Apa Selanjutnya? Kita sudah belajar cara menampilkan video. Baik itu video dari file lokal dan juga video dari Youtube.

Cara Menambahkan Audio pada HTML

Sekali lagi, Konten dalam web, tidak hanya dalam bentuk teks dan gambar saja. Tapi juga bisa dalam bentuk multimedia seperti audio dan video.

Pada tutorial ini, kita akan fokus membahas tentang audio di HTML.

Konten audio biasanya berbentuk podcast, audiobook, dan musik.

Lalu pertanyaannya:

Bagaimana cara menambahkan audio di HTML?

Sebelum adanya HTML 5, audio di HTML ditambahkan dengan program eksternal seperti flash player.

Namun, kini HTML sudah punya tag sendiri yakni audio.

Tag audio adalah tag untuk membuat audio player. Lalu kita bisa memberikan file audio yang akan diputar dengan tag source.

Tag audio di HTML
Contoh: 📄 contoh-audio.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contoh Audio di HTML</title>
</head>
<body>
  <h1>Contoh Audio di Web</h1>
  <audio controls>
    <source src="Ngoni.mp3" type="audio/mpeg">
    Browsermu tidak mendukung tag audio, upgrade donk!
  </audio>
</body>
</html>

File audionya bisa kamu download di: 🎵 Ngoni.mp3 (6.2 MB)

Perhatikan! Pada atribut src, kita menulis langsung nama file audio yang akan diputar. Ini karena kita menaruh file tersebut dalam satu folder yang sama dengan file HTML.

Jika file audio tersimpan di folder yang berbeda, maka harus ditulis alamat path menuju folder tersebut.

Misalkan, saya menaruhnya di dalam folder 📁 audio, maka atribut src bisa diisi seperti ini:

1
2
3
4
<audio controls>
    <source src="audio/Ngoni.mp3" type="audio/mpeg">
    Browsermu tidak mendukung tag audio, upgrade donk!
</audio>

dan juga file audionya tersimpan di website yang berbeda, maka kita harus mengisinya dengan alamat URL.
1
2
3
4
<audio controls>
    <source src="https://github.com/petanikode/belajar-html/raw/master/audio/Ngoni.mp3" type="audio/mpeg">
    Browsermu tidak mendukung tag audio, upgrade donk!
</audio>

Format File Audio yang didukung

Audio player di HTML tidak mendukung semua jenis format file audio. Berikut ini daftar format file audio yang bisa diputar di HTML. 1

Format Container MIME type
PCM WAV audio/wav
MP3 MP3 audio/mpeg
AAC MP4 audio/mp4
AAC AAC audio/aac
AAC AAC audio/aacp
Vorbis Ogg audio/ogg
Vorbis WebM audio/webm
Opus Ogg audio/ogg
Opus WebM audio/webm
FLAC FLAC audio/flac
FLAC Ogg audio/ogg

Format file yang biasanya digunakan adalah MP3 dan MP4 (M4A), karena ukuran filenya relatif kecil. Sementara format FLAC adalah format file audio dengan kualitas tinggi dan ukuran filenya relatif lebih besar.

Atribut untuk Audio

Tag audio punya beberapa atribut yang sering digunakan:

  1. controls
    Atribut ini berfungsi untuk mengaktifkan tombol kontrol seperti tombol play, pause, stop, scroll, dan volume).

    Contoh penggunaan:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <audio controls="true">
        <source src="audio/Ngoni.mp3" type="audio/mpeg">
        Browsermu tidak mendukung tag audio, upgrade donk!
    </audio>

    <!-- atau -->

    <audio controls>
        <source src="audio/Ngoni.mp3" type="audio/mpeg">
        Browsermu tidak mendukung tag audio, upgrade donk!
    </audio>

    Jika bernilai true, maka nilainya boleh tidak diisi. Nilai true artinya, kita akan mengaktifkan tombol kontrol dan jika nilainya false maka artinya tombol kontrol tidak diaktifkan.

  2. autoplay
    Atribut ini berfungsi untuk memutar audio secara otomatis. Nilai yang bisa diberikan pada atribut ini adalah true dan false.

    Nilai true artinya kita akan memutar audio secara otomatis, dan false artinya audio tidak akan diputar secara otomatis.

    Contoh:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <audio autoplay="true">
        <source src="audio/Ngoni.mp3" type="audio/mpeg">
        Browsermu tidak mendukung tag audio, upgrade donk!
    </audio>

    <!-- atau -->

    <audio autoplay>
        <source src="audio/Ngoni.mp3" type="audio/mpeg">
        Browsermu tidak mendukung tag audio, upgrade donk!
    </audio>

    ✍️ Catatan: Atribut ini mungkin saja tidak akan bekerja pada Google Chrome, karena ada perubahan policy (kebijakan) dalam memutar audio secara otomatis.

  3. loop
    Atribut loop berfungsi untuk mengulang-ulang pemutaran audio. Ini seperti repeat one. Nilai yang bisa diberikan adalah true dan false.

    Contoh:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <audio loop="true">
        <source src="audio/Ngoni.mp3" type="audio/mpeg">
        Browsermu tidak mendukung tag audio, upgrade donk!
    </audio>

    <!-- atau -->

    <audio loop>
        <source src="audio/Ngoni.mp3" type="audio/mpeg">
        Browsermu tidak mendukung tag audio, upgrade donk!
    </audio>

  4. muted
    Atribut ini berfungsi untuk mensenyapkan audio. Nilai yang bisa diberikan adalah true dan false.

    Contoh:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <audio muted="true">
        <source src="audio/Ngoni.mp3" type="audio/mpeg">
        Browsermu tidak mendukung tag audio, upgrade donk!
    </audio>

    <!-- atau -->

    <audio muted>
        <source src="audio/Ngoni.mp3" type="audio/mpeg">
        Browsermu tidak mendukung tag audio, upgrade donk!
    </audio>

Audio Sebagai Background

Audio kadang sering digunakan sebagai background. Biasanya menggunakan musik.

Tujuan menambahkan background agar menambah kesan tertentu pada web. Misalkan, ingin membuat pengunjung merasa santai. maka kita bisa memutar audio musik yang santai.

Cara membuat musik sebagai background adalah dengan menambahkan atribut autoplay, loop, dan menghilangkan kontrol (hidden).

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contoh audio sebagai background</title>
</head>
<body>
  <h1>Contoh audio sebagai background</h1>
  <audio hidden autoplay loop>
    <source src="Ngoni.mp3" type="audio/mpeg">
    Browsermu tidak mendukung tag audio
  </audio>
</body>
</html>

Nggak ada suaranya? Sekali lagi, atribut autoplay mungkin tidak bekerja di Google Chrome karena ada pembaharuan kebijakan dalam memutar audio.

Sekarang kita coba buka dengan Mozilla Firefox. Hasilnya sama saja, tidak ada suaranya. Ini karena autoplay diblokir otomatis.

Sekarang kita coba ubah izin untuk memutar audio secara otomatis. Klik ikon autoplay pada address bar di dekat ikon (i).

Pada bagian Autoplay, ubah Block Audio menjadi Allow Audio and Video.

Setelah itu, coba refresh atau reload.

Maka suaranya akan terdengar.

Apa Selanjutnya? Sejauh ini kita sudah belajar banyak tag. Sudah saatnya untuk belajar membuat web kecil-kecilan dengan ilmu HTML yang kita pelajari.