15 May 2025
Menambahkan video ke dalam website HTML dapat meningkatkan interaktivitas dan daya tarik bagi pengunjung. Dengan kemajuan HTML5, proses ini menjadi lebih sederhana dan efisien. Kamu dapat menyematkan video langsung ke halaman web tanpa memerlukan plugin eksternal. Artikel ini akan membahas cara memasukkan video ke website HTML menggunakan tag <video>, termasuk struktur dasar dan atribut penting yang perlu diperhatikan.
Menambahkan Video Menggunakan Tag <video>
Tag <video> dalam HTML5 digunakan untuk menyematkan konten video langsung ke dalam halaman web. Penggunaan tag ini memungkinkan kamu menampilkan video tanpa memerlukan plugin tambahan, sehingga kompatibilitas dan aksesibilitas situs meningkat. Sebelum menambahkan video, pastikan format file video yang digunakan didukung oleh browser, seperti MP4, WebM, atau OGG.
Struktur Dasar Tag <video>
Struktur dasar tag <video> melibatkan pembukaan tag <video>, penentuan sumber video menggunakan tag <source>, dan penutupan tag </video>. Berikut contoh sederhana:
<video width="640" height="360" controls>
<source src="video-sample.mp4" type="video/mp4">
<source src="video-sample.webm" type="video/webm">
Browser kamu tidak mendukung tag video.
</video>
Dalam contoh di atas, atribut width dan height menentukan ukuran pemutar video, sedangkan controls menambahkan kontrol pemutaran seperti play, pause, dan volume. Tag <source> digunakan untuk menentukan sumber video dengan atribut src sebagai lokasi file dan type sebagai format file. Menambahkan beberapa tag <source> dengan format berbeda memastikan kompatibilitas dengan berbagai browser.
Atribut Penting dalam Tag <video>
Tag <video> memiliki beberapa atribut yang dapat disesuaikan untuk mengontrol perilaku dan tampilan video di halaman web. Berikut beberapa atribut penting yang sering digunakan:
src untuk Menentukan Sumber Video
Atribut src digunakan untuk menentukan URL sumber video yang akan diputar. Namun, praktik terbaik adalah menggunakan tag <source> di dalam tag <video> untuk mendefinisikan sumber video, memungkinkan penambahan beberapa format video untuk kompatibilitas yang lebih baik. Contoh:
<video controls>
<source src="video-sample.mp4" type="video/mp4">
<source src="video-sample.webm" type="video/webm">
Browser kamu tidak mendukung tag video.
</video>
Ketika menambahkan beberapa sumber video dalam format berbeda, browser akan memilih format yang didukungnya, sehingga video dapat diputar dengan baik.
controls untuk Menampilkan Kontrol Pemutar
Atribut controls menambahkan antarmuka kontrol pemutaran video, seperti tombol play/pause, pengatur volume, dan penggeser durasi. Menambahkan atribut ini meningkatkan pengalaman pengguna dengan memberikan kontrol penuh atas pemutaran video. Contoh penggunaannya:
<video src="video-sample.mp4" controls>
Browser kamu tidak mendukung tag video.
</video>
Dengan menambahkan atribut controls, pengguna dapat dengan mudah mengontrol pemutaran video sesuai keinginan mereka.
Baca juga: Penting untuk Skripsi! Ini Cara Memasukkan Website ke Mendeley
autoplay, loop, dan muted untuk Pengaturan Pemutaran
1. autoplay: Memungkinkan video mulai diputar secara otomatis saat halaman dimuat.
2. loop: Memutar ulang video secara otomatis setelah selesai.
3. muted: Memulai pemutaran video dalam keadaan tanpa suara.
Penggunaan atribut-atribut ini dapat dikombinasikan sesuai kebutuhan. Contoh:
<video src="video-sample.mp4" autoplay loop muted>
Browser kamu tidak mendukung tag video.
</video>
Perlu diperhatikan bahwa beberapa browser membatasi pemutaran otomatis video dengan suara. Oleh karena itu, menambahkan atribut muted bersama autoplay memastikan video dapat diputar otomatis tanpa masalah.
Kamu dapat dengan mudah menambahkan video ke dalam website HTML dengan memahami dan menerapkan struktur serta atribut-atribut di atas. Hal ini akan meningkatkan interaktivitas dan pengalaman pengguna secara keseluruhan.
Menyematkan Video dari Platform Eksternal seperti YouTube
Selain menambahkan video secara langsung menggunakan tag <video>, kamu juga dapat menyematkan video dari platform eksternal seperti YouTube. Metode ini memungkinkan kamu menampilkan konten video tanpa perlu mengunggah file video ke server sendiri, sehingga menghemat ruang penyimpanan dan bandwidth. Berikut ini adalah cara memasukkan video ke website HTML dari YouTube dan menyesuaikan tampilannya agar responsif dan sesuai dengan desain situs kamu.
Menggunakan Tag <iframe> untuk Video YouTube
Untuk menyematkan video YouTube ke dalam halaman HTML, kamu dapat menggunakan tag <iframe>. Berikut langkah-langkahnya:
1. Buka Video YouTube: Temukan video yang ingin kamu sematkan di YouTube.
2. Salin Kode Sematan: Di bawah video, klik tombol "Bagikan", lalu pilih opsi "Sematkan". Salin kode HTML yang disediakan, yang biasanya berbentuk seperti ini:
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
Gantilah VIDEO_ID dengan ID video YouTube yang sesuai.
3. Tempelkan Kode ke HTML: Buka file HTML kamu dan tempelkan kode <iframe> tersebut di lokasi yang diinginkan dalam struktur halaman.
Kamu dapat menampilkan video YouTube di halaman web-mu dengan mudah melalui cara di atas. Penggunaan <iframe> memungkinkan integrasi yang cepat tanpa perlu mengunggah file video secara manual.
Menyesuaikan Ukuran dan Rasio Aspek Video
Agar video yang disematkan tampil optimal di berbagai perangkat, penting untuk menyesuaikan ukuran dan rasio aspeknya. Rasio aspek standar untuk video YouTube adalah 16:9. Untuk memastikan video responsif dan menyesuaikan dengan lebar kontainer, kamu dapat menggunakan CSS sebagai berikut:
.video-container {
position: relative;
padding-bottom: 56.25%; /* Rasio aspek 16:9 */
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
Kemudian, bungkus tag <iframe> dengan div yang memiliki kelas video-container:
<div class="video-container">
<iframe src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe>
</div>
Setelah menerapkan cara di atas, video yang kamu ingin tampilkan di situs web akan menyesuaikan ukurannya secara proporsional sesuai dengan lebar container. Hal ini membuat tampilannya konsisten di berbagai ukuran layar.
Selain itu, pastikan untuk mempertahankan rasio aspek yang benar agar video tidak tampak terdistorsi. Rasio aspek 16:9 adalah yang paling umum digunakan dan cocok untuk sebagian besar perangkat.
Baca juga: Catat, Begini Cara Memblokir Website Agar Tidak Bisa Diakses
Format Video yang Didukung oleh HTML
Saat menambahkan video ke dalam halaman web menggunakan HTML, penting untuk memahami format video yang didukung oleh berbagai browser. Pemilihan format yang tepat memastikan video dapat diputar dengan baik oleh pengunjung situs, terlepas dari browser yang mereka gunakan. Berikut ini adalah beberapa format video utama yang kompatibel dengan elemen <video> dalam HTML5:
MP4, WebM, dan Ogg
1. MP4 (MPEG-4 Part 14): Format ini adalah yang paling umum digunakan dan didukung oleh hampir semua browser dan perangkat. MP4 menawarkan kualitas video yang baik dengan ukuran file yang relatif kecil, menjadikannya pilihan populer untuk penyematan video di web.
2. WebM: Dikembangkan oleh Google, WebM adalah format open-source yang menawarkan kompresi efisien dengan kualitas tinggi. Meskipun didukung oleh banyak browser modern, beberapa perangkat lama, terutama produk Apple seperti iPhone atau iPad, mungkin tidak kompatibel dengan format ini.
3. Ogg: Format open-source lainnya yang didukung oleh HTML5. Meskipun tidak sepopuler MP4 atau WebM, Ogg tetap menjadi alternatif yang layak untuk penyematan video di halaman web. Namun, dukungan terhadap format ini bervariasi antara browser.
Kompatibilitas Browser terhadap Format Video
Kompatibilitas format video dengan browser berbeda-beda, sehingga penting untuk mengetahui dukungan masing-masing browser terhadap format tertentu. MP4 adalah pilihan aman untuk video karena didukung hampir semua browser utama, termasuk Chrome, Firefox, Safari, dan Edge. WebM juga kompatibel dengan banyak browser modern seperti Chrome dan Firefox.
Namun, Safari dan Internet Explorer memerlukan plugin tambahan. Sementara itu, Ogg didukung oleh Firefox, Chrome, serta Opera. Akan tetapi, software ini kurang kompatibel dengan Safari dan Internet Explorer.
Untuk memastikan kompatibilitas maksimal, disarankan menyediakan beberapa format video dalam elemen <video> dengan menggunakan beberapa tag <source>. Dengan demikian, browser akan memilih format yang didukungnya. Contoh implementasinya:
<video controls>
<source src="video-sample.mp4" type="video/mp4">
<source src="video-sample.webm" type="video/webm">
<source src="video-sample.ogv" type="video/ogg">
Browser kamu tidak mendukung tag video.
</video>
Penyediaan berbagai format akan meningkatkan peluang videomu dapat diputar di berbagai browser dan perangkat, memastikan pengalaman pengguna yang konsisten di seluruh platform.
Menambahkan Subtitle pada Video di HTML
Menambahkan subtitle ke dalam video di halaman web meningkatkan aksesibilitas dan pengalaman pengguna, terutama bagi mereka yang memiliki gangguan pendengaran atau yang tidak memahami bahasa dalam video. HTML5 menyediakan cara sederhana untuk menyisipkan subtitle menggunakan tag <track>, yang memungkinkan kamu menambahkan teks terjadwal yang sinkron dengan pemutaran video.
Menggunakan Tag <track> untuk Menyisipkan Subtitle
Tag <track> digunakan sebagai elemen anak dari tag <video> untuk menambahkan teks seperti subtitle, caption, atau deskripsi ke dalam media. Beberapa atribut penting yang sering digunakan dalam tag <track> meliputi:
1. src: Menentukan URL atau path ke file subtitle.
2. kind: Menunjukkan jenis teks yang ditambahkan, misalnya "subtitles" untuk subtitle.
3. srclang: Menentukan bahasa subtitle menggunakan kode bahasa BCP 47, seperti "id" untuk Bahasa Indonesia.
4. label: Memberikan label yang dapat ditampilkan kepada pengguna untuk memilih subtitle.
5. default: Menandai track sebagai default yang akan ditampilkan jika pengguna tidak memilih track lain.
Berikut contoh implementasi tag <track> dalam elemen <video>:
<video controls>
<source src="video-sample.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_id.vtt" kind="subtitles" srclang="id" label="Bahasa Indonesia" default>
Browser kamu tidak mendukung tag video.
</video>
Dalam contoh di atas, dua file subtitle ditambahkan: satu dalam bahasa Inggris (subtitles_en.vtt) dan satu dalam Bahasa Indonesia (subtitles_id.vtt). Atribut default pada track Bahasa Indonesia memastikan subtitle tersebut ditampilkan secara otomatis jika pengguna tidak memilih subtitle lain.
Baca juga: Hindari Konten Negatif! Ini Cara Memblokir Website di Android
Format File Subtitle yang Didukung (WebVTT)
Format file subtitle yang didukung oleh HTML5 adalah WebVTT (Web Video Text Tracks) dengan ekstensi .vtt. WebVTT dirancang khusus untuk digunakan di web dan kompatibel dengan elemen <track> dalam HTML5. File WebVTT adalah file teks biasa yang berisi teks subtitle beserta penanda waktu yang menentukan kapan teks tersebut harus ditampilkan selama pemutaran video.
Berikut contoh sederhana isi file .vtt:
WEBVTT
00:00:01.000 --> 00:00:05.000
Ini adalah contoh subtitle pertama.
00:00:06.000 --> 00:00:10.000
Berikut adalah contoh subtitle kedua.
Setiap entri subtitle terdiri dari:
1. Penanda Waktu: Menentukan waktu mulai dan berakhirnya subtitle dalam format jam:menit:detik.milidetik.
2. Teks Subtitle: Teks yang akan ditampilkan pada rentang waktu yang ditentukan.
Jika kamu memiliki file subtitle dalam format lain, seperti SubRip Text (.srt), kamu dapat mengonversinya ke format .vtt menggunakan alat konversi online atau editor teks dengan penyesuaian manual. Pastikan file .vtt disimpan dengan encoding UTF-8 untuk memastikan karakter ditampilkan dengan benar.
Penambahkan subtitle menggunakan tag <track> dan format WebVTT akan meningkatkan aksesibilitas konten video di situs web. Hal ini akan memastikan pesan yang disampaikan dapat dipahami oleh audiens yang lebih luas.
Untuk memastikan video di website-mu dapat diakses oleh semua pengguna, memilih format yang kompatibel seperti MP4 sangatlah penting. Dengan mempertimbangkan kebutuhan browser modern dan pengalaman pengguna, website yang optimal akan membantu bisnismu terlihat profesional dan terpercaya.
Jika kamu membutuhkan jasa pembuatan website yang responsif, optimal, dan mendukung berbagai format media, DCLIQ Digital Agency siap membantu! Hubungi kami sekarang untuk menciptakan situs yang mendukung pertumbuhan bisnismu.
