Cara Mudah Membuat Video Player Local maupun Online Terhubung dengan Google Drive Menggunakan VIDEOJS

Cara Mudah Membuat Video Player Local maupun Online Terhubung dengan Google Drive Menggunakan VIDEOJS

Videojs adalah sebuah framework video player berbasis web html yang dapat memutar video pada sebuah website. Plaform ini banyak digunakan untuk memutar video di berbagai jenis konten seperti onboard intertainment, website edukasi, sosial media maupun iklan komersial.

Seperti yang disebutkan di atas tentang Onboard Intertainment adalah konten yang dapat digunakan sebagai media hiburan di berbagai transportasi umum seperti kareta api dan bus. Biasanya di setiap penumpang kereta api maupun bus ada menyediakan media hiburan intertainment yang dapat memutar video yang dapat di tonton secara offline.

Sebagai website edukasi platform ini dapat dimanfaatkan sebagai e-learning offline yang dapat digunakan di sebuah perpustakaan dalam memberikan sebuah edukasi dalam bentuk video yang dapat di akses secara offline. Ada juga dijadikan sebagai media iklan komersial yang ditayangkan secara terus menerus.

Hal yang menarik dari videojs ini adalah platform gratis yang dapat digunakan oleh siapa saja, official website bisa kunjungi di videojs.com. Berikut ini sampel atau contoh video yang terbubung dengan google drive:

1. Membuat Videojs 


Pertama sekali buatlah sebuah halaman website sederhana dengan html, dapat dicontohkan pada sampel yang disediakan oleh videojs seperti dibawah ini, link sampel videojs https://videojs.com/getting-started/

Simpan dengan nama play.html bisa di localhost maupun di document

2. Upload Video dan Share Link

Silakan upload terlebih dahulu file video ke Google drive. Bagaimana caranya dapat memutar video yang ada di Google Drive? yuk kita ulas...

Pada video yang telah diupload, silakan lakukan Share, dengan klik kanan pada video di google drive lalu pilih Share, setelah di pilih share silakan copy link, contoh link dari google drive adalah seperti dibawah ini : 

https://drive.google.com/file/d/1ifNDdUcsbQlpBmymVOhX9yqLZoarc3vv/view?usp=sharing

Silakan cari source atau sumber pada file play.html seperti dibawah ini : 

source src='MY_VIDEO.mp4' type='video/mp4'
source src='MY_VIDEO.webm' type='video/webm'

Silakan ubah isi dari source src local mode menjadi link id video dari google drive seperti dibawah ini: 

source src='https://drive.google.com/uc?export=download&id=1ifNDdUcsbQlpBmymVOhX9yqLZoarc3vv' type='video/mp4'
source src='https://drive.google.com/uc?export=download&id=1ifNDdUcsbQlpBmymVOhX9yqLZoarc3vv' type='video/webm'

Untuk melihat code komplitnya silakan cek dibawah ini : 

3. Menjalankan Video


3. Menjalankan Video

Silakan bisa langsung klik kanan pada play.html pilih Open With Browser yang digunakan atau bisa menggunakan localhost.

 

Demikian tutorial ini kami bagikan, Selamat Mencoba

Apakah artikel ini membantu Anda?

Silakan klik tombol dibawah ini untuk melakukan vote!

Ya   Tidak

Ada 7 Komentar di "Cara Mudah Membuat Video Player Local maupun Online Terhubung dengan Google Drive Menggunakan VIDEOJS"

Pengunjung Wibloog
R.A. Sofyan Ansori 06 September 2020 | 16:45:09
Terima Kasih gan Infonya, walau bahasa pemprograman kita beda, tapi ane dapet inspirasi dari sini, klo allah ijin kita ketemu, ane traktir gan. ane di bandar lampung, elamat email itu sama dengan facebook ane, pm ya gan. biar bisa kenal langsung. terima kasih banyak gan
Admin Wibloog
admin@wibloog 22 November 2020 | 07:28:45
Terima kasih kembali gan, semoga artikel ini membantu projeknya
Pengunjung Wibloog
Rahman 20 November 2020 | 11:01:24
👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍
Admin Wibloog
admin@wibloog 22 November 2020 | 07:15:37
👍 terima kasih jempolnya :)
Pengunjung Wibloog
Galuh permana 06 Desember 2020 | 13:58:42
Ga jelas kode link google drive nya kenapa bisa berubah? dari ini https://drive.google.com/file/d/1ifNDdUcsbQlpBmymVOhX9yqLZoarc3vv/view?usp=sharing menajdi https://drive.google.com/uc?export=download&id=1ifNDdUcsbQlpBmymVOhX9yqLZoarc3vv
Admin Wibloog
admin@wibloog 10 Desember 2020 | 07:51:25
Gak jelas apanya nie gan, Ane coba tes jalan...
Pengunjung Wibloog
Lingga 12 Januari 2021 | 03:00:31
gimana caranya , misalnya saya tidak embed dari situs google drive??
Admin Wibloog
admin@wibloog 12 Januari 2021 | 06:27:13
@lingga Tinggal buat server sendiri khusus penyimpanan video, akan tetapi Anda harus menyiapkan space yg besar, dan Anda gunakan link sendiri khusus di webnya
Pengunjung Wibloog
ryan bagogn 07 Februari 2021 | 15:44:23
konten saangat bermanfaat sekali gan, oh ya, gmna caranya memanggil poster (gambar thumbnail) dari database gan?
Admin Wibloog
admin@wibloog 07 Februari 2021 | 21:45:35
gampang gan.., agan tinggal buat aja querynya, terus agan cari bagian poster='url-querynya'
Pengunjung Wibloog
atop 09 Februari 2021 | 10:22:41
gan kok gak bisa yaa pakai file ukuran dari google drive yang 1 gb??
mohon bantuannya
Admin Wibloog
admin@wibloog 10 Februari 2021 | 14:21:50
Sepertinya memang di batasi gan, soalnya saya coba dibawah 1 gb lancar, Nanti sy infoin di laman ini untuk updatenya gan...
Pengunjung Wibloog
ndelok jangkrik 15 Maret 2021 | 09:33:10
gan kok ane ga bisa ya? ukuran 300an MB.
semua video ane ukuranya diatas 300MB.
cm bisa pakai tag iframe doang.
klo pakai tag video slalu ga mau jalan,
ada solusi/updatean ga gan?
Admin Wibloog
admin@wibloog 15 Maret 2021 | 18:43:21
Coba di tes di lokal dulu gan, takutnya ada pembatasan kuota streaming g-drive agan.

Tinggalkan Komentar Disini