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

Tanda <video> digunakan untuk menyisipkan elemen video di halaman HTML.

Blok 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" />
Pelayar anda tidak mendukung 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 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

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

Masalah

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

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

Penyelesaian Youku

Yang paling mudah untuk menampilkan video di HTML adalah melalui laman web video seperti Youku.

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

Penggunaan tautan

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

Kode potongan berikut menunjukkan tautan ke berkas AVI. Jika pengguna mengklik tautan, pelayar 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 bersambung

Ketika video disertakan di halaman web, disebut video bersambung.

Jika Anda berencana untuk menggunakan video bersambung di aplikasi web, Anda harus menyadari banyak orang yang mendapati video bersambung mengecewakan.

Sama sekali, pastikan pengguna telah menutup pilihan video bersambung di pelayar.

Pernyataan terbaik kami adalah hanya termasuknya di tempat pengguna ingin melihat video yang bersambung. Sebuah contoh yang positif adalah, ketika pengguna memerlukan untuk melihat video dan mengklik tautan, halaman akan dibuka dan video akan dimainkan.

Tanda Multimedia HTML 4.01

Tanda Deskripsi
<applet> Tidak disokong.Definisi applet yang disimban.
<embed> Tidak disokong.Definisi objek yang disimban (diperbolehkan dalam HTML5).
<object> Definisi objek yang disimban.
<param> Definisi parameter objek.

Tanda Multimedia HTML 5

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