Memutar video di halaman website adalah bahasan kita kali ini, dimana kita akan mencoba memutar file dengan format flv, mp4, wmv, dan lainnya di halaman website dengan bantuan html5 dan plugin javascript.
Memutar video di website kadang memang menyulitkan, namun jika sudah mengetahui plugin yang benar dan powerful maka semua akan terasa lebih mudah.
Image By: waferboard
Pada kesempatan kali ini tutorial-webdesign.com akan mencoba memutar video dengan video.js, Video.js adalah sebuah javascript dan css yang dapat memudahkan pekerjaan kita, dan sudah support html5, bahkan saat ini video.js disebuat sebagai “HTML5 Video Player” walau bisa juga kita sebut “Flash video player”.
Caranya menggunakannya cukup mudah, coba ikuti langkah-langkah berikut ini.
HTML
Buat file html dengan nama index.html, lalu diantara head dan /head tuliskan script berikut
Yang perlu dilihat disitu adalah dua buat file yaitu video-js.css dan video.js, dimana kedua file tersebut diperoleh dari website resmi video.js atau halaman github video.js
Untuk bagian body cukup tuliskan script berikut
Dapat dilihat script diatas menggunakan tag html5 yaitu video dan ditambahkan dengan data-setup dari video.js.
Anda dapat mengganti bagian berikut:
- poster: (gambar yang muncul sebelum video di mainkan).
- Autoplay: true/false.
- src: untuk PATH lokasi dan nama file.
Agar lebih mudah kita juga dapat menggenerate kode yang diinginkan.
DEMO | DOWNLOAD CODE
Sekian tutorial singkat kali ini, salam web design & development Indonesia
Image By: waferboard
[…] dua file itu digunakan untuk memutar file video dihalaman website, baca artikel sebelumnya tentang Memutar Video Dengan HTML5 jika anda […]
mantapsssss …..oea gan ane mau tanya kalau videonya di dari database gimana gan????? kasih donk tutorialnya….makasih gan sebelumnya di tunggu…
Tinggal save nama file nya, nanti tinggal tampilkan sesuai path lokasi file dan nama file yang disimpan tadi :)
Menarik tutorial yang sedang dibahas, kebetulan saya juga lagi belajar mengenai itu.
bisa dijelaskan lebih lengkap dari pembuatan index, review video tsb terus file javascript yang di include-kan apa saja, sebelumnya terima kasih banyak
Itu kan sudah dijelaskan dengan cukup lengkap, silahkan di download saja script nya kalau masih bingung, dan coba di baca script nya, mudah-mudahan nanti akan mengerti :)
makasih kak tutorial nya
[…] Memutar video di website dengan html5 […]
Mau tanya nih, bagaimana caranya jika kita ingin membuat beberapa thumbnail video streaming yang source videonya ambil dari streaming, misal video src=h*tp://ipAdress1:portNumber, h*tp://ipAdress2:portNumber, h*tp://ipAdress3:portNumber dst
Coba ini http://odino.org/ffmpeg-get-a-thumbnail-from-a-video-with-php/
Mas kalau versi MKV bisa gak ya ?
coba aja
script yang diatas kan cuma 1 video..
gimana caranya supaya bisa memutar video secara bersamaan??
karena sy coba pake script di atas tidak bisa..
mohon bantuannya..
mau tanya
saya sudah berhasil untuk upload video flv, tapi kok nggak bisa play ya…
malah muncul icon buffering…
itu kenapa yah ?
saya masih pening ni cara membuat website khusus untuk MP3… bisa tolong dibantu mas… dan Juga apa saya harus perlu membuat server sendiri untuk file2 saya… ?
Kalau bisa ya buat server sendiri agar file nya bisa leluasa untuk di manage. Kalau di server orang lain kalo server nya mati, atau terjadi data yang hilang kita akan sulit jadinya.
saya kebingungan buat app android yang suport php. misal saya punya tv servernya xxxx/indonesia/rcti.php,, jadi in ke mp4, mov, fly gmana ya mas solusinya ?? makasih