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 pemecahan

Memainkan video di HTML bukanlah hal yang mudah!

Anda perlu menguasai banyak teknik untuk memastikan bahwa 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 menyumarkannya masalah dan cara pemecahan.

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>. Laman anda tidak dapat disahkan.
  • Jika pelayar tidak mendukung Flash, video tidak dapat 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 tidak dapat 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.

Tugas bawaan tag <video> adalah menyematkan elemen video di halaman HTML.

HTML fragmen di bawah ini akan menampilkan video yang disematkan di 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" />
Browser anda tidak mendukung tag video.
</video>

Coba sendiri

Masalah

  • Anda mesti mengkonversi video ke berbagai format yang berbeda.
  • Elemen <video> tidak berfungsi di browser lama.
  • <video> elemen tidak dapat melalui pengesahan HTML 4 dan XHTML.

Penyelesaian 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

Pada contoh di atas digunakan 4 format video yang berbeda. Elemen <video> HTML 5 akan mencoba memainkan video dalam format mp4, ogg, atau webm. Jika gagal, akan kembali ke elemen <embed>.

Masalah

  • Anda mesti mengkonversi video ke berbagai format yang berbeda
  • <video> elemen tidak dapat melalui pengesahan HTML 4 dan XHTML.
  • <embed> elemen tidak dapat melalui pengesahan HTML 4 dan XHTML.

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

Penyelesaian Youku

Cara paling mudah untuk menampilkan video di HTML adalah menggunakan laman web video seperti Youku.

Jika anda mahu memainkan video di halaman web, anda boleh muat naik video ke laman web video seperti Youku, dan lakukan pemasangan kode 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 inline

Ketika video disertakan di halaman web, disebutkan sebagai video inline.

Jika Anda berencana untuk menggunakan video inline di aplikasi web, Anda harus menyadari bahwa banyak orang merasa video inline menyusahkan.

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

Kami memberikan perekomendasan terbaik adalah hanya menempatkan di tempat pengguna ingin melihat video inline. Sebuah contoh yang positif adalah, ketika pengguna membutuhkan untuk melihat video dan mengklik tautan, halaman akan dibuka dan video akan dimainkan.

Tanda Multimedia HTML 4.01

Tanda Deskripsi
<applet> Tidak disokong.Mendefinikan applet yang disertakan.
<embed> Tidak disokong.Mendefinikan objek yang disertakan. (Diperbolehkan di HTML5)
<object> Mendefinikan objek yang disertakan.
<param> Mendefinikan parameter objek.

Tanda Multimedia HTML 5

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