MEMUTAR VIDEO DI HTML 5

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 /headtuliskan script berikut

1	<link rel="stylesheet" href="video-js.css">

2	<script src="video.js"></script>

3	<link rel="stylesheet" href="style.css">

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

1	<video id="video1" class="video-js vjs-default-skin" width="480" height="320"

2	poster="http://www.tutorial-webdesign.com/wp-content/themes/nurumah/img/logo-bg.png"

3	data-setup='{"controls" : true, "autoplay" : false, "preload" : "auto"}'>

4

5	<source src="funny-video.flv" type="video/x-flv">

6	<source src="funny-video.mp4" type='video/mp4'>

7

</video>

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.