Video HTML

Ada banyak cara untuk memainkan video di HTML.

Contoh

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

Coba sendiri

Masalah, masalah, dan cara pemecahannya

Memainkan video di HTML bukanlah hal yang mudah!

Anda perlu memahami banyak teknik untuk memastikan file video anda dapat dimainkan di semua pelayar (Internet Explorer, Chrome, Firefox, Safari, Opera) dan semua perangkat (PC, Mac, iPad, iPhone).

Dalam bab ini, CodeW3C.com menyumarsi masalah dan cara pemecahannya untuk anda.

Gunakan tag <embed>

Fungsi tag <embed> adalah untuk menyematkan elemen multimedia di halaman HTML.

Kode HTML di bawah ini menunjukkan video Flash yang disematkan di halaman web:

Contoh

<embed src="movie.swf" height="200" width="200"/>

Coba sendiri

Masalah

  • HTML4 tidak dapat mengenal tag <embed>. Halaman anda tidak dapat disahkan.
  • Jika pelayar tidak mendukung Flash, video akan gagal dimainkan.
  • iPad dan iPhone tidak dapat memaparkan video Flash.
  • Jika anda mengkonversi video ke format lain, ia masih belum dapat dimainkan di semua pelayar.

Gunakan tag <object>

Fungsi tag <object> adalah untuk menyematkan elemen multimedia di halaman HTML.

Blok HTML di bawah ini menunjukkan video Flash yang disematkan di halaman web:

Contoh

<object data="movie.swf" height="200" width="200"/>

Coba sendiri

Masalah

  • Jika pelayar tidak mendukung Flash, video akan gagal dimainkan.
  • iPad dan iPhone tidak dapat memaparkan video Flash.
  • Jika anda mengkonversi video ke format lain, ia masih belum dapat dimainkan di semua pelayar.

Gunakan tag <video>

Tag <video> adalah tag baru dalam HTML 5.

Tugasan tag <video> adalah untuk menyisipkan elemen video di halaman HTML.

Blok HTML berikut akan menunjukkan video yang disisipkan ke halaman web dalam format ogg, mp4, atau webm:

Contoh

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
Pelayar anda tidak menyokong tag video.
</video>

Coba sendiri

Masalah

  • Anda mesti mengkonversi video ke banyak format yang berbeza.
  • Elemen <video> tidak aktif di pelayar lama.
  • <video> elemen tidak dapat disahkan melalui HTML 4 dan XHTML.

Pemecah HTML yang terbaik

HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

Coba sendiri

Dalam contoh yang di atas digunakan 4 format video yang berbeza. Elemen <video> HTML 5 akan mencuba untuk memainkan video dalam format mp4, ogg, atau webm. Jika semua gagal, maka akan kembali ke elemen <embed>.

Masalah

  • Anda mesti mengkonversi video ke banyak format yang berbeza
  • <video> elemen tidak dapat disahkan melalui HTML 4 dan XHTML.
  • <embed> elemen tidak dapat disahkan melalui HTML 4 dan XHTML.

Keterangan:Gunakan <!DOCTYPE html> (HTML5) untuk memecahkan masalah pengesahan.

Pemecah Youku

Paling mudah cara untuk menunjukkan video di HTML adalah melalui laman web video seperti Youku.

Jika anda mahu memainkan video di halaman web, anda boleh memuat naik video ke laman web video seperti Youku, dan lalu masukkan kod HTML di halaman web anda untuk memainkan video:

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

Coba sendiri

Menggunakan tautan

Jika halaman web mengandung tautan ke berkas media, sebagian besar peramban akan menggunakan aplikasi bantuan untuk memainkan berkas.

Kode potongan berikut menunjukkan tautan ke berkas AVI. Jika pengguna mengklik tautan, peramban akan meluncurkan aplikasi bantuan, seperti Windows Media Player, untuk memainkan berkas AVI ini:

Contoh

<a href="movie.swf">Mainkan berkas video</a>

Coba sendiri

Komentar tentang video yang disisipkan

Ketika video disertakan di halaman web, disebutkan sebagai video yang disisipkan.

Jika Anda berencana untuk menggunakan video yang disisipkan di aplikasi web, Anda harus menyadari bahwa banyak orang yang merasa video yang disisipkan mengecewakan.

Pada saat yang sama, harap dicatat bahwa pengguna mungkin telah menonaktifkan pilihan video yang disisipkan di browser.

Kami mendesak hanya untuk menyertakan mereka di tempat pengguna ingin melihat video yang disisipkan. Sebuah contoh yang positif adalah, saat pengguna membutuhkan untuk melihat video dan mengklik tautan, halaman akan dibuka dan video akan dimainkan.

Tanda Multimedia HTML 4.01

Tanda Deskripsi
<applet> Tidak disarankan.Mendefinikan applet yang disisipkan.
<embed> Tidak disarankan.Mendefinikan objek yang disisipkan (diperkenalkan di HTML5).
<object> Mendefinikan objek yang disisipkan.
<param> Mendefinikan parameter objek.

Tanda Multimedia HTML 5

Tanda Deskripsi
<video> Tanda menandai suara, seperti musik atau aliran audio lainnya.
<embed> Tanda menandai konten yang disisipkan, seperti plugin.