Web Streaming : Cara Membuat VideoJs untuk Web Streaming

VideoJS adalah pemutar video (video player) sangat populer di develovers web, VideoJS adalah aplikasi multimedia (audio-video) ke halaman web dibuat menggunakan HTML5, CSS dan Javascript. VideoJS telah ada sejak 2010 dan sekarang digunakan lebih dari 100.000 situs Twitpic, anggur, Instagram, Tumblr, Dropbox, 99designs dan situs-situs lain.

Bagi Anda yang ingin membuat sebuah webcast, videojs merupakan alat yang efektif untuk dibuat. VideoJS dikenal secara sederhana namun terlihat elegan, banyak untuk berbagi topik sebagai pengguna, tetapi hal juga cukup ringan dan yang pokoknya mudah.

Nah, dalam artikel ini, saya akan berbagi cara memasang videojs aplikasi di Blogger (blogspot), cara saya ingin berbagi tidak sulit untuk dipraktikkan, selain itu, saya juga akan berbagi cara menginstal di videojs Script dalam artikel sehingga dapat digunakan untuk streaming dari server pilihan Anda. Ya, tentu saja sekarang saya akan berbagi bagaimana cara membuat VideoJs untuk Web Streaming:

Langkah 1: Insert css dan videojs javascript model blogger.

Silahkan login account dan blogger di blogger.com Anda. Kemudian masuk pada halaman blog Anda, kemudian pilih menu Template dan pilih Edit HTML dan masukkan kode berikut hanya au di atas </ head>

<link href='http://vjs.zencdn.net/5.4.6/video-js.css' rel='stylesheet'/>

Masih pada halaman menu edit html, setelah itu silahkan Anda copy kode di bawah ini setelah itu cari tag </body> lalu pastekan tepat di atas kode </body>

<script src="http://vjs.zencdn.net/5.6.0/video.js">

Apabila kode diatas tidak bekerja dengan baik atau keterangan tentang kode yang di letakkan di atas </body> tidak valid, coba Anda mengganti nya dengan kode yang sudah saya parse di bawah ini dan letakkan di atas kode </body>

&lt;script src=&quot;http://vjs.zencdn.net/5.6.0/video.js&quot;&gt;

Kemudian simpan template yang seperti biasa Anda dengan mengklik tombol simpan template atau simpan. Jika sudah berhasil lanjutkan ke langkah selanjutnya.

Langkah 2: Memasang kode html video pada postingan / artikel

Nah sekarang Silakan Anda membuat sebuah buat postingan / artikel baru. kemudian masuk pada menu html postingan,  lalu sisipkan kode-kode di bawah ini pada mode html postingan, untuk tulisan yang ditandai dengan warna merah, silahkan ganti sesuai keterangan, lalu publikasikan:

<video id="my-video" class="video-js" controls preload="auto" width="550" height="300"
poster="URL-SAMPUL-VIDEO-ANDA.JPG" data-setup="{}">
<source src="URL-VIDEO-ANDA.MP4" type='video/mp4'>
</video>

Note: Perhatikan lagi kode di atas. Sekali lagi saya ingatkan karena ini sangat PENTING. Ganti tulisan yang berwarna merah tersebut sesuai dengan data anda misalnya url sampul untuk video anda, dan juga link video anda, contoh link video: http://video.com/animasi.mp4, nah gantilah url yang berwarna merah tersebut dengan url video anda. Untuk angka yang disesuaikan kuang lebih 550 dan 300 adalah lebar dan tinggi kotak video player, untuk ukuran segitu mungkin cukup ideal.

Nah, itu saja yang bisa saya jelaskan sedikit tentang pembuatan VideoJs. Untuk Anda yang ingin mencobanya silahkan, karena semakin kita banyak berkarya, pasti akan menghasilkan dimasa mendatang.

Selamat mencoba dan SUKSES

Share this post