Tutorial HTML/CSS 39 : Belajar Menggunakan HTML5 Video Player

Last Updated on December 27, 2022 by

HTML5 video player adalah tag pada HTML5 yang digunakan untuk menampilkan konten video di website. Seperti apa cara kerjanya?

Tidak seperti versi pendahulunya, HTML5 mempunyai banyak tags untuk mempermudah penyisipan file multimedia ke situs. Salah satunya yang populer adalah tags HTML5 audio <audio> dan HTML5 video player <video>.

Kali ini, kami akan mengajak Anda belajar HTML video programming di HTML5. Yuk langsung simak informasi selengkapnya berikut ini!

Belajar HTML5: Apa Itu HTML5 Video Player?

Pada HTML4 dan versi HTML lawas lainnya, file video hanya bisa ditambahkan pada website menggunakan plugin-plugin multimedia. Contohnya seperti Adobe Flash.

Namun tidak demikian halnya dengan HTML5. Di sini terdapat tags khusus bernama HTML5 video player yang mendukung tiga format file video untuk web, yakni MP4, Ogg dan WebM.

Tag video player memungkinkan kita menyematkan video apa saja secara langsung ke berbagai halaman situs. Anda pun dapat mencantumkan sumber video eksternal berupa file atau URL.

Belajar HTML Video Tags

Cara Menggunakan HTML5 Video Player

Anda dapat memasukkan video ke halaman website memakai sepasang tag HTML5 video player yakni <video>. Dengan catatan, Anda wajib untuk menetapkan sumber videonya juga.

Menetapkan sumber file video bisa dilakukan memakai atribut HTML src, namun lebih disarankan untuk memilih tag <source> saja. Contoh kodingnya dapat Anda simak berikut ini:

<video controls width="700" height="500">

  <source src="video01.mp4" type="video/mp4">

  <source src="video02.webm" type="video/webm">

  <source src="video03.ogg" type="video/ogg">

  Tag video tidak didukung oleh browser

</video>

Penggunaan tags <source> dianggap lebih baik karena memungkinkan Anda untuk menetapkan multiple source (sumber video lebih dari satu jenis). Sedangkan attribut src tidak.

Video player HTML5 mendukung tiga format video, yang mana ketiganya belum tentu didukung oleh setiap browser. Sejumlah browser hanya bisa menerima satu atau dua format video saja, sehingga akan lebih baik jika web Anda menyediakan pilihan file sebanyak mungkin.

Apabila video tetap gagal dimuat oleh web, maka pengunjung akan melihat teks bernama fallback content. Konten ini merupakan isi satu-satunya dalam tag <video>. Anda bisa memanfaatkannya untuk meninggalkan pesan kepada user atau mencantumkan tautan langsung ke file video.

Kustomisasi HTML5 Video Player

Setelah mempelajari cara penggunaan tag HTML5 <video>, kini waktunya melakukan sejumlah kustomisasi agar tampilan player Anda lebih user friendly.

Proses kustomisasi video player HTML5 terdiri atas dua poin, yakni menambahkan kontrol video dan menetapkan ukuran player.

1. Menambahkan Kontrol HTML5 Video Player

Panel kontrol video player memuat berbagai tombol untuk mengatur jalannya video. Misalnya seperti memulai tayangan (play), menjeda (pause), menghentikan (stop), melompati bagian tertentu (skip), beralih antar jendela (switch) hingga menampilkan video layar penuh (full screen).

Maka dari itu, menambahkan panel kontrol ke koding HTML5 Anda adalah hal yang wajib. Anda hanya perlu menyertakan atribut controls untuk melakukannya. Contohnya adalah seperti berikut:

<video controls width="700" height="500">

  <source src="video01.mp4" type="video/mp4">

  Tag video tidak didukung oleh browser

</video>

Jika video Anda memiliki suara, maka secara otomatis panel kontrol HTML5 akan menyediakan opsi modifikasi volume suara (up or down volume), atau bahkan membisukannya (mute).

Kehadiran tombol-tombol pengatur pemutaran video ini tidak hanya penting untuk meningkatkan kenyamanan pengguna, tetapi juga meningkatkan daya aksesibilitas web. User dari kelompok difabel (misalnya penderita epilepsi fotosensitif) akan sangat mengandalkan fitur ini.

2. Mengatur Ukuran Player HTML5

Gunakan atribute HTML height dan width untuk mengatur ukuran dari player HTML5 Anda. Secara otomatis video akan mempertahankan ukurannya dalam rasio yang sama.

Mengatur dan menetapkan ukuran player juga bermanfaat untuk menghindari terjadinya flickering (masalah layar berkedip) selama proses loading berlangsung.

Pada contoh koding belajar HTML5 di bawah, nilai atribut height (tinggi) diatur sebesar 300, dan width (lebar)-nya adalah 400:

<video controls width="700" height="500">

  <source src="video01.mp4" type="video/mp4" width="700" height="500">

  Tag video tidak didukung oleh browser

</video>

Tips Penting Belajar HTML Video Player

Berikut adalah sejumlah tips tambahan terkait penggunaan tag <video> di HTML5:

• Tambahkan atributtype jika Anda menggunakan elemen <source>. Dengan ini Anda bisa menghindari pembuangan waktu dan upaya loading karena browser pengguna secara otomatis mengabaikan format-format file yang tidak didukung.
• Anda bisa menambahkan gambar thumbnailsebelum video diputar menggunakan atribut poster.
• Anda bisa mengustomisasi tampilan video player lebih lanjut memakai CSS, seperti menambahkan pembatas (border) dan mengatur opacity.
• Browser yang mendukung HTML5 video player (komputer): Firefox, Chrome, Opera,Internet Explorer dan Safari.
• Browser yang mendukung HTML5 video player (smartphone): Firefox, Chrome, Opera,dan Safari.

Itulah dia pembahasan seputar HTML5 video player untuk menambahkan file video dan film ke website tanpa plugin eksternal. Semoga informasi di atas bermanfaat bagi Anda, ya. Selamat mencoba!

Temukan lebih banyak artikel seri belajar HTML5 maupun bahasa pemrograman lainnya hanya di CODEKEY. Klik https://codekey.id/ sekarang juga untuk langsung belajar gratis. Sampai bertemu lagi!