Background Image

Postingan

Menampilkan Video dan Audio di HTML

Media di HTML (video, audio, iframe) memungkinkan tampilan multimedia interaktif, dengan src sebagai sumber dan controls sebagai kunci kendali pengguna.

Gambar Menampilkan Video dan Audio di HTML
31 Juli 2025 11:58 Dinda Sintia HTML

Embed Media: Menampilkan Video dan Audio di HTML

Menyematkan (embedding) media seperti video dan audio langsung ke halaman web Anda dapat meningkatkan pengalaman pengguna secara signifikan. HTML5 memperkenalkan elemen-elemen khusus yang memudahkan proses ini, tanpa memerlukan plugin pihak ketiga seperti Flash.

1. Menampilkan Video dengan Tag <video>

Tag <video> digunakan untuk menyematkan file video. Ini adalah cara yang fleksibel untuk memutar video langsung di browser.

Atribut Penting untuk <video>:

  • src: Menentukan URL atau jalur ke file video.
  • controls: Atribut boolean. Jika ada, ini akan menampilkan kontrol pemutar video bawaan browser (play/pause, volume, durasi, fullscreen). Sangat disarankan untuk aksesibilitas.
  • autoplay: Atribut boolean. Jika ada, video akan otomatis diputar saat halaman dimuat. Gunakan dengan hati-hati, karena dapat mengganggu pengguna dan banyak browser memblokir ini untuk meningkatkan pengalaman.
  • loop: Atribut boolean. Jika ada, video akan diputar ulang secara terus-menerus setelah selesai.
  • muted: Atribut boolean. Jika ada, audio video akan dibisukan secara default. Sering digunakan bersama autoplay untuk menghindari gangguan.
  • poster: Menentukan URL gambar yang akan ditampilkan sebagai thumbnail atau frame pratinjau sebelum video diputar.
  • width dan height: Menentukan lebar dan tinggi pemutar video dalam piksel.

Penggunaan Tag <source> untuk Format Berbeda:

Browser yang berbeda mendukung format video yang berbeda (misalnya, MP4, WebM, Ogg). Untuk memastikan kompatibilitas maksimal, Anda bisa menyediakan beberapa format video di dalam tag <video> menggunakan tag <source>. Browser akan memilih format pertama yang didukungnya.

<video controls width="640" height="360" poster="thumbnail-video.jpg">

    <source src="video-keluhan.mp4" type="video/mp4">

    <source src="video-keluhan.webm" type="video/webm">

    <p>Browser Anda tidak mendukung tag video HTML5.</p>

</video>

Teks di antara <video> dan </video> akan ditampilkan jika browser tidak mendukung tag <video>.

2. Menampilkan Audio dengan Tag <audio>

Tag <audio> digunakan untuk menyematkan file audio. Mirip dengan tag <video>, ini memungkinkan pemutaran audio langsung di halaman web.

Atribut Penting untuk <audio>:

  • src: Menentukan URL atau jalur ke file audio.
  • controls: Atribut boolean. Jika ada, ini akan menampilkan kontrol pemutar audio bawaan browser (play/pause, volume, dll.). Sangat disarankan.
  • autoplay: Atribut boolean. Otomatis memutar audio saat halaman dimuat. Gunakan dengan sangat hati-hati, karena sangat mengganggu.
  • loop: Atribut boolean. Memutar ulang audio secara terus-menerus.
  • muted: Atribut boolean. Membisukan audio secara default.
  • preload: Menentukan cara browser harus memuat file audio saat halaman dimuat.
    • none: Tidak memuat audio saat halaman dimuat.
    • metadata: Memuat hanya metadata (durasi, dll.).
    • auto: Memuat seluruh file audio.

Penggunaan Tag <source> untuk Format Berbeda:

Sama seperti video, Anda bisa menyediakan beberapa format audio (misalnya, MP3, WAV, Ogg) di dalam tag <audio> menggunakan tag <source> untuk kompatibilitas browser yang lebih luas.

<audio controls preload="metadata">

    <source src="rekaman-suara-keluhan.mp3" type="audio/mpeg">

    <source src="rekaman-suara-keluhan.ogg" type="audio/ogg">

    <p>Browser Anda tidak mendukung tag audio HTML5.</p>

</audio>

3. Menyematkan Video dari Platform Eksternal (YouTube, Vimeo)

Untuk video dari platform seperti YouTube atau Vimeo, Anda biasanya akan menggunakan kode <iframe> yang disediakan oleh platform tersebut. Ini karena platform tersebut menyediakan pemutar video yang sudah dioptimalkan, termasuk streaming adaptif, analitik, dan fitur-fitur lainnya.

  • Cari opsi "Share" atau "Embed" pada video di YouTube/Vimeo.
  • Salin kode <iframe> yang diberikan.

Contoh Embed YouTube:

<iframe

    width="560"

    height="315"

    src="https://www.youtube.com/embed/VIDEO_ID_ANDA"

    title="YouTube video player"

    frameborder="0"

    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

    referrerpolicy="strict-origin-when-cross-origin"

    allowfullscreen>

</iframe>

Ganti VIDEO_ID_ANDA dengan ID video YouTube yang sebenarnya.

Catatan Penting untuk Media Embed:

  • Ukuran File: File media (video/audio) bisa sangat besar. Optimalkan ukuran file untuk waktu pemuatan yang lebih cepat.
  • Responsivitas: Untuk memastikan pemutar video/audio menyesuaikan dengan ukuran layar perangkat yang berbeda, gunakan CSS (misalnya, max-width: 100%; height: auto;). Untuk <iframe> dari YouTube/Vimeo, Anda mungkin perlu membungkusnya dalam <div> dengan CSS khusus untuk rasio aspek.
  • Aksesibilitas: Selalu gunakan atribut controls agar pengguna memiliki kendali penuh atas pemutaran media. Pertimbangkan untuk menyediakan transkrip untuk audio atau subtitle untuk video.
  • Hak Cipta: Pastikan Anda memiliki hak untuk menggunakan media yang Anda sematkan.

Dengan menggunakan tag <video> dan <audio> (atau <iframe> untuk media eksternal), Anda dapat dengan mudah memperkaya halaman web Anda dengan konten multimedia yang menarik.

# HTML # Tutorial

Postingan Terkait