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

Mengirimkan video di HTML tidak mudah!

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

Pada bab ini, CodeW3C.com menyumarkannya untuk Anda masalah dan solusi.

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 mengidentifikasi tag <embed>. Halaman Anda tidak dapat disahkan.
  • Jika peramban 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 peramban.

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

Gunakan tag <video>.

Tag <video> adalah tag baru dalam HTML 5.

Fungsi tag <video> adalah untuk menyisipkan 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 berfungsi di browser kuno.
  • <video> elemen tidak dapat dilakukan validasi HTML 4 dan XHTML.

Pemecahan HTML 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, maka akan kembali ke elemen <embed>.

Masalah

  • Anda harus mengkonversi video ke berbagai format yang berbeda
  • <video> elemen tidak dapat dilakukan validasi HTML 4 dan XHTML.
  • <embed> elemen tidak dapat dilakukan validasi 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 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 ini, 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 mendapati video yang disisipkan yang mengecewakan.

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

Kami menyarankan 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 menandai suara, seperti musik atau aliran audio lainnya.
<embed> Tag menandai konten yang disisipkan, seperti plugin.