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
Picture by : #
14 Oktober 2019 » Post by : Admin@Wibloog

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
Cara Buka Touch ID Finger Tanpa Tekan Home Button di iPhone 5S, 6, 6S, SE
Cara Bersihkan Cache Browser di iPhone
Pilih Mana, AMD atau Intel Buat PC Gaming? Berikut Penjelasannya
Pengaruh Tampilan Website Terhadap Bisnis Online Anda
Membangun Blog Lebih Dari Satu, Efektifkah?
Tips Cara Menaikkan Trafik Blog bagi Pemula
Masalah Sitemap.xml Forbidden Access Error 403
Distro Linux yang Mirip Mac OS
Google Chrome : Update Keamanan Penggunaan Password Login di Browser
Pentingnya Password dan Touch ID untuk Keamanan di Ponsel Anda

Ada 8 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.
Pengunjung Wibloog
ANp 20 Juli 2021 | 12:07:16
gan..
bagaimana dengan membuat playlist dalam satu folder.
dan bisa diutar continue beberapa viodeonya
Admin Wibloog
admin@wibloog 22 Juli 2021 | 06:46:35
Terima kasih atas komentarnya, untuk playlist nanti akan dibuatkan tutorialnya bagian part2.

Tinggalkan Komentar Disini