Membuat Web Video Player dengan Loading Cepat

Share:
web video player script

Hello World! Pada suatu halaman website, video merupakan elemen tambahan yang berfungsi sebagai pendukung dari isi pada suatu laman web tersebut. Dulu, video disisipkan pada halaman web menggunakan Flash Player, sehingga pengunjung yang ingin memutar video diharuskan mengunduh plug-in terlebih dahulu. Selain itu, memutar video menggunakan Flash kinerja komputer dan kecepatan menjadi sangat lamban. Nah, bagaimana sih caranya biar memutar video dapat lebih cepat?

Pada HTML5, ada tag baru ditambahkan, yaitu tag <video>. Tag ini berfungsi untuk menyisipkan dan memutar video pada sebuah halaman website tanpa menggunakan plug-in apapun, murni menggunakan web browser. Akan tetapi, tidak semua web browser mendukung tag <video> (HTML5). Browser yang mendukung HTML5 dan biasa digunakan adalah Google Chrome (dan berbagai web browser lainnya yang berbasis Chrome) dan Mozilla Firefox.

Tag pada HTML5 ini diklaim memiliki kinerja yang lebih baik daripada penggunaan plug-in flash. Dengan menggunakan tag html ini loading video akan lebih cepat dan tidak membuat komputer lag ketika memutar video dan melakukan multi-window-tasking. Untuk membuat web video player, tuliskan kode berikut pada script website Anda.

<video>
       <source src="URL Lokasi Video.mp4" type="video/mp4">
</video>

Ganti source file dengan URL lokasi video yang ingin Anda putar. Selain itu, Anda dapat memutar berbagai macam format video, mulai dari mkv hingga 3gpp. Jika Anda ingin beda format, silakan ganti value type menjadi "video/format" (contoh: video/mkv). Anda juga bisa menambahkan atribut lain pada tag video untuk berbagai keperluan, seperti controls (untuk menambahkan kontrol pada video), autoplay (untuk memutar video secara otomatis ketika halaman di-load), loop (untuk mengulang video), dan sebagainya.

<video controls autoplay loop>
       <source src="URL Lokasi Video.mp4" type="video/mp4">
</video>

Script diatas merupakan contoh penggunaan atribut tambahan pada tag video. Hasilnya akan terlihat seperti gambar di bawah ini (dites menggunakan UC Browser; Berbasis Google Chrome).


Tampilan dari video player berbeda-beda, tergantung web browser yang digunakan. Semoga bermanfaat & Salam Koding!

No comments