Cara Memasang Video JS Responsive di Blog
Pada kesempatan kali ini saya akan membagikan sebuah tips cara memasang video player yang sudah cukup terkenal selain video JW Player.
Setelah pada postingan terdahulu kita membahas cara Membuat Multi Tab Streaming Video Responsive di Blogger, sekarang kita membahas bagaimana memasang video js di blogger.
Video JS merupakan salah satu media player video HTML yang open source yang menggunakan bahasa javascript. Tentunya sobat sekalian sudah pernah mendengar player video js ini. Selain keren dan simple video yang sobat pasang nantinya akan tampil secara responsive.
Pemasangan video js ini sedikit berbeda, pada umumnya dalam memasang video js sobat memerlukan CDN video js nya yang bisa sobat dapatkan di Situsnya.
Namun jika sobat mengikuti tutorial sederhana ini sobat tidak perlu kemana-mana cukup baca sampai selesai saja.
Bagi sobat yang tertarik untuk menerapkan di blog sobat simak langkah langkah cara pemasangan video js responsive di blogger.
1. Langkah pertama klik Tema
» Edit HTML, Letakkan kode dibawah ini di atas kode </head>. Gunakan Ctrl+F untuk mempercepat pencarian.<link href="https://cdn.statically.io/gh/ryan-lee59/player.css/master/tamboenmanplayer.css" rel="stylesheet"></link>
<script>
$(document).ready(function(){
videojs("example_video_1").ready(function(event){
var myPlayer = this;
myPlayer.on("ended", function(){
alert("video ended");
});
});
});
</script>2. Selanjutnya letakkan kode di bawah in sebelum kode
]]></b:skin>..video-js .vjs-control-bar { display: block; }
@font-face {
font-family: 'VideoJS';
src: url('https://vjs.zencdn.net/f/1/vjs.eot');
src: url('https://vjs.zencdn.net/f/1/vjs.eot?#iefix') format('embedded-opentype'),
url('https://vjs.zencdn.net/f/1/vjs.woff') format('woff'),
url('https://vjs.zencdn.net/f/1/vjs.ttf') format('truetype');
}3. Selanjutnya cari kode
</body>. selanjutnya letakkan kode dibawah ini diatas kode </body>.<script src="https://vjs.zencdn.net/4.3.0/video.js"></script>4. Selanjutnya adalah langkah terakhir kita menulis sebuah postingan dalam mode penulisan HTML, masukkan kode dibawah ini
<div class="video-js-box">
<video class="video-js vjs-default-skin" controls="" height="360px" id="example_video_1" poster="URL Gambar Kalian" preload="none" width="100%">
<source src="URL Video Kalian" type="video/mp4"></source>
<source src="URL Video Kalian" type="video/webm"></source>
</video>
</div>
Sekarang posting artikel sobat tersebut, dan lihat hasilnya. Jika sobat masih ada yang kurang paham silahkan bertanya melalui kolom komentar.
Untuk demo silahkan sobat klik demo button dibawah ini untuk melihat hasil dari tutorial diatas.
Harap di ingat untuk url nya harus url yang direct, jadi untuk video yang dari youtube dan google drive sepertinya tidak bisa pakai video js. oh ya untuk video youtube dan google drive sepertinya sobat harus baca postingan Membuat Multi Tab Video Streaming Responsive di Blogger.
Jika sobat masih ada yang kurang paham seilahkan bertanya melalui kolom komentar dibawah. Semoga postingan ini bermanfaat bagi sobat semua dan selamat mencoba.
