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 solusi

Memainkan video di HTML bukanlah hal yang mudah!

Anda perlu menguasai berbagai teknik untuk memastikan bahwa file video Anda dapat dimainkan di semua browser (Internet Explorer, Chrome, Firefox, Safari, Opera) dan semua hardware (PC, Mac, iPad, iPhone).

Pada bab ini, CodeW3C.com menyumarsi masalah dan solusi 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 mengenali tag <embed>. Halaman Anda tidak dapat disahkan.
  • Jika browser tidak mendukung Flash, video tidak dapat dimainkan.
  • iPad dan iPhone tidak dapat menampilkan video Flash.
  • Jika Anda mengkonversi video ke format lain, ia tetap tidak dapat dimainkan di semua browser.

Gunakan tag <object>.

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

Kode 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 browser tidak mendukung Flash, video tidak dapat dimainkan.
  • iPad dan iPhone tidak dapat menampilkan video Flash.
  • Jika Anda mengkonversi video ke format lain, ia tetap tidak dapat dimainkan di semua browser.

Gunakan tag <video>.

Tag <video> adalah tag baru dalam HTML 5.

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

Fragment HTML berikut akan menampilkan 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" />
Browser Anda tidak mendukung tag video.
</video>

Coba sendiri

Masalah

  • Anda harus mengkonversi video ke berbagai format yang berbeda.
  • Elemen <video> tidak berfungsi di browser lama.
  • <video> elemen tidak dapat divalidasi melalui 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 memutar video dalam format mp4, ogg, atau webm. Jika semua gagal, maka akan kembali ke elemen <embed>.

Masalah

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

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

Solusi Youku

Cara paling sederhana untuk menampilkan video di HTML adalah menggunakan situs video seperti Youku.

Jika Anda ingin memutar video di halaman web, Anda dapat mengunggah video ke situs video seperti Youku, dan kemudian masukkan kode HTML di halaman web Anda untuk memutar 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 disisipkan 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, perhatikan bahwa pengguna mungkin telah menonaktifkan opsi video yang disisipkan di browser.

Pertimbangan terbaik kami adalah hanya menempatkannya di tempat pengguna ingin melihat video yang disisipkan. Sebuah contoh yang positif adalah, saat pengguna membutuhkan melihat video dan mengklik tautan, halaman akan terbuka dan video akan dimainkan.

Tag Multimedia HTML 4.01

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

Tag Multimedia HTML 5

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