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 memahami banyak 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 menyimpulkan masalah dan solusi untuk Anda.

Pakai tag <embed>.

Fungsi tag <embed> adalah menempatkan 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 mengidentifikasi 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.

Pakai tag <object>.

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

Fragment 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.

Pakai tag <video>.

<video> adalah tag baru dalam HTML 5.

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

Berikut adalah bagian HTML yang 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 efektif di browser lama.
  • <video> elemen tidak dapat dilakukan 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 semua gagal, akan kembali ke elemen <embed>.

Masalah

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

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

Solusi Youku

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

Jika Anda ingin memainkan video di halaman web, Anda dapat mengunggah video ke situs video seperti Youku, dan kemudian masukkan 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 yang disisipkan

Ketika video disisipkan di halaman web, disebut video yang disisipkan.

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

Pada saat yang sama, pastikan bahwa pengguna mungkin telah menonaktifkan opsi video yang disisipkan di browser.

Sarangan terbaik kami adalah hanya menempatkannya di tempat pengguna ingin melihat video yang disisipkan. Contoh yang positif adalah, ketika pengguna membutuhkan melihat video dan mengklik tautan, halaman akan terbuka dan video akan dimainkan.

Tag Multimedia HTML 4.01

Tag 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.

Tag Multimedia HTML 5

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