Media Belajar Bahasa Pemrograman | by APPKEY

HTML/CSSTutorial HTML/CSS 39 : Belajar Menggunakan HTML5 Video Player

Tutorial HTML/CSS 39 : Belajar Menggunakan HTML5 Video Player

-

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?

html5 video player, belajar html video, belajar html5

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.

Artikel Terkait  Tutorial HTML/CSS 29 : Mengenal Struktur URL Web dan Fungsinya pada Website
Artikel Terkait  Tutorial HTML/CSS 29 : Mengenal Struktur URL Web dan Fungsinya pada Website

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.

Artikel Terkait  Tutorial HTML/CSS 33 : Membuat Web Workers HTML5, Mudah dan Praktis
Artikel Terkait  Tutorial HTML/CSS 2 : Text Editor HTML Terbaik untuk Belajar

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.

Artikel Terkait  Tutorial HTML/CSS 2 : Text Editor HTML Terbaik untuk Belajar
Artikel Terkait  Tutorial HTML/CSS 11 : Space HTML Tag, Cara Membuat Space pada HTML dengan Mudah

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!


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Tutorial

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang bahasa pemrograman langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Blog Post Ranking 10

Tutorial PHP 23 : Cara Membuat Messages Alert PHP

Alert box atau alert messages digunakan di situs web untuk menampilkan pesan peringatan kepada pengguna bahwa mereka telah memasukkan...

Tutorial PHP 22 : Cara Membuat Redirect PHP dengan Cepat dan Mudah

Jika Anda melakukan browsing di browser kesayangan Anda, mungkin Anda pernah melihat link yang berisikan “php redirect” atau yang...

Tutorial PHP 2 : Cara Install PHP, Langkah Awal Belajar PHP

PHP adalah bahasa pemrograman gratis dan open source. Secara teknis tidak perlu menginstal PHP: sebagian besar host web dan...

Tutorial Python 9 : Cara Membuat Looping Python

Pada artikel sebelumnya, Codekey telah menjelaskan tentang Operasi Kondisional Python yang di dalamnya menyinggung tentang percabangan dan perulangan. Belajar...

Tutorial HTML/CSS 23 : Cara Membuat Form Sederhana dengan HTML

Form memiliki peran yang sangat krusial bagi website atau aplikasi untuk menjaga sistem keamanannya. Form HTML digunakan untuk mengumpulkan...

Tutorial SQL 8 : Constraint SQL, Bagaimana Fungsi dan Penggunaannya?

Pada artikel sebelumnya Anda telah mempelajari tentang wildcard SQL, pada artikel kali ini kami akan menjelaskan tentang constraint SQL. Jika...

Tutorial Javascript 8 : Array Javascript, Panduan Lengkap Cara Membuatnya

Seperti bahasa pemrograman yang berorientasi objek lainnya, dalam JavaScript juga terdapat array. Jika Anda memiliki banyak objek yang ingin...

Tutorial SQL 20 : Mari Pelajari Cara Menggunakan Fungsi GROUP by SQL

Pada pembahasan seri Tutorial SQL ke- 20 ini, Codekey akan membahas tentang GROUP BY yang merupakan statement di dalam...

Tutorial Python 7 : Python String Format dan Cara Mudahnya

Anda ingin belajar Python dan ingin menjadi ahli dalam bahasa pemrograman Python? Mari belajar bersama Codekey! Pada pembahasan kali...

Tutorial Python 8 : Langkah Mudah Membuat Operasi Kondisional pada Python

Pada pembahasan sebelumnya, Codekey telah menjelaskan kepada Anda tentang pengoperasian string pada Python mulai dari menggabungkan hingga memanipulasi string...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya