Belajar HTML #13 : Menampilkan Video di HTML

Anak Males – Yaps, kali ini kita akan belajar menampilkan video di html. Gimana caranya ? Simak tutorial html berikut ini.

Dalam tutorial sebelumnya, kita telah mempelajari bagaimana menambahkan gambar ke dalam HTML. Namun, ini masih tidak cukup karena konten di web saat ini tidak hanya terdiri dari teks dan gambar saja.

Konten lain yang dapat ditambahkan ke dalam HTML adalah audio dan video.

Video adalah medium yang menggunakan gambar gerak dan suara untuk menyampaikan pesan atau menceritakan cerita.

Video dapat dibuat dari sejumlah sumber, seperti kamera video, film, atau animasi, dan dapat ditonton melalui berbagai perangkat, seperti televisi, komputer, atau ponsel. Video sering digunakan untuk hiburan, informasi, atau komunikasi.

Cara Menambahkan Video di HTML

Untuk menambahkan video ke halaman web Anda menggunakan HTML, Anda dapat menggunakan elemen <video>. Berikut adalah contoh sederhana tentang cara menambahkan video ke halaman web Anda:

<video src="http://anakmales.com/video.mp4" controls></video>

Elemen <video> memiliki atribut src yang menentukan lokasi file video yang akan dimuat. Anda juga dapat menambahkan atribut controls untuk menampilkan kontrol video seperti tombol play/pause dan volume.

Jika Anda ingin menambahkan dukungan untuk browser yang tidak mendukung elemen <video>, Anda dapat menambahkan elemen <source> sebagai anak dari elemen <video>.

Elemen <source> memiliki atribut src yang menunjukkan lokasi file video dan atribut type yang menunjukkan tipe file video.

Anda dapat menambahkan beberapa elemen <source> dengan tipe file yang berbeda untuk menyediakan dukungan untuk lebih banyak jenis file video. Berikut adalah contoh penggunaan elemen <source>:

<video controls>
  <source src="http://anakmales.com/video.mp4" type="video/mp4">
  <source src="http://anakmales.com/video.webm" type="video/webm">
  <p>Sorry, your browser doesn't support embedded videos.</p>
</video>

Anda juga dapat menambahkan atribut lain ke elemen <video>, seperti width dan height untuk menentukan ukuran video, atribut poster untuk menampilkan gambar sebagai thumbnail sebelum video dimulai, dan atribut autoplay untuk memulai video secara otomatis saat halaman dimuat.

Sebagai contoh, berikut adalah cara menambahkan video dengan ukuran 640×480, thumbnail, dan autoplay:

<video src="http://example.com/video.mp4" controls autoplay poster="http://example.com/poster.jpg" width="640" height="480"></video>

Atribut Yang Ada di Elemen Video HTML

Elemen <video> di HTML memiliki beragam atribut yang dapat Anda gunakan untuk mengontrol bagaimana video ditampilkan di halaman web Anda. Berikut adalah daftar atribut yang tersedia:

• src: menentukan lokasi file video yang akan dimuat.
• controls: menampilkan kontrol video seperti tombol play/pause dan volume.
• autoplay: memulai video secara otomatis saat halaman dimuat.
• loop: memutar video secara berulang setelah selesai.
• muted: menonaktifkan suara video.
• preload: mengontrol bagaimana video dimuat saat halaman dimuat. Nilai auto akan memuat video secara otomatis, metadata hanya akan memuat metadata video, dan none tidak akan memuat video sama sekali.
• poster: menampilkan gambar sebagai thumbnail sebelum video dimulai.
• width dan height: menentukan ukuran video.
• playsinline: memungkinkan video dimainkan di dalam elemen <video> daripada membuka jendela video terpisah di browser.

Contoh penggunaan beberapa atribut elemen <video> dapat dilihat pada contoh yang saya sampaikan sebelumnya.

Format File Video Yang Didukung HTML

HTML5 mendukung beberapa format file video yang dapat dimuat menggunakan elemen <video>. Format yang paling umum didukung adalah MP4, WebM, dan Ogg. Namun, dukungan untuk format tertentu mungkin bervariasi tergantung pada browser yang digunakan.

Untuk memastikan dukungan yang luas, disarankan untuk menyediakan file video dalam beberapa format yang berbeda. Anda dapat menggunakan elemen <source> sebagai anak dari elemen <video> untuk menyediakan dukungan untuk beberapa format file video.

Menambahkan Subtitle Video HTML

Untuk menambahkan subtitle ke video HTML, Anda dapat menggunakan elemen <track> sebagai anak dari elemen <video>.

Elemen <track> memiliki atribut src yang menentukan lokasi file subtitle dan atribut kind yang menunjukkan jenis subtitle (misalnya, “subtitles” atau “captions”). Berikut adalah contoh penggunaan elemen <track>:

<video controls>
  <source src="http://example.com/video.mp4" type="video/mp4">
  <track src="http://example.com/subtitles.vtt" kind="subtitles" label="English" srclang="en">
</video>

Atribut label menentukan nama yang akan ditampilkan dalam menu pilihan subtitle, sedangkan atribut srclang menentukan bahasa subtitle.

Untuk menampilkan subtitle, Anda perlu memastikan bahwa browser yang digunakan menduking subtitle. Beberapa browser mungkin membutuhkan pengaturan tambahan untuk menampilkan subtitle.

Penutup

Baiklah, mungkin untuk tutorial html kali ini kita cukupkan sampai disini dulu, sampai jumpa di tutorial html lainnya.