Setelah Anda memahami cara menampilkan gambar dengan tag <img> dan membuat tautan dengan tag <a>, langkah alami berikutnya dalam perjalanan belajar HTML adalah menyisipkan media yang lebih kaya, yaitu video. Video adalah salah satu jenis konten paling menarik dan informatif yang bisa disematkan langsung ke dalam halaman web tanpa harus bergantung pada layanan pihak ketiga seperti YouTube atau Vimeo. Sejak HTML5 diperkenalkan secara resmi, browser modern telah mendukung pemutaran video secara native melalui tag <video>. Artinya, Anda tidak lagi perlu menggunakan plugin tambahan seperti Adobe Flash yang kini sudah tidak didukung sama sekali. Cukup dengan menuliskan beberapa baris kode HTML, video Anda akan langsung dapat diputar oleh pengunjung situs. Artikel ini akan memandu Anda memahami cara kerja tag <video>, atribut-atribut pentingnya seperti controls, autoplay, loop, muted, width, dan height, serta bagaimana menyediakan beberapa format video sekaligus agar dapat berjalan di berbagai browser. Semua langkah disertai contoh kode yang dapat langsung Anda coba di komputer sendiri menggunakan editor teks dan browser pilihan Anda.
Sebelum memulai, ada satu prasyarat yang perlu Anda penuhi: Anda membutuhkan sebuah file video yang tersimpan di komputer Anda. Format yang paling direkomendasikan untuk keperluan web saat ini adalah MP4 dengan codec H.264, karena format ini didukung oleh hampir semua browser modern termasuk Chrome, Firefox, Safari, Edge, dan Opera. Jika Anda belum memiliki file video, Anda bisa menggunakan video pendek apa pun dari koleksi pribadi Anda, atau mengunduh video sampel bebas hak cipta dari situs seperti Pixabay atau Pexels. Dalam tutorial ini, kita akan menggunakan file bernama sampel.mp4 yang diletakkan di folder yang sama dengan file HTML kita, sehingga semua contoh kode akan merujuk pada path yang sama. Pastikan nama file video Anda sudah benar dan tidak mengandung spasi, karena spasi dalam nama file dapat menyebabkan browser gagal menemukan file tersebut. Sekarang mari kita mulai membangun pemahaman yang solid tentang bagaimana elemen video bekerja di balik layar HTML.
Landasan Sains dan Prinsip Kerja Metode
Tag <video> adalah elemen HTML5 yang berfungsi sebagai wadah untuk menanamkan konten video ke dalam dokumen HTML secara native. Kata "native" di sini berarti browser sendiri yang menangani pemutaran video, tanpa membutuhkan plugin eksternal apa pun. Secara teknis, ketika browser menemukan elemen <video> dalam kode HTML, browser akan membuat sebuah media player bawaan yang terintegrasi langsung dengan antarmuka halaman web. Browser kemudian membaca atribut-atribut yang Anda tuliskan, mengunduh atau memuat file video dari sumber yang ditunjuk oleh atribut src atau elemen <source> di dalamnya, lalu merender kontrol pemutaran video jika atribut controls disertakan. Proses ini sepenuhnya ditangani oleh rendering engine browser, sehingga tampilan kontrol video bisa berbeda sedikit antara satu browser dengan browser lainnya, meskipun fungsionalitasnya tetap sama.
Salah satu konsep penting yang perlu Anda pahami adalah kompatibilitas format video antarbrowser. Tidak semua browser mendukung semua format video yang sama. Format MP4 dengan codec H.264 adalah yang paling luas dukungannya dan berjalan dengan baik di Chrome, Safari, Edge, dan Firefox versi modern. Format WebM dengan codec VP8 atau VP9 adalah alternatif open-source yang didukung Chrome, Firefox, dan Edge, namun dukungan di Safari baru hadir di versi yang lebih baru. Karena itulah, praktik terbaik dalam HTML adalah menyediakan beberapa format video sekaligus menggunakan elemen <source> yang bersarang di dalam <video>. Browser akan mencoba memuat format pertama yang ia dukung, dan jika tidak bisa, ia akan mencoba format berikutnya secara otomatis. Ini adalah mekanisme fallback yang sangat cerdas dan dirancang agar halaman web berfungsi di lingkungan yang beragam.
Atribut-atribut pada elemen <video> bekerja seperti instruksi yang Anda berikan kepada browser media player. Atribut controls adalah atribut boolean, artinya kehadiran atribut itu sendiri sudah cukup untuk mengaktifkan fitur tersebut tanpa perlu memberi nilai. Ketika controls hadir, browser akan menampilkan tombol play, pause, pengatur volume, progress bar, dan tombol layar penuh. Atribut autoplay memberi instruksi kepada browser untuk mulai memutar video segera setelah halaman dimuat, namun perlu diingat bahwa browser modern seperti Chrome dan Firefox menerapkan kebijakan autoplay yang ketat: video hanya dapat diputar otomatis jika juga menyertakan atribut muted. Kebijakan ini dibuat untuk melindungi pengalaman pengguna dari video bersuara yang tiba-tiba berbunyi saat halaman dibuka. Atribut loop membuat video diputar ulang dari awal secara otomatis setiap kali video selesai diputar, yang sangat berguna untuk video latar belakang atau animasi dekoratif yang bersifat looping.
Formula, Komposisi Bahan, atau Spesifikasi Parameter
Berikut adalah ringkasan atribut dan elemen yang berkaitan dengan tag <video> dalam HTML5. Memahami setiap parameter ini akan membantu Anda menggunakan elemen video dengan tepat sesuai kebutuhan halaman web yang sedang Anda bangun. Tabel di bawah mencakup atribut utama beserta spesifikasi dan fungsi teknisnya yang perlu Anda ketahui sebagai pemula.
| Komponen | Spesifikasi/Rasio | Fungsi Teknis |
|---|---|---|
Tag <video> | Elemen HTML5, memiliki tag pembuka dan penutup | Wadah utama untuk menyematkan konten video secara native di browser |
Atribut src | Nilai berupa URL atau path file video (string) | Menentukan lokasi file video yang akan dimuat dan diputar browser |
Elemen <source> | Elemen void (tidak memiliki tag penutup), ditempatkan di dalam <video> | Menyediakan beberapa format video sebagai alternatif fallback antarbrowser |
Atribut type pada <source> | MIME type: video/mp4, video/webm, video/ogg | Membantu browser menentukan format video tanpa harus mengunduhnya terlebih dahulu |
Atribut controls | Boolean (tidak memerlukan nilai) | Menampilkan kontrol bawaan browser: play, pause, volume, progress bar, fullscreen |
Atribut autoplay | Boolean; di browser modern wajib dikombinasikan dengan muted | Memulai pemutaran video secara otomatis saat halaman selesai dimuat |
Atribut loop | Boolean (tidak memerlukan nilai) | Mengulang pemutaran video dari awal secara otomatis setelah video selesai |
Atribut muted | Boolean (tidak memerlukan nilai) | Menonaktifkan audio video; wajib disertakan agar autoplay berfungsi di browser modern |
Atribut width dan height | Nilai integer dalam satuan piksel (tanpa satuan "px") | Menentukan dimensi tampilan elemen video dalam piksel di dalam halaman |
Atribut poster | Nilai berupa URL atau path file gambar (string) | Menampilkan gambar placeholder sebelum video diputar atau saat video belum tersedia |
autoplay tidak akan diputar otomatis jika tidak disertai atribut muted. Selain itu, pastikan path file video Anda sudah benar: jika file HTML dan file video berada di folder yang sama, cukup tulis nama file saja (misalnya sampel.mp4). Jika video diletakkan di subfolder, sertakan path relatifnya (misalnya video/sampel.mp4). Kesalahan path adalah penyebab paling umum video tidak muncul di halaman.Panduan Langkah Kerja Bertahap
Menyiapkan Struktur Folder dan File Video
Sebelum menulis kode HTML, Anda perlu menyiapkan lingkungan kerja yang rapi. Buatlah sebuah folder baru di komputer Anda, misalnya beri nama belajar-video. Di dalam folder tersebut, letakkan file video Anda. Dalam tutorial ini, file video yang digunakan bernama sampel.mp4. Pastikan nama file tidak mengandung spasi karena spasi dalam nama file dapat menyebabkan URL tidak terbaca dengan benar oleh browser. Jika nama file video Anda mengandung spasi, ganti spasi tersebut dengan tanda hubung atau garis bawah, misalnya video-sampel.mp4 atau video_sampel.mp4.
Struktur folder yang akan kita gunakan sepanjang tutorial ini adalah sebagai berikut. Di dalam folder belajar-video, akan ada satu file HTML bernama index.html dan satu file video bernama sampel.mp4 yang berada di level yang sama:
belajar-video/
├── index.html
└── sampel.mp4Dengan struktur ini, di dalam kode HTML nanti Anda cukup merujuk file video dengan menulis sampel.mp4 tanpa perlu menyertakan path folder lain. Buka editor teks favorit Anda (misalnya Notepad, VS Code, atau Sublime Text), kemudian buat file baru dan simpan dengan nama index.html di dalam folder belajar-video. Verifikasi langkah ini dengan membuka folder belajar-video di File Explorer atau Finder dan memastikan kedua file, index.html dan sampel.mp4, sudah berada di sana secara berdampingan.
Membuat Dokumen HTML Dasar dan Menyisipkan Tag video Pertama
Sekarang buka file index.html yang sudah Anda buat, lalu tuliskan struktur dokumen HTML5 yang lengkap. Di dalam elemen <body>, kita akan menuliskan tag <video> paling sederhana: hanya menggunakan atribut src untuk menunjuk ke file video dan atribut controls agar pengunjung bisa mengoperasikan pemutaran video. Inilah kode lengkap untuk file index.html:
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Belajar Video HTML</title>
</head>
<body>
<h1>Contoh Video dengan Tag video HTML</h1>
<p>Video di bawah ini menggunakan atribut controls.</p>
<video src="sampel.mp4" controls width="640" height="360">
Browser Anda tidak mendukung pemutaran video HTML5.
</video>
</body>
</html>Setelah menyimpan file, buka file index.html dengan browser (klik dua kali file tersebut, atau klik kanan lalu pilih "Open with" dan pilih browser Anda). Anda akan melihat sebuah media player video muncul di halaman dengan tombol play, progress bar, kontrol volume, dan ikon layar penuh. Teks fallback "Browser Anda tidak mendukung pemutaran video HTML5." yang ditulis di antara tag pembuka dan penutup <video> hanya akan terlihat oleh pengguna yang menggunakan browser sangat lama yang tidak mendukung HTML5, yang pada praktiknya sudah sangat jarang terjadi saat ini. Klik tombol play dan pastikan video berhasil diputar untuk memverifikasi langkah ini.
Menggunakan Elemen source untuk Dukungan Multibrowser
Pendekatan yang lebih tangguh adalah menyediakan video dalam beberapa format menggunakan elemen <source> yang bersarang di dalam <video>. Dengan cara ini, jika browser tidak mendukung format pertama, ia akan mencoba format kedua secara otomatis. Jika Anda hanya memiliki satu format video, langkah ini tetap direkomendasikan karena atribut type membantu browser memutuskan lebih cepat apakah ia bisa memutar video tersebut tanpa harus mengunduh sebagian file terlebih dahulu.
Perhatikan bahwa ketika menggunakan elemen <source>, atribut src pada tag <video> tidak digunakan lagi. Sebagai gantinya, setiap elemen <source> yang memiliki atribut src-nya sendiri. Perbarui isi file index.html Anda menjadi seperti berikut. Untuk keperluan contoh ini, kita asumsikan Anda hanya memiliki sampel.mp4, namun kode ditulis dengan pola yang benar untuk dukungan multiformt:
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Belajar Video HTML</title>
</head>
<body>
<h1>Video dengan Elemen source</h1>
<p>Browser akan memilih format yang didukungnya secara otomatis.</p>
<video controls width="640" height="360">
<source src="sampel.webm" type="video/webm">
<source src="sampel.mp4" type="video/mp4">
Browser Anda tidak mendukung pemutaran video HTML5.
</video>
</body>
</html>Pada contoh di atas, browser akan mencoba memuat sampel.webm terlebih dahulu. Jika browser tidak mendukung format WebM, ia akan beralih ke sampel.mp4. Jika Anda hanya memiliki file sampel.mp4, hapus baris <source src="sampel.webm"...> dan sisakan hanya satu elemen <source> untuk MP4. Simpan file, refresh browser, dan pastikan video masih dapat diputar seperti sebelumnya. Untuk memverifikasi bahwa browser benar-benar memilih format yang tepat, Anda bisa membuka DevTools browser (tekan F12), pergi ke tab Network, refresh halaman, lalu cari nama file video di daftar request untuk melihat format mana yang sedang diunduh browser.
Menerapkan Atribut autoplay, muted, dan loop
Pada langkah ini, kita akan menambahkan atribut autoplay, muted, dan loop pada elemen video. Ketiga atribut ini sering digunakan bersama-sama untuk membuat video latar belakang yang memutar otomatis dan berulang tanpa suara, seperti yang sering Anda lihat di bagian hero atau banner pada situs web modern. Ingat bahwa autoplay di browser modern hanya berfungsi jika muted juga disertakan. Jika Anda menuliskan autoplay tanpa muted, video tidak akan diputar otomatis oleh Chrome, Firefox, atau Edge karena kebijakan autoplay mereka yang melindungi pengguna dari gangguan suara tak terduga.
Perbarui file index.html Anda dengan kode berikut untuk melihat ketiga atribut ini bekerja bersama:
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Belajar Video HTML - autoplay, muted, loop</title>
</head>
<body>
<h1>Video Otomatis, Bisu, dan Berulang</h1>
<p>Video berikut diputar otomatis, tanpa suara, dan akan berulang terus-menerus.</p>
<video src="sampel.mp4" autoplay muted loop width="640" height="360">
Browser Anda tidak mendukung pemutaran video HTML5.
</video>
</body>
</html>Simpan file dan buka atau refresh halaman di browser. Video seharusnya langsung mulai diputar begitu halaman terbuka tanpa memerlukan klik apa pun dari pengguna, berjalan tanpa suara, dan ketika video mencapai akhir, video akan otomatis kembali ke detik pertama dan diputar ulang. Untuk memverifikasi bahwa autoplay bekerja, perhatikan bahwa video sudah berjalan bahkan sebelum Anda mengklik apa pun. Untuk memverifikasi muted, pastikan tidak ada suara keluar. Untuk memverifikasi loop, biarkan video berjalan hingga selesai dan perhatikan apakah ia kembali ke awal secara otomatis. Anda juga bisa mengecek atribut ini melalui DevTools: klik kanan pada video, pilih "Inspect", dan lihat atribut-atribut yang terpasang pada elemen tersebut di panel Elements.
Menambahkan Atribut poster untuk Gambar Pratinjau
Atribut poster memungkinkan Anda menentukan gambar yang ditampilkan sebagai "sampul" atau "thumbnail" video sebelum pengguna menekan tombol play. Ini sangat berguna karena tanpa atribut poster, browser biasanya menampilkan frame pertama dari video (yang mungkin hitam atau tidak representatif) sebagai pratinjau. Dengan menetapkan gambar poster yang menarik, Anda memberikan gambaran visual yang jelas kepada pengunjung tentang konten video sebelum mereka memutuskan untuk menonton.
Untuk mempraktikkan ini, siapkan sebuah file gambar di folder yang sama. Kita akan menggunakan file bernama poster.jpg. Struktur folder Anda sekarang menjadi:
belajar-video/
├── index.html
├── sampel.mp4
└── poster.jpgPerbarui file index.html Anda dengan menambahkan atribut poster pada elemen <video>:
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Belajar Video HTML - poster</title>
</head>
<body>
<h1>Video dengan Gambar Poster</h1>
<p>Gambar di bawah ini adalah poster yang muncul sebelum video diputar.</p>
<video
src="sampel.mp4"
controls
width="640"
height="360"
poster="poster.jpg">
Browser Anda tidak mendukung pemutaran video HTML5.
</video>
</body>
</html>Simpan file dan buka atau refresh halaman di browser. Sebelum Anda menekan tombol play, area video akan menampilkan gambar dari file poster.jpg sebagai pratinjau. Setelah Anda menekan tombol play, video akan mulai diputar dan gambar poster akan menghilang digantikan oleh konten video yang sebenarnya. Jika gambar poster tidak muncul, periksa kembali nama file dan pastikan poster.jpg benar-benar ada di dalam folder belajar-video di level yang sama dengan index.html.
Menggabungkan Semua Atribut dalam Contoh Lengkap
Pada langkah terakhir ini, kita akan menggabungkan semua yang telah dipelajari ke dalam satu contoh dokumen HTML yang utuh dan siap digunakan. Contoh ini mencakup penggunaan elemen <source> untuk dukungan multiformt, atribut controls, width, height, poster, serta penunjukan dua format video sekaligus. Selain itu, kita juga menambahkan dua elemen video di halaman yang sama untuk menunjukkan perbedaan antara video dengan kontrol biasa dan video yang berjalan otomatis tanpa suara dan berulang (seperti yang lazim digunakan sebagai video dekorasi).
Inilah versi final dari file index.html yang menggabungkan seluruh konsep dalam tutorial ini:
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Belajar Video HTML - Lengkap</title>
<style>
body { font-family: sans-serif; max-width: 700px; margin: 0 auto; padding: 20px; }
h2 { margin-top: 32px; }
video { display: block; margin-bottom: 16px; }
</style>
</head>
<body>
<h1>Contoh Lengkap Tag Video HTML</h1>
<h2>1. Video dengan Kontrol dan Poster</h2>
<p>Pengguna dapat mengontrol pemutaran video ini secara manual.</p>
<video controls width="640" height="360" poster="poster.jpg">
<source src="sampel.webm" type="video/webm">
<source src="sampel.mp4" type="video/mp4">
Browser Anda tidak mendukung pemutaran video HTML5.
</video>
<h2>2. Video Dekorasi: autoplay, muted, loop</h2>
<p>Video ini diputar otomatis, tanpa suara, dan berulang terus-menerus.</p>
<video autoplay muted loop width="640" height="360">
<source src="sampel.webm" type="video/webm">
<source src="sampel.mp4" type="video/mp4">
Browser Anda tidak mendukung pemutaran video HTML5.
</video>
</body>
</html>Simpan file, kemudian buka atau refresh halaman di browser. Anda seharusnya melihat dua elemen video: yang pertama menampilkan gambar poster dan menunggu Anda menekan play, sedangkan yang kedua langsung diputar otomatis tanpa suara dan akan terus berulang. Verifikasi setiap perilaku secara satu per satu: klik play pada video pertama untuk memastikan ia bisa diputar, biarkan video pertama berjalan hingga selesai untuk memastikan ia berhenti (tidak looping karena tidak ada atribut loop), lalu perhatikan bahwa video kedua sudah berjalan otomatis dan tidak berbunyi. Jika salah satu video tidak muncul, gunakan DevTools (F12) dan cek tab Console untuk melihat apakah ada pesan error terkait file yang tidak ditemukan.
Verifikasi Akhir dan Parameter Kelayakan
Setelah menyelesaikan semua langkah di atas, gunakan tabel di bawah ini sebagai daftar periksa untuk memastikan implementasi video HTML Anda sudah benar dan berfungsi sebagaimana mestinya. Setiap parameter dapat Anda verifikasi langsung melalui tampilan browser atau menggunakan DevTools tanpa memerlukan alat tambahan apa pun.
| Parameter | Sebelum Menerapkan Metode | Sesudah Menerapkan Metode (Target) |
|---|---|---|
| Tampilan elemen video di halaman | Tidak ada area video; hanya teks biasa | Area video dengan dimensi yang ditentukan muncul di halaman |
| Kontrol pemutaran | Tidak ada tombol play, pause, atau volume | Kontrol bawaan browser tampil lengkap: play, pause, volume, progress bar, fullscreen |
| Pemutaran otomatis (autoplay + muted) | Video tidak bergerak saat halaman dibuka | Video langsung diputar segera setelah halaman selesai dimuat, tanpa suara |
| Pengulangan video (loop) | Video berhenti di akhir dan tidak diputar ulang | Video kembali ke detik pertama dan diputar ulang secara otomatis setelah selesai |
| Gambar pratinjau sebelum play (poster) | Frame pertama video (mungkin hitam) ditampilkan | Gambar dari file poster.jpg ditampilkan sebelum pengguna menekan tombol play |
Solusi Masalah di Lapangan (FAQ Teknis)
1. Video tidak muncul sama sekali di halaman, hanya ada area kosong atau teks fallback yang tampil.
Penyebab paling umum dari masalah ini adalah path file video yang salah. Browser tidak dapat menemukan file sampel.mp4 di lokasi yang Anda tunjuk dalam kode. Periksa hal-hal berikut secara berurutan: pertama, pastikan file sampel.mp4 benar-benar ada di folder yang sama dengan index.html. Kedua, perhatikan penulisan nama file dengan seksama karena nama file bersifat case-sensitive di sistem operasi Linux dan macOS, artinya Sampel.mp4 dan sampel.mp4 adalah dua file berbeda. Ketiga, buka DevTools browser dengan menekan F12, pergi ke tab Network, refresh halaman, lalu cari nama file video di daftar request. Jika ada ikon merah atau status 404 di sebelahnya, berarti file tidak ditemukan. Keempat, pastikan tidak ada spasi tersembunyi dalam penulisan nilai atribut src di kode HTML Anda.
2. Atribut autoplay tidak berfungsi; video tidak mulai diputar otomatis meskipun sudah ditulis di kode.
Ini adalah perilaku yang disengaja oleh browser modern, bukan kesalahan kode Anda. Chrome, Firefox, dan Edge menerapkan kebijakan autoplay yang melarang video bersuara diputar otomatis tanpa interaksi pengguna terlebih dahulu. Solusinya adalah selalu menambahkan atribut muted bersamaan dengan autoplay. Jadi penulisan yang benar adalah <video autoplay muted ...>. Jika Anda membutuhkan video dengan suara yang diputar otomatis, satu-satunya cara yang didukung oleh kebijakan browser saat ini adalah dengan terlebih dahulu mendapatkan interaksi dari pengguna (misalnya klik tombol) sebelum memanggil pemutaran melalui JavaScript. Untuk kasus sederhana tanpa JavaScript, gunakan autoplay muted dan tambahkan controls agar pengguna bisa mengaktifkan suara sendiri.
3. Video muncul tetapi tidak ada suara sama sekali meskipun atribut muted tidak ditulis di kode.
Ada beberapa kemungkinan penyebab. Pertama, periksa apakah file video Anda memang memiliki audio dengan memutarnya di media player lain seperti VLC atau Windows Media Player. Beberapa file video, terutama yang direkam dari layar atau diekspor tanpa audio, memang tidak memiliki trek suara sama sekali. Kedua, periksa kontrol volume di browser: klik kanan pada elemen video, atau gunakan tombol volume di kontrol player dan pastikan tidak dalam keadaan muted. Ketiga, periksa pengaturan volume sistem operasi Anda. Keempat, jika Anda memang sudah menuliskan atribut muted di kode dan kemudian ingin menghapusnya, pastikan perubahan sudah tersimpan dan Anda sudah me-refresh halaman dengan benar (Ctrl+Shift+R untuk hard refresh agar cache browser tidak menggunakan versi lama).
4. Tampilan video terlalu besar atau terlalu kecil dan tidak proporsional.
Atribut width dan height pada elemen <video> menggunakan satuan piksel dan keduanya bekerja secara independen. Jika Anda menetapkan hanya satu atribut (misalnya hanya width), browser akan menyesuaikan dimensi lainnya secara proporsional berdasarkan rasio aspek asli video. Namun jika Anda menetapkan keduanya dengan nilai yang tidak sesuai rasio aspek video asli, video akan terlihat terjepit atau meregang. Solusi terbaik untuk pemula adalah hanya menetapkan atribut width dan membiarkan height dihitung otomatis oleh browser. Alternatif lain yang lebih fleksibel adalah menggunakan CSS untuk mengatur ukuran: tambahkan style="max-width: 100%; height: auto;" langsung pada elemen <video>, yang akan membuat video responsif terhadap lebar wadahnya. Ini adalah praktik yang sangat dianjurkan untuk memastikan video tampil baik di layar desktop maupun perangkat mobile.
Kesimpulan dan Rencana Aksi
Anda kini telah memahami dan mempraktikkan cara menyisipkan video ke dalam halaman HTML menggunakan tag <video> beserta atribut-atribut utamanya. Dimulai dari penggunaan paling sederhana dengan atribut src dan controls, lalu berkembang ke penggunaan elemen <source> untuk mendukung beberapa format video sekaligus, kemudian menerapkan atribut autoplay, muted, dan loop untuk video yang berjalan otomatis, hingga menambahkan gambar pratinjau dengan atribut poster. Semua konsep ini adalah bagian dari standar HTML5 yang telah didukung secara luas oleh browser modern sejak lebih dari satu dekade lalu, sehingga Anda dapat menggunakannya dengan percaya diri tanpa khawatir tentang kompatibilitas di browser-browser yang umum digunakan saat ini.
Sebagai rencana aksi setelah menyelesaikan tutorial ini, ada beberapa hal yang dapat Anda eksplorasi selanjutnya. Pertama, coba integrasikan elemen video ke dalam proyek halaman web nyata yang sedang Anda bangun, misalnya sebagai video hero di bagian atas halaman atau sebagai penjelasan visual di bagian konten. Kedua, pelajari cara membuat tampilan video responsif menggunakan CSS agar video menyesuaikan diri dengan ukuran layar perangkat yang berbeda, sebuah keterampilan yang sangat dibutuhkan dalam web modern. Ketiga, jika Anda ingin lebih jauh, eksplorasi JavaScript Web API yang bernama HTMLMediaElement, yang memungkinkan Anda mengontrol pemutaran video secara programatik, misalnya membuat tombol play kustom sendiri atau menambahkan efek ketika video mencapai waktu tertentu. Keempat, pelajari cara mengonversi video ke format WebM menggunakan alat seperti FFmpeg agar Anda bisa menyediakan dua format sekaligus untuk kompatibilitas maksimal antarbrowser. Dengan fondasi yang sudah Anda bangun hari ini, seluruh eksplorasi lanjutan tersebut akan terasa jauh lebih mudah.
Ditulis dan diedit oleh Ahmad Ismail Al Malik