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>
0 komentar:
Post a Comment