Catatan kali ini akan membahas mengenai cara membuatcara menampilkan video di browser menggunakan HTML 5. Pada catatan kali ini saya akan menggunakan sebuah librari yaitu video-js. Librari ini yang nantinya akan kita gunakan untuk menjalankan video. Ikuti lah langkah-langkahnya berikut ini.
Demo
Sebelum masuk ke tutorialnya. Mungkin ada yang mau lihat demonya terlebih dahulu. Silahkan klik link berikut untuk melihat demonya : Demo.
STEP 1 – PERSIAPAN
Berikut ini adalah hal-hal yang harus dipersiapkan :
- Download librari Video-JS nya, klik link berikut ini : Download.
- Buat sebuah folder dengan nama video_html, lalu simpan pada folder xampp/htdocs/.
- Buat sebuah folder dengan nama video, lalu simpan pada folder xampp/htdocs/video_html/.
- Buat sebuah folder dengan nama css, lalu simpan pada folder xampp/htdocs/video_html/.
- Buat sebuah folder dengan nama js, lalu simpan pada folder xampp/htdocs/video_html/.
- Buat sebuah folder dengan nama image, lalu simpan pada folder xampp/htdocs/video_html/.
- Ekstrak file librari VideoJs.zip yang telah didownload tadi.
- Copy and paste file video.js dan video-js.swf yang telah didownload ke folder xampp/htdocs/video_html/js/.
- Copy and paste file video-js.css dan video-js.min.css yang telah didownload ke folder xampp/htdocs/video_html/css/.
- Copy video yang akan di jalankan ke folder xampp/htdocs/video_html/video/.
- Copy gambar [bebas gambar apa saja] untuk menjadi thumbnail dari video yang akan di jalankan ke folder xampp/htdocs/video_html/image/.
STEP 2 – VIEW DATA
Selanjutnya kita akan membuat sebuah file php yang berfungsi untuk menampilkan video yang akan di mainkan. Buat sebuah file baru dengan nama index.php, lalu simpan pada folder xampp/htdocs/video_html/. Berikut ini tampilan dan kodenya :
Facebook Twitter Google+