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
8.1 K view • 14 Oktober 2019

Picture by : # • Post by : Admin@wirneet

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 data-src='MY_VIDEO.mp4' type='video/mp4'
source data-src='MY_VIDEO.webm' type='video/webm'

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

source data-src='https://drive.google.com/uc?export=download&id=1ifNDdUcsbQlpBmymVOhX9yqLZoarc3vv' type='video/mp4'
source data-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







Artikel Terkait


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

Pengunjung wirneet
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 wirneet
admin@wirneet 22 November 2020 | 07:28:45
Terima kasih kembali gan, semoga artikel ini membantu projeknya
Pengunjung wirneet
Rahman 20 November 2020 | 11:01:24
👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍
Admin wirneet
admin@wirneet 22 November 2020 | 07:15:37
👍 terima kasih jempolnya :)
Pengunjung wirneet
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 wirneet
admin@wirneet 10 Desember 2020 | 07:51:25
Gak jelas apanya nie gan, Ane coba tes jalan...
Pengunjung wirneet
Lingga 12 Januari 2021 | 03:00:31
gimana caranya , misalnya saya tidak embed dari situs google drive??
Admin wirneet
admin@wirneet 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 wirneet
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 wirneet
admin@wirneet 07 Februari 2021 | 21:45:35
gampang gan.., agan tinggal buat aja querynya, terus agan cari bagian poster='url-querynya'
Pengunjung wirneet
atop 09 Februari 2021 | 10:22:41
gan kok gak bisa yaa pakai file ukuran dari google drive yang 1 gb??
mohon bantuannya
Admin wirneet
admin@wirneet 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 wirneet
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 wirneet
admin@wirneet 15 Maret 2021 | 18:43:21
Coba di tes di lokal dulu gan, takutnya ada pembatasan kuota streaming g-drive agan.
Pengunjung wirneet
ANp 20 Juli 2021 | 12:07:16
gan..
bagaimana dengan membuat playlist dalam satu folder.
dan bisa diutar continue beberapa viodeonya
Admin wirneet
admin@wirneet 22 Juli 2021 | 06:46:35
Terima kasih atas komentarnya, untuk playlist nanti akan dibuatkan tutorialnya bagian part2.

Tinggalkan Komentar Disini