Cara Mudah Pasang Video JS Responsive di Blogspot

Cara pasang video js di blog - Halo sobat blogger, semoga hari ini jauh lebih baik dari hari-hari kemarin. Dalam kesempatan kali ini seperti biasa saya akan berbagi sedikit pengetahuan tentang bagaimana cara memasang video di blogspot dengan menggunakan media player terkenal dan gratis pula, yapssss Video JS. Pernah denger dong ya, selain dari media player JW Player yang keren namun video js juga tidak kalah keren kok.

Dalam hal ini saya hanya akan berbagi cara pemasangannya saja, perihal kustomisasi atau utak-atik dalam mempercantik tampilannya mungkin akan di bahas di lain artikel ya.

Selain keren dan simple, video yang kalian pasang juga nantinya akan tampil secara responsive lho. Nih kalo gapercaya saya kasih review-nya.

Video JS di Blogspot Keren

Gimana ? tertarik kan untuk membuatnya. Ok simak selengkapnya.

Oh iya, pemasangan video js ini akan sedikit berbeda dari blog-blog lain yang membahas sama tentang cara memasang video js di blog. Umumnya dalam memasang video js kalian memerlukan CDN videojs nya yang bisa kalian dapatkan di https://videojs.com. Namun jika kalian mengikuti tutorial sederhana ini kalian tidak perlu kemana-mana cukup baca sampai selesai saja.

Pertama
Copy kode link css dan javascript di bawah ini tepat di atas kode </head> jika bingung dimana ada kode head kalian bisa Login Blogger > Template > Edit HTML > Cari </head> gunakan CTRL + F untuk memudahkan dalam pencarian.

<link href='https://cdn.rawgit.com/catatan-pelupa/tutor/0c8d3ec5/player.css' rel='stylesheet'/>
<script>
$(document).ready(function(){
	videojs(&quot;example_video_1&quot;).ready(function(event){
	  var myPlayer = this;     
	  myPlayer.on(&quot;ended&quot;, function(){
      alert(&quot;video ended&quot;);
	  });
   }); 	
});
</script>

Masih dalam mode Edit HTML, sekarang cari tag ]]></b:skin> lalu pastekan kode css di bawah ini tepat di atas tag ]]></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');
  }

Selanjutnya kalian cari tag </body> pastekan kode js di bawah ini tepat di atas tag tersebut.

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

Nah jika langkah-langkah di atas sudah berhasil kalian lakukan, sekarang adalah langkah terakhir, yakni pemanggilan atau pemasangannya nih di postingan.

Baca Juga

Ok sekarang kita buat postingan atau halaman baru, pastikan kalian dalam mode HTML ya dan pastekan kode di bawah ini.

<div class="video-js-box">
<video id="example_video_1"  class="video-js vjs-default-skin" 
width="100%" 
height="360px" 
poster="URL Gambar Kalian" controls preload="none" >
				
<source src="URL Video Kalian" type='video/mp4' />
    <source src="URL Video Kalian" type='video/webm' />		
</video>
</div>   

Sudah di coba? berhasil ga? pastinya berhasil yeekan. Beberapa atribut yang saya tandai di atas sepertinya kalian sudah paham, dimana yang pertama untuk mengatur ukuran video dan selebihnya adalah pemasangan URL baik poster maupun URL videonya.

FYI: Source video bisa kalian isi satu saja misalnya format Mp4, mau keduanya juga ga masalah kalau kalian memiliki video dengan format Mp4 dan Webm, satu lagi! URL video harus bersifat direct ya.

Jika ada yang masih bingung, bisa kita diskusikan di kolom komentar gaes.

Tweet