Cara Memasang Link Video Dari Google Drive Pada VideoJS

Artikel ini adalah lanjutkan dari artikel saya yang sebelumnya yaitu "membuat web streaming dengan videojs di blogger" dan masih membahas mengenai topik tentang videojs player di blogger. Jika anda sudah memasang kode css dan javascript videojs pada template anda maka anda sudah bisa mengikuti tutorial kali ini, jika belum silahkan simak tutorial cara memasang videojs pada artikel saya yang sebelumnya.

Nah, untuk menjalankan sebuah video streaming menggunakan player videojs, tentu saja kita membutuhkan sebuah file video yang sudah diupload ke server, nah disini saya akan membagikan teknik/cara memasang link video dari google drive pada videojsplayer anda. Memasang hosting/server dari google drive memiliki trik khusus agar video yang anda upload dapat anda embed di videojs. Berikut ini adalah langkah-langkahnya:

Login ke google drive

Namun pertama-tema yang anda perlukan adalah sebuah akun google kemudian silahkan masuk pada halaman google drive di http://drive.google.com atau http://google.com/drive. Lalu pada beranda google drive silahkan klik new dan tambahkan sebuah folder baru, pada gambar di bawah saya membuat folder bernama K-ON:

Lalu silahkan buka folder baru yang sudah anda buat tersebut, lalu upload sebuah video dengan format MP4 kedalam folder google drive tersebut:

Pada gambar di atas saya sudah mengupload beberapa video berformat MP4, lalu perhatikan gambar yang saya lingkari warna merah, silahkan klik nama folder anda kemudian pilih "bagikan" maka akan muncul menu seperti gambar di bawah, lalu klik lanjutan:

Lalu akan muncul menu di bawah lalu ubah menjadi publik lalu klik simpan:

Setelah anda mengklik simpan maka akan terdapat url sharing untuk folder anda, kurang lebihnya urlnya adalah seperti di bawah ini:

https://drive.google.com/folderview?id=0B22v4Upu7PNhYTdFVDNX&usp=sharing

Nah, yang berwarna merah di atas adalah id untuk folder yang sudah anda buat secara publik tadi, fungsinya adalah sebagai penanda atau adress untuk file di dalam folder tersebut, sekarang kita kembali pada pemasangan html videojs pada postingan/artikel anda, perhatikan kode di bawah:

<video id="my-video" class="video-js" controls preload="auto" width="570" height="320"
poster="URL GAMBAR SAMPUL VIDEO" data-setup="{}">
<source src="https://googledrive.com/host/0B22v4Upu7PNhYTdFVDNXT/K-ON! Episode 13 - Tanukinime.com.mp4" type='video/mp4'>
</video>

Pada url yang berwarna merah di atas adalah ID folder google drive anda sedangkan yang berwarna biru adalah nama file video di dalam folder drive anda, jadi struktur untuk URLnya adalah seperti ini:

https://googledrive.com/host/kodefolder/namafile.mp4

Untuk priview/demo hasil pemasangan video dari google drive dengan videojs silahkan lihat pada artikel saya yang sebelumnya, klik di sini. Itulah cara memasang embed file dari google drive di videojs blogger, ikuti langkah-langkah di atas dengan cermat pasti anda berhasil memasang video dari google drive, sekian artikel saya kali ini, semoga dapat berguna, jika ada pertanyaan atau saran silahkan berkomentar pada halaman ini, terima kasih.

Read more

Membuat Web Streaming Dengan VideoJS Di Blogger

VideoJS adalah salah satu player video (pemutar video) yang cukup populer di kalangan develovers web, VideoJS adalah sebuah aplikasi media player (video audio) untuk halaman web yang dibuat menggunakan HTMl5, CSS, dan Javascript. VideoJS telah ada sejak tahun 2010 silam dan sampai saat ini telah digunakan lebih dari 100.000 website termasuk Twitpic, Vine, Instagram, Tumblr, Dropbox, 99designs dan web-web lainnya.

Bagi anda yang ingin membangun sebuah web streaming, videojs adalah salah tools yang bagus dan efektif untuk melaksanakannya. VideoJS terkenal dengan tampilan playernya yang sederhana namun elegant, mempunyai banyak variasi tema (tergantung pemakai), selain itu videojs juga tergolong player yang ringan dan userfriendly atau mudah untuk di gunakan.

Nah, pada artikel kali ini saya akan membagikan cara memasang aplikasi videojs di blogger (blogspot), cara yang saya bagikan ini tidak sulit untuk dipraktekan selain itu saya juga akan membagikan cara memasang script videojs di artikel sehingga bisa di gunakan untuk streaming dari server pilihan anda. Yap langsung saja saya bagikan cara dan langkah-langkahnya:

Langkah 1: Menyisipkan css dan javascript videojs pada template blogger

Silahkan login pada akun blogger anda di blogger.com, lalu masuk pada beranda blog anda, kemudian pilih menu template dan pilih edit html, setelah itu masukkan kode di bawah ini tepat di atas kode </head>

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

Untuk contoh peletakkan kode silahkan lihat gambar di bawah ini:

Masih di dalam menu edit html, setelah itu silahkan copy kode di bawah ini lalu pastekan tepat di atas kode </body>

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

Untuk contoh peletakkan kode silahkan lihat gambar di bawah ini:

Pada gambar di atas, template yang saya gunakan memberikan keterangan bahwa kode yang di letakkan di atas </body> tidak valid, jika anda mengalami hal yang serupa silahkan gunakan 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 anda seperti biasa dengan mengklik tombol save template atau simpan. Jika sudah berhasil silahkan lanjutkan ke langkah selanjutnya:

Langkah 2: Memasang kode html videojs pada postingan/artikel

Silahkan buat postingan/artikel baru, kemudian masuk pada menu html postingan, lalu masukkan kode di bawah ini pada mode html postingan, ganti tulisan yang berwarna merah 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>

Perhatikan kode di atas, ganti tulisan yang berwarna merah sesuai dengan data anda misalnya url sampul untuk video anda, dan link video anda, contoh link video: http://video.com/animasi.mp4, nah gantilah url yang berwarna merah tersebut dengan url video anda. Untuk angka 550 dan 300 adalah lebar dan tinggi kotak video player. Untuk demo hasil pemasangan videojs silahkan lihat pada kotak videojs di bawah ini:

Nah, itulah cara memasang videojs di blogger (blogspot) dengan mudah, anda bisa menyimpan video dari yotube, maupun hosting anda sendiri pada videojs. Dengan videojs ini sekarang anda sudah bisa membuilding/membangun sebuah web streaming. Sekian tutorial kali ini, cara memasukkan link video dari google drive pada videojs akan saya bahas pada artikel selanjutnya. Selamat mencoba!

Read more