HTML Academy · Pelajaran

Elemen source untuk Berbagai Format

Sediakan format fallback dengan elemen source.

Elemen source untuk Berbagai Format adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Mengapa Banyak Format?

Peramban yang berbeda mendukung kodek audio/video yang berbeda:

WebM (VP9/VP8) — Chrome, Firefox, Edge (bukan Safari)
MP4 (H.264) — semua peramban (universal)
OGG — Firefox, Chrome (bukan Safari)
OPUS — Chrome, Firefox, Edge (bukan Safari)

Elemen <source> memungkinkan Anda menyediakan beberapa format sebagai cadangan.

Elemen sumber di dalam audio

Sediakan beberapa format audio:

<audio controls>
  <!-- Browser picks the first format it supports: -->
  <source src="podcast.opus" type="audio/ogg; codecs=opus">
  <source src="podcast.ogg" type="audio/ogg; codecs=vorbis">
  <source src="podcast.mp3" type="audio/mpeg">
  <!-- Fallback text if none supported: -->
  <p>Download: <a href="podcast.mp3">podcast.mp3</a></p>
</audio>

Elemen sumber di dalam video

Sediakan beberapa format video:

<video controls width="1280" height="720" poster="thumbnail.jpg">
  <source src="tutorial.webm" type="video/webm">
  <source src="tutorial.mp4" type="video/mp4">
  <p>Your browser doesn't support HTML5 video.
     <a href="tutorial.mp4">Download the video</a></p>
</video>

Atribut type pada sumber

Atribut type memberi tahu peramban jenis MIME dan kodek:

<!-- Full MIME type with codec parameter: -->
<source src="video.webm" type="video/webm; codecs=vp9,vorbis">
<source src="video.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
<source src="audio.ogg" type="audio/ogg; codecs=vorbis">

<!-- Simplified (browser may need to probe): -->
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">

Cara Kerja Pemilihan Sumber

Peramban mengevaluasi elemen sumber secara berurutan:

Membaca type dari sumber pertama
Jika dapat memutar jenis tersebut, peramban mengunduh dan menggunakannya
Jika tidak, peramban beralih ke sumber berikutnya
Jika tidak ada sumber yang berfungsi, peramban menampilkan konten cadangan

Tempatkan format yang paling diutamakan di urutan pertama (misalnya, WebM untuk performa Chrome/Firefox).

Atribut media pada sumber

Atribut media memungkinkan Anda menyediakan format yang berbeda untuk area tampilan yang berbeda:

<video controls>
  <!-- Mobile: smaller file -->
  <source
    src="video-480.mp4"
    type="video/mp4"
    media="(max-width: 768px)"
  >
  <!-- Desktop: full quality -->
  <source
    src="video-1080.mp4"
    type="video/mp4"
  >
</video>

Urutan Format yang Disarankan

Urutan sumber yang optimal untuk kompatibilitas dan performa maksimum:

<video controls>
  <!-- AV1 in WebM: best compression, modern browsers -->
  <source src="video.av1.mp4" type="video/mp4; codecs=av01">

  <!-- VP9 in WebM: Chrome/Firefox/Edge -->
  <source src="video.webm" type="video/webm">

  <!-- H.264 in MP4: universal fallback -->
  <source src="video.mp4" type="video/mp4">
</video>

Rekomendasi Format Audio

Rekomendasi kodek audio:

OPUS dalam WebM — rasio kualitas terhadap ukuran terbaik; Chrome, Firefox, Edge
AAC dalam MP4 — universal; Safari, Chrome, Firefox, Edge
MP3 — kompatibilitas terluas; gunakan sebagai cadangan terakhir

Video Responsif dengan srcset

Untuk video, gunakan media pada sumber untuk menyesuaikan penggunaan bandwidth:

<video controls poster="thumbnail.jpg">
  <source
    src="video-720.webm"
    type="video/webm"
    media="(min-width: 1024px)"
  >
  <source
    src="video-360.webm"
    type="video/webm"
  >
  <source src="video-720.mp4" type="video/mp4" media="(min-width: 1024px)">
  <source src="video-360.mp4" type="video/mp4">
</video>

Memeriksa canPlayType

Uji dukungan kodek peramban dengan JavaScript:

const video = document.createElement('video');

console.log(video.canPlayType('video/webm; codecs=vp9'));
// '' = no, 'maybe' = possibly, 'probably' = likely yes

console.log(video.canPlayType('video/mp4; codecs=avc1.42E01E'));
// 'probably' on most modern browsers

Konten Cadangan

Selalu sertakan konten cadangan di dalam audio/video:

<video controls width="800" height="450">
  <source src="demo.webm" type="video/webm">
  <source src="demo.mp4" type="video/mp4">

  <!-- Fallback for browsers without video support: -->
  <p>
    Your browser does not support HTML5 video.
    <a href="demo.mp4">Download the video</a> instead.
  </p>
</video>

Pemeriksaan Singkat

Dalam urutan apa elemen sumber harus dicantumkan?

Ringkasan: Elemen sumber

Hal-hal penting tentang elemen sumber:

<source src type> di dalam audio/video menyediakan alternatif format
Peramban memilih sumber pertama yang cocok
Tempatkan format modern di urutan pertama; MP4/AAC sebagai cadangan universal
Sertakan teks/tautan cadangan di dalam audio/video setelah semua sumber
Gunakan media pada sumber untuk memilih video berdasarkan area tampilan

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Elemen source untuk Berbagai Format” gratis?

Ya — teks lengkap “Elemen source untuk Berbagai Format” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Elemen source untuk Berbagai Format”?

Sediakan format fallback dengan elemen source. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Elemen source untuk Berbagai Format” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke HTML Academy