HTML video: Kontrol, Autoplay, Ukuran Responsif, dan Pemecahan Masalah
HTML video menyematkan pemutar video di halaman web. Atur URL file dengan src atau elemen anak source, dan tambahkan controls agar pengguna dapat memutar dan menjeda video. Kebijakan browser dapat memblokir pemutaran otomatis meskipun autoplay telah ditetapkan.
Pilih atribut untuk pengalaman pemutaran
| Atribut | Tujuan | Yang perlu diperiksa |
|---|---|---|
controls |
Tampilkan kontrol pemutaran bawaan | Sediakan untuk video konten biasa. Tampilan dan tombol yang tersedia berbeda tergantung browser. |
muted |
Mulai dalam keadaan bisu | Jangan mengharapkan pemutaran otomatis terdengar. Membisukan juga tidak menjamin pemutaran otomatis. |
autoplay, loop |
Mulai secara otomatis dan ulangi setelah selesai | Biarkan pembaca menghentikan pemutaran dan pertimbangkan apakah gerakan mengganggu saat membaca. |
playsinline |
Minta pemutaran sesuai posisi elemen | Berguna di perangkat seluler, tetapi tidak menjamin perilaku tampilan yang identik di setiap perangkat. |
poster |
URL gambar untuk ditampilkan sebelum pemutaran | Gunakan gambar yang dapat diakses, bukan URL video. |
preload |
Petunjuk tentang data yang akan dipramuat | none meminta tanpa pramuat; metadata meminta informasi seperti durasi; auto mengizinkan pemuatan bahkan seluruh file. Ini adalah petunjuk yang mungkin diabaikan oleh peramban. |
controls, muted, autoplay, dan loop adalah atribut Boolean. Kehadirannya mengaktifkannya, jadi autoplay="false" tidak menonaktifkan autoplay. Hapus atribut untuk mematikannya. Permintaan autoplay membutuhkan pemuatan media, jadi preload="none" saja tidak dapat mencegah pengunduhan.
Jalankan contoh video lengkap
Simpan kode ini sebagai video.html dan buka di browser. Ini memuat contoh bunga publik yang digunakan dalam dokumentasi MDN dan memerlukan koneksi internet. Untuk layanan Anda sendiri, hosting video yang Anda memiliki hak untuk menggunakan dan ganti URL-nya.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pemutaran video HTML</title>
<style>
body { margin: 24px; font-family: sans-serif; }
video { display: block; width: 640px; max-width: 100%; height: auto; }
</style>
</head>
<body>
<h1>Video bunga</h1>
<video id="flower" controls playsinline preload="metadata" aria-label="Bunga bergoyang tertiup angin">
<source src="https://developer.mozilla.org/shared-assets/videos/flower.webm" type="video/webm">
<source src="https://developer.mozilla.org/shared-assets/videos/flower.mp4" type="video/mp4">
Peramban ini tidak mendukung elemen video.
</video>
<p>Deskripsi: bunga dan rumput di sekitarnya bergoyang tertiup angin.</p>
<p><a href="https://developer.mozilla.org/shared-assets/videos/flower.mp4"
target="_blank" rel="noopener noreferrer">Buka berkas video MP4</a></p>
</body>
</html>- Periksa pemutar dengan tombol putar dan mulai. Bunga harus bergerak dan posisi pemutaran harus maju. Contoh default tidak memiliki atribut autoplay atau loop.
- Jeda pemutaran untuk menghentikan gerakan. Pada jendela sempit, pemutar harus menyusut sesuai lebar konten.
- Untuk membandingkan pengulangan, tambahkan hanya loop pada tag video pembuka dan buka kembali file. Periksa bahwa pemutaran kembali ke awal setelah mencapai akhir, lalu hapus atribut untuk mengembalikan perilaku asli.
source menawarkan format file sehingga browser bisa memilih kandidat yang didukung. Siapkan file WebM dan MP4 yang asli dari video yang sama; mengganti ekstensi nama file tidak mengubah format. Pemutaran juga tergantung pada codec yang digunakan untuk video dan audio di dalam wadah seperti MP4.
Pemutaran otomatis dan ukuran di perangkat seluler
Jika Anda memerlukan pemutaran otomatis, bandingkan dengan menambahkan autoplay muted ke tag video pembuka. Tetap gunakan playsinline dan kontrol. Preferensi pengguna, kebijakan penghematan daya, riwayat interaksi situs, atau aturan browser lainnya dapat menolak pemutaran otomatis, jadi pertahankan tombol putar.
CSS width: 640px adalah lebar tampilan yang diinginkan, sedangkan max-width: 100% membatasi overflow di induk yang sempit. height: auto mempertahankan rasio aspek video. Jika Anda menentukan bingkai rasio tetap, object-fit: contain mempertahankan seluruh adegan, sementara cover mengisi bingkai dengan memotong beberapa tepi; periksa bahwa konten penting tetap terlihat.
Pemecahan masalah pemutaran dan periksa aksesibilitas
- URL File: Buka tautan video langsung dan konfirmasi bahwa file ada dan tersedia tanpa login. Periksa bahwa jalur lokal tidak disalahartikan sebagai jalur server, dan bahwa kapitalisasi nama file sesuai.
- Format dan respons: Periksa bahwa server mengirim tipe MIME video/mp4 atau video/webm yang benar dan menggunakan codec yang didukung. Panel Jaringan di alat pengembang membantu memeriksa permintaan yang gagal dan header respons.
- Autoplay: Jika menekan Putar berhasil, bedakan antara pembatasan autoplay dengan file yang rusak.
- Panduan fallback: Teks di dalam video ditujukan untuk peramban yang tidak mendukung elemen tersebut. Pada peramban modern, kegagalan pemuatan tidak secara otomatis menampilkannya sebagai pesan kesalahan. Oleh karena itu, contoh ini menempatkan tautan file dan deskripsi adegan di luar pemutar juga.
- Sediakan takarir yang akurat untuk video dengan ucapan, serta transkrip bila diperlukan. Hubungkan takarir melalui elemen track dan berkas WebVTT. Pertimbangkan deskripsi teks atau audio untuk informasi penting yang hanya disampaikan secara visual.
Lihat referensi video MDN untuk atribut dan panduan MDN tentang teks video untuk file subtitle.
