Video JS di Blogspot dengan Video dari Google Drive

Cara memasang video JS di blog, memasukan video google drive pada video JS

Seperti yang kita ketahui bahwa sebuah video bisa diputar ketika kita memiliki media untuk memutarnya atau media player. Pada komputer mungkin kita sering melihat aplikasi untuk memutar video seperti VLC, Media Player Classic, GOM Player dan masih banyak lainnya.

Lantas bagaimana membuka video dalam sebuah dokumen HTML, sebetulnya kita tidak membutuhkan aplikasi seperti di PC, cukup membubuhkan sebuah elemen HTML saja. Dimana HTML sendiri menyediakan tag <video> sebagai player video kita.

Baca Juga: Implementasi Penggunaan Tag Video

Ternyata selain tag video masih banyak media player yang bisa kita jejali seperti Video JS dan JW Player, karena judulnya tentang Video JS jadi yang akan kita bahas sekarang adalah Bagaimana memasang Video JS pada Blog.

Video JS merupakan sebuah framework player yang bisa kita gunakan tanpa perlu mengeluarkan biaya sepeserpun sejauh ini. Sebuah modul javascript yang menjadikan frame video kita lebih menarik untuk dilihat. Perhatikan video di bawah ini:


Video di atas menggunakan player Video JS, gimana ? Tertarik untuk menggunakan di blog, ayo simak pemaparannya.

1. Memasang VideoJS di Blogspot

Oke, pertama kita ambil dulu modul javascript nya di situs resmi video.js. Untuk memudahkan saya ambilkan saja nih lalu simpan di template blogger kalian ya.

Pastekan kode di bawah tepat di atas tag </head>

<link href="https://vjs.zencdn.net/7.5.5/video-js.css" rel="stylesheet" />

Pastekan kode di bawah tepat di atas tag </body>

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

2. Membuat Postingan dengan VideoJS

Bagaimana memanggil modul video js ke dalam sebuah postingan blog? Video di atas merupakan contoh nyata penggunaan video js dalam sebuah postingan. Adapun kode HTML-nya bisa kalian cobain:

<video class="video-js" controls="" data-setup="{"fluid": true}"
height="400" id="example_video_1"
poster="thumbnail_kalian" preload="auto" width="100%">
<source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
</video>

Jika ingin di tambahkan subtitle bisa menambahkan elemen <track>

<video class="video-js vjs-big-play-centered" controls="" crossorigin="anonymous"
data-setup="{"fluid"=true}" height="400" id="example_video_1" poster=""
preload="auto" width="100%">
<source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
<track default="" kind="captions" label="Indonesian" 
src="https://raw.githubusercontent.com/dramabaper/new/master/rpl-witar.vtt" 
srclang="id"></track></video>

Subtitle yang digunakan harus berekstensi .vtt karena jika subtitle berekstensi .srt saya tidak yakin subtitle akan muncul di video.

3. Membuat Streaming Video dari Google Drive

Misalnya saya memiliki video yang tersimpan di google drive dengan link file:

https://drive.google.com/open?id=12uzlu-opOKgdqMbVLILR6DSbAxTgtp0x

Link tersebut tidak bisa kita masukan langsung pada elemen <source> yang terdapat pada tag <video> di atas, kalo tidak percaya cobain aja. Sejatinya video yang tersimpan di google drive disediakan fitur untuk embed video seperti ini:

<iframe src="https://drive.google.com/file/d/12uzlu-opOKgdqMbVLILR6DSbAxTgtp0x/preview" 
width="640" height="480"></iframe>

Jika kita langsung memasukkan elemen iframe tersebut pada halaman html, video pasti muncul tapi tidak bisa kita integrasikan dengan video JS.

Cara memasukan video google drive ke video JS adalah dengan membuat direct link google drive, contoh direct link google drive seperti ini:

https://drive.google.com/uc?export=download&id=12uzlu-opOKgdqMbVLILR6DSbAxTgtp0x

Setiap file google drive memiliki ID unik, artinya untuk membuat direct link cukup ganti ID nya saja, sesuai dengan ID file drive kalian.

Nah, jika link video sudah berbentuk direct. Maka, link tersebut sudah bisa kita masukkan di elemen <source>, sehingga kodingnya menjadi seperti ini:

<video class="video-js vjs-big-play-centered" controls="" crossorigin="anonymous"
data-setup="{"fluid"=true}" height="400" id="example_video_1" poster=""
preload="auto" width="100%">
<source src="https://drive.google.com/uc?export=download&id=12uzlu-opOKgdqMbVLILR6DSbAxTgtp0x"
type="video/mp4"></source>
<track default="" kind="captions" label="Indonesian"
src="https://raw.githubusercontent.com/dramabaper/new/master/rpl-witar.vtt" 
srclang="id"></track>
</video>

  Info

Direct link google drive di atas hanya berlaku untuk file <50 MB (CMIIW)

Terus gimana jika video kita lebih dari 50 MB, sejauh yang saya ketahui cara yang paling efektif saat ini adalah dengan menggunakan API (Application Programming Interface) Google Drive. Struktur link google drive dengan menggunakan API:

https://www.googleapis.com/drive/v3/files/id_drive?alt=media&key=your_api_key

id_drive sudah ada, nah API Key lantas dari mana? Kalian bisa membuatnya sendiri brader di Developers Google. Tunggu di artikel selanjutnya ya, kita akan bahas tentang bagaimana membuat API Key Google Drive untuk Streaming Video.
Karena saya baik hati jadi kalian bisa gunakan API Key yang saya sediakan (jangan tanya dari mana, pake aja wkwkwk)

https://www.googleapis.com/drive/v3/files/12uzlu-opOKgdqMbVLILR6DSbAxTgtp0x?alt=media&key=AIzaSyBXV3qGJ2rwDaxvUmAzaVpZMmn1t6PyU0E

  Catatan

Jika kita ingin menggunakan hosting google drive sebagai media source, yang harus kita pahami bahwa Google memberikan batasan (limit view) entah itu untuk streaming ataupun download. Sehingga, jika video kita mendadak tidak bisa diputar tidak menutup kemungkinan bahwa video kita sudah melewati batas limit view perharinya, tapi tenang saja esok hari juga pasti bisa lagi kok. Padahal, tempat penyimpanan atau hosting video terbaik kalian juga sudah tau yaitu Youtube ngapain masih nyari google drive sebagai hosting? video kalian ilegal ya, hehe becanda gan.

Jadi sangat mudah bukan memasang Video JS pada postingan blog, semoga apa yang saya tidak mengerti kalian bisa mengerti lah ya.