Langsung ke konten utama

Cara Membuat Video Player Berbasis Web Dengan HTML5

Pernah kita nonton video yang paling nge hits di YouTube, video yang viral banget di sosmed agan sista seperti Twitter atau Facebook, jawabannya tentu sebagian besar dari kita pernah melakukannya, namun pernah ngga kita memikirkan bagaimana video tersebut dapat di mainkan di website dan di eksekusi oleh browser?

Dengan semakin pesat nya kemajuan teknologi hardware, software , dan tentunya di barengi dengan semakin berkembangnya bahasa pemrograman membuat berbagai hal semakin bisa di lakukan. Salah satu nya adalah dengan pengembangan teknologi HTML yang saat ini telah mencapai HTML5.

Banyak sekali fitur baru yang di usung oleh HTML5, namun kali ini saya hanya akan membahas 1 saja yaitu membuat video player dengan HTML5, karena kalau di bahas semua di sini akan terlalu banyak dan panjang.

Pertama, siapkan folder yang berisi file video yang akan di tampilkan, yaelah min, ya pasti lah. Kalau gak ada video nya, gimana tutorial ini bisa di lanjutkan, hahaha. Simpanlah video satu folder dengan file .html yang akan kita buat, atau mungkin kalian masih ingat cara memanggil file yang tidak satu folder dengan file .html yang akan di buat? gunakan ../ apabila kalian menyimpannya di luar folder project atau /[nama_folder] apabila kalian menyimpan file video nya pada sub-folder dari folder project yang sudah kalian buat.
Kedua, buat file .html baru dalam folder tersebut. Nama file terserah agan sista, namun untuk pengembangan lebih lanjut di sarankan menggunakan nama file index.html. Dan berikut ini contoh kode nya:
<!DOCTYPE html>
<html>
<head>
    <title>Contoh Video Player Dengan HTML5 | Jalu Blog</title> 
</head>
<body>
    <h1>Metallica - Fuel</h1> <!--ini contoh judul -->
    <video width="720px" height="480px" controls>
        <source src="metallica_fuel.mp4" type="video/mp4">
    </video>

</body>
</html>
Nah, pada kode di atas kita menggunakan tag HTML5 <video> untuk menampilkan file video. Setting width dan height di gunakan untuk mengatur panjang dan lebar video yang akan di tampilkan. Jangan lupa untuk menambahkan "controls" pada tag video untuk menampilkan control standart dalam menampilkan menu play/pause, volume control, full screen mode, dsb. Karena, tanpa "controls" gimana cara kita akan mem-play video tersebut, wong tampilannya nanti yang ada malah blank kok.

"video/mp4" di gunakan untuk mengatur file format apa yang di include, misal source src="metallica_fuel.mkv" maka type yang di gunakan adalah "video/mkv". Bila sudah, nanti nya akan jadi seperti ini.
Cukup mudah kan cara membuatnya? Silakan kembangkan lebih kreatif menggunakan cara agan sista sendiri. Semoga bermanfaat, jangan lupa share ke teman atau grup kalian.

Komentar

Postingan populer dari blog ini

Membuat Validasi Mencocokkan Form Password Dengan Javascript

Seringkali kita dalam membuat sebuah program website membutuhkan sebuah inputan kedalam database yang berfungsi untuk di tampilkan (misal di website dinamis) maupun untuk fungsi validasi (misal login pada sebuah halaman website).

Salah satu contoh inputan yang penting dalam fungsi sebuah website dinamis adalah password. Nah, pada suatu kasus saat kita akan mengganti sebuah informasi kita pada website tersebut kita di minta untuk memasukkan password kita kembali untuk memvalidasi apakah yang mengganti informasi ini adalah asli Anda sendiri ataukah ada orang lain yang sengaja ingin mengganti informasi pribadi Anda (dalam konteks negatif, semisal akun Anda di hack).

Ada kalanya saat kita di minta memasukkan password tadi, kita disuruh mengulang untuk menulis lagi password yang sudah kita tulis sebelumnya untuk mengkonfirmasi apakah sudah benar atau belum. Misal password kita 123456, maka di form konfirmasi password juga di isi 123456 untuk menunjukkan bila password kita sudah benar, bil…

Restore Script Yang Hilang Saat Notepad++ Stop Working

Halo Agan Sista semua, gimana kabarnya? Masih semangat belajar pemrograman kan, code writer apa yang Anda gunakan saat ini? Dari sekian banyak aplikasi writer baik itu yang gratis ataupun yang berbayar, saat ini banyak yang menggunakan aplikasi salah satunya Notepad++ di karenakan selain free juga ringan di gunakan. Namun pernahkah Anda mengalami saat yang menyebalkan dimana kita sedang asik asiknya menulis kode pemrograman dan sudah dapet banyak banget sampai beratus ratus line tiba tiba aplikasi Notepad++ tersebut Stop Working?

Mungkin untuk sebagian besar aplikasi sih tidak masalah, namun menjadi masalah besar buat pengguna Notepad++ di karenakan script yang sudah agan sista tulis banyak sampai beratus ratus line tersebut tiba tiba bisa hilang tanpa jejak, nah lo. Pasti kesel kan, dimana saat itu lagi di kejar deadline lagi.
Terus bagaimana solusi nya? Sebenarnya dari aplikasi Notepad++ sendiri sudah terdapat fitur bawaan buat mem-backup script yang hilang tadi saat aplikasi menga…

Mengukur Jarak Antar Pelabuhan Menggunakan Netpas

Halo agan sista, kali ini saya akan membagikan dan mengulas sebuah software yang sangat membantu sekali buat mahasiswa yang berkaitan dengan kelautan dan transportasi laut atau agan sista yang bekerja di bidang pelaut seperti Mualim 2 / Second officer / Second mate.

Aplikasi ini bernama Netpas Distance, sebuah software yang menurut mimin keren dan lengkap sekali fitur nya yang sangat membantu pekerjaan di bidang pelayaran, makanya sebenarnya aplikasi ini di fokus kan untuk perusahaan pelayaran.

Beberapa fitur yang di sediakan memang sangat mumpuni, antara lain :

ETAAnti PiracyPorts and Distance DatabaseCoordinates to coordinates distanceWeather ServiceSea IceRouting Point (RP)(S)ECA distanceSimple estimationVessel managerVisual route on e-world map Cara Menggunakan Netpas Pertama, download aplikasi Netpas dulu disini. Setelah itu, instal pada PC agan sista masing masing sesuai instruksi sampai selesai.

Untuk bisa menggunakan aplikasi ini kita harus mendaftar dulu di website nya untuk …