Cara Memasang Video JS Responsive di Blogger

Video JS merupakan salah satu media player video HTML yang open source yang menggunakan bahasa JavaScript. Tentunya Anda pasti sudah mendengar player video JS ini, selain simple video yang Anda pasang akan tampil responsive.

Pemasangan video JS ini sedikit berbeda, pada umumnya dalam pemasang video JS Anda memerlukan CDN video JS yang bisa Anda dapatkan disini.

Bagi Anda yang tertarik untuk menerapkannya di blog atau website, simak cara dan langkah-langkah pemasangan dibawah ini:

1. Langkah pertama klik Tema > Edit HTML, letakan kode dibawah ini tepat diatas kode </head> atau gunakan CTRL+F untuk mempercepat pencarian

<link href="https://cdn.statically.io/gh/ryan-lee59/player.css/master/namasitusanda.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. Letakan kode dibawah ini 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. Kemudian cari kode </body> lalu letakan kode berikut tepat di atas kode </body>

<script src="https://vjs.zencdn.net/4.3.0/video.js"></script>

4. Langkah terakhir menulis sebuah postingan dalam mode HTML, masukan 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>

Itulah cara membuat dan memasang video JS responsive di blogger. Semoga bermanfaat.

Cara Memasang Video JS Responsive di Blogger

Comments