Tutorial HTML 14 : Cara Menampilkan Video
• 9 min read • 4803 views
Tutorial HTML 14 : Cara Menampilkan Video
Pada era digital saat ini, konten multimedia seperti video semakin menjadi bagian integral dari pengalaman pengguna di web. Menyematkan video di halaman web tidak hanya memperkaya konten tetapi juga meningkatkan interaktivitas dan daya tarik visual. Dalam seri Belajar HTML kali ini, kita akan mempelajari cara menambahkan video pada web menggunakan elemen-elemen HTML yang tepat. Dengan memanfaatkan elemen `<video>` dan atribut-atribut pendukungnya, Anda akan dapat menyisipkan video dengan mudah dan memberikan pengalaman menonton yang optimal bagi pengunjung situs Anda. Mari kita jelajahi langkah-langkah praktis untuk menambahkan video pada web dalam artikel ini.
Table of Contents
Cara Menambahkan Video di HTML
Untuk menampilkan video di halaman web, kita memerlukan media player yang terintegrasi dengan HTML.
Dulu..
Sebelum hadirnya HTML5, menambahkan video ke dalam halaman web memerlukan program eksternal seperti Adobe Flash. Penggunaan Flash sebagai media player memerlukan plugin tambahan yang harus diinstal pengguna, seringkali menyebabkan masalah kompatibilitas dan keamanan. Namun, sejak HTML5 diperkenalkan, penggunaan Flash sudah tidak lagi diperlukan.
Sekarang...
HTML5 telah membawa kemudahan dengan memperkenalkan elemen `<video>`, yang memungkinkan kita menyematkan video secara langsung di halaman web tanpa memerlukan plugin eksternal. Elemen ini didukung oleh semua browser modern, meskipun ada beberapa perbedaan dalam format video yang didukung oleh masing-masing browser.
Baca Juga
Comic Adobe Flash dan HTML5
Ketika sebuah tag video dibuka pada browser yang tidak mendukungnya, maka akan muncul teks alternatif yang menginformasikan bahwa browser tidak mendukung tag video. Namun, jika browser mendukungnya, video akan langsung ditampilkan dan dapat diputar oleh pengguna.
Berikut adalah contoh sederhana menambahkan video di HTML:
```html
<!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>
```
Dalam contoh di atas, elemen `<video>` digunakan dengan atribut `controls` yang memberikan kontrol pemutaran kepada pengguna seperti play, pause, dan volume. Tag `<source>` digunakan untuk mendefinisikan sumber video dengan format yang didukung. Jika browser tidak mendukung tag video, teks "Browsermu tidak mendukung tag ini, upgrade donk!" akan ditampilkan sebagai alternatif.
Dengan HTML5, menambahkan video ke halaman web menjadi lebih mudah dan efisien, memberikan pengalaman multimedia yang lebih baik kepada pengguna tanpa perlu menginstal plugin tambahan.
Pada contoh di atas, kita menuliskan secara langsung nama video yang akan ditampilkan karena video tersebut 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. Misalnya, jika kita menyimpan video di dalam folder bernama "video", maka alamat path yang digunakan adalah sebagai berikut:
```html
<video controls>
<source src="video/nama-video.mp4" type="video/mp4">
Browsermu tidak mendukung tag ini, upgrade donk!
</video>
```
Menggunakan URL Lengkap
Jika videonya berada di website yang berbeda, maka kita harus mengisi atribut `src` dengan URL lengkap dari video tersebut. Contohnya adalah sebagai berikut:
```html
<video controls>
<source src="https://www.petanikode.com/img/html-video/cat-herd.webm" type="video/webm">
Browsermu tidak mendukung tag ini, upgrade donk!
</video>
```
Contoh Lengkap
Untuk memberikan pemahaman yang lebih jelas, berikut ini contoh lengkap dari cara menambahkan video di HTML dengan berbagai skenario penyimpanan file video:
```html
<!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 di folder yang sama -->
<video controls>
<source src="cat-herd.webm" type="video/webm">
Browsermu tidak mendukung tag ini, upgrade donk!
</video>
<br><br>
<!-- Video di folder yang berbeda -->
<video controls>
<source src="video/nama-video.mp4" type="video/mp4">
Browsermu tidak mendukung tag ini, upgrade donk!
</video>
<br><br>
<!-- Video dari URL lengkap -->
<video controls>
<source src="https://www.petanikode.com/img/html-video/cat-herd.webm" type="video/webm">
Browsermu tidak mendukung tag ini, upgrade donk!
</video>
</body>
</html>
```
Dengan mengikuti contoh-contoh di atas, Anda dapat menyematkan video di halaman web dengan mudah, baik itu video yang disimpan secara lokal maupun yang di-hosting di situs web lain. HTML5 membuat integrasi video menjadi lebih sederhana dan memberikan fleksibilitas yang lebih besar dalam pengelolaan konten multimedia.
Format Video yang Didukung oleh HTML
Saat menyematkan video di halaman web menggunakan HTML, penting untuk memperhatikan format video yang didukung. Tidak semua format video dapat ditampilkan secara langsung di HTML, sehingga pemilihan format yang tepat sangatlah penting. Berikut ini adalah beberapa format video yang didukung oleh HTML, beserta tipe media yang sesuai:
- MP4 (MPEG-4) - Tipe Media: `
video/mp4`
MP4 adalah salah satu format video paling umum yang didukung oleh HTML. Format ini sering digunakan karena kompatibilitasnya yang luas dengan berbagai browser dan perangkat.
- WebM - Tipe Media: `
video/webm`
WebM adalah format video open source yang didukung oleh HTML. Format ini umumnya memiliki kualitas yang baik dan ukuran file yang relatif kecil, membuatnya menjadi pilihan populer untuk video di web.
- Ogg - Tipe Media: `
video/ogg`
Ogg adalah format video lain yang didukung oleh HTML. Meskipun tidak sepopuler MP4 atau WebM, Ogg tetap merupakan pilihan yang layak untuk menyematkan video di halaman web.
Jika Anda memiliki video dengan format yang berbeda dari ketiga format di atas, Anda perlu mengonversinya agar dapat ditambahkan ke dalam halaman HTML. Hal ini karena browser modern biasanya hanya mendukung format video yang disebutkan di atas secara default. Proses konversi video ke format yang didukung dapat dilakukan menggunakan berbagai aplikasi atau alat online.
Dengan memilih format video yang didukung oleh HTML, Anda dapat memastikan bahwa video Anda dapat ditampilkan dengan baik di berbagai browser dan perangkat, sehingga pengunjung situs web Anda dapat menikmati konten multimedia tanpa masalah.
Atribut untuk Elemen video
Elemen `<video>` dalam HTML memiliki beberapa atribut yang dapat ditambahkan untuk mengontrol perilaku dan tampilan video. Berikut adalah beberapa atribut yang umum digunakan bersama dengan nilai dan fungsi masing-masing:
- autoplay - `
true/false`
Atribut ini digunakan untuk menentukan apakah video akan diputar secara otomatis saat halaman dimuat. Jika disetel ke `true`, video akan mulai diputar tanpa interaksi pengguna.
- controls - `
true/false`
Atribut ini mengaktifkan atau menonaktifkan kontrol pemutaran video seperti tombol play, pause, dan volume. Jika disetel ke `true`, kontrol video akan ditampilkan di pemutar video.
- loop - `
true/false`
Atribut ini digunakan untuk memutar video secara berulang-ulang setelah mencapai akhir. Jika disetel ke `true`, video akan terus diputar kembali setelah selesai.
- muted - `
true/false`
Atribut ini menonaktifkan audio dari video. Jika disetel ke `true`, audio dari video akan dimatikan dan hanya gambar akan ditampilkan.
- poster - Image Path
Atribut ini digunakan untuk menentukan gambar penutup atau sampul dari video. Ketika video belum dimainkan, gambar ini akan ditampilkan. Nilai atributnya adalah path ke gambar yang ingin ditampilkan.
- width & height - angka
Atribut ini digunakan untuk menentukan lebar dan tinggi tampilan video dalam piksel. Ini memungkinkan pengembang untuk mengontrol ukuran video yang ditampilkan di halaman web.
- playsinline - `
true/false`
Atribut ini mengontrol apakah video akan diputar di dalam area konten halaman atau di pemutar video layar penuh terpisah. Jika disetel ke `true`, video akan diputar di dalam area konten halaman (inline), sehingga memungkinkan pengguna untuk terus menavigasi situs web tanpa terganggu oleh pemutar video layar penuh.
Dengan memanfaatkan atribut-atribut ini, pengembang dapat memberikan pengalaman menonton video yang lebih interaktif dan disesuaikan dengan kebutuhan situs web mereka.
- Tutorial HTML Part 1 : Pengenalan
- Tutorial HTML Part 2 : Tag, Element dan Atribut
- HTML 3 : Tutorial Membuat Paragraf
- HTML 4 : Cara Membuat Heading
- HTML Part 5 : Cara Membuat Komentar
- HTML 6 : Belajar Teks Formatting
- Tutorial HTML 7 : Membuat Link Untuk Menghubungkan Web
- Tutorial HTML 8 : Cara Menampilkan Gambar
- Tutorial HTML 9 : Jenis Atribut tag IMG HTML
- Tutorial HTML 10 : Cara Membuat List
- Tutorial HTML 11 : Cara Membuat Tabel
- Tutorial HTML 12 : Cara Membuat Form
- Tutorial HTML 14 : Cara Menampilkan Video
- Tutorial HTML 13 : Belajar Elemen Semantik
- Tutorial HTML 15 : Cara Menampilkan Audio
- Tutorial HTML 16 : Cara Membuat Website Sederhana
- Membuat Aplikasi Keuangan Pribadi Menggunakan Python dan Django ( Tutorial Lengkap )
Last updated on June 03, 2026
