Pengalaman adalah guru terbaik, masih belajar dari pengalaman kali ini saya akan berbagi pengalaman dalam membuat video player local pada website (not embed seperti youtube). Setelah cari sana sini dan review kesana kemari akhirnya saya memilih untuk menggunakan sebuah plugin yang menurut saya memiliki user in...

Membuat Video Player dengan PHP dan Javascript

Pengalaman adalah guru terbaik, masih belajar dari pengalaman kali ini saya akan berbagi pengalaman dalam membuat video player local pada website (not embed seperti youtube). Setelah cari sana sini dan review kesana kemari akhirnya saya memilih untuk menggunakan sebuah plugin yang menurut saya memiliki user interface yang bagus dan tentunya mudah untuk diterapkan. Apakah itu? Video.js

Ya, Video.js merupakan library javascript dan css yang dapat mempermudah kita untuk bekerja dan membangun HTML5 video. Video.js juga dikenal sebagai HTML5 video player. Cukup melakukan beberapa langkah, maka kita sudah dapat membuat video player yang aduhai.

 Sebelum kita masuk ke tahap coding, anda download dahulu pluginnya disini

Setelah di download, silahkan copy kan ke direktori website.

 

Pertama kita buat file index.php, masukkan kode berikut diantara elemen <head></head>:

<script type="text/javascript" src="video.js"></script>
<link rel="stylesheet" href="video-js.css">
<script>
  videojs.options.flash.swf = "video-js.swf"
</script>

Ini adalah bagian yang penting untuk dapat menggunakan plugin video.js, pastikan file-file yang di include diatas terbaca.

Kemudian kita tambahkan kode html 5 video berikut pada elemen <body></body>:

<video id="example_video_1" class="video-js vjs-default-skin"
  controls preload="auto" width="640" height="264"//tentukan tinggi dan lebar video player
  poster="http://video-js.zencoder.com/oceans-clip.png"//cover video pada tampilan awal sebelum video play
  data-setup='{"example_option":true}'>
 <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />//isi dengan directori video yang ingin diputar(mp4)
 <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />//isi dengan directori video yang ingin diputar(webm)
 <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />//isi dengan directori video yang ingin diputar(ogv)
 <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>

Atribut 'data-setup'  secara otomatis mengatur video saat halaman siap, dan membaca pilihan (dalam format JSON) atribut (lihat opsi). 

Atribut 'ID' harus unik untuk setiap video yang akan diputar dalam satu halaman.

Atribut 'class' terdiri dari 2 kelas:

  • video-js  untuk fungsionalitas video player seperti fullscreen dan subtitle
  • vjs-default-skin untuk mengatur tema default HTML control, yang dapat dihapus atau diganti untuk membuat desain kontrol kita sendiri.

Secara default, tombol play  terletak di sudut kiri atas sehingga tidak menutupi bagian dari cover video. Jika kalian lebih memilih untuk menempatkan tombol play tepat berada tengah, kalian dapat menambahkan class vjs-big-play-centered pada elemen video player yang dibuat. Sebagai contoh:

<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
  controls preload="auto" width="640" height="264"
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup='{"example_option":true}'>
  ...
</video>

Hasilnya akan nampak seperti berikut:

Selamat mencoba...


About Author

Dimas Agung Noviyanto


Comment & Discussions