Cara Membuat Video.js Responsif di Blog

SAMEHADA.my.id – Video.js merupakan Pemutar video yang berbasis HTML5 yang disajikan secara Gratis. dan bukan hanya itu video js juga menyajikan Open Source. seperti istilah pada namanya Video.js. yang berarti video yang diputan dengan js (Java Script).

Open Source yang disediakan oleh video.js sangat bermanfaat mejadi pemutar video gratis di blog. dan pada arikel ini admin blogger kempret samehada.my.id akan membagikan Tutorial Pembuatan Video.js dalam Bentuk HTML dan PHP.

Cara Membuat Video.js Versi HTML

1. Login ke Dashboard Blogger

2. Pilih menu TEMA dan masuk mode edit HTML

3. Paste kode dibawah ini tepat diatas kode </head>

<link href=’https://cdn.jsdelivr.net/gh/travelinsuranceweb/video-js-samehada-my-id@main/video-js-samehada.css’ rel=’stylesheet’/>
<link href=’https://cdn.jsdelivr.net/gh/travelinsuranceweb/video-js-samehada-my-id@main/vjs-theme-fantasy.css’ rel=’stylesheet’/>

4. cari Kode </body> lalu pastekan kode berikut tepat diatasnya

<script src=’https://cdn.jsdelivr.net/gh/travelinsuranceweb/video-js-samehada-my-id@main/video-js-samehada.js’/>

5. Simpan Template.

6. Buat Postingan baru atau bisa juga membuka file lama yang ingin di tambahkan video.

7. Copy kemudian Paste kode Berikut ini pada postingan (Mode Edit HTML)

<video id=”my_video_1″ class=”video-js vjs-theme-fantasy” width=”640px” height=”360px” controls preload=”none” poster=’https://samehadafile.github.io/assets/images/poster-samehada.jpg‘ data-setup='{ “aspectRatio”:”640:360″, “playbackRates”: [1, 1.5, 2] }’> <source src=”LINK_GOOGLE_DRIVE” type=’video/mp4′ /> </video>

Note :

Pada kode yang saya tandai dengan warna aqua (https://samehadafile.github.io/assets/images/poster-samehada.jpg) ini adalah gambar Poster/ latar belakan pada player. silahkan ganti dan kreasikan sediri gambarnya.

untuk Text yang blogger kempret samehada.my.id tandai dengan warna lime (LINK_GOOGLE_DRIVE) silahkan Ganti dengan Link Google Drive yang sudah Dirubah Menjadi Direct Download.

untuk mendapatkan Link Google Drive Direct Downloadnya Silahkan Ke Page Converter Direct Link Google Drive DISINI.

Contoh Link yang disalin dari Google drive : https://drive.google.com/file/d/1GWzWmGwgBRKYn3EmtEw/view?usp=sharing

Contoh Link yang sudah di Convert menjadi Direct Download : https://drive.google.com/uc?export=download&id=1GWzWmGwgBRKYn3EmtEw

Link yang digunakan untuk mengganti LINK_GOOGLE_DRIVE adalah Link yang sudah di Convert menjadi Direct Download. Jika kalian menggunakan link yang belum di Convert maka Video tidak akan Berjalan.

Demo Player : https://demosamehada.blogspot.com/2022/02/demo-video-js-samehadamyid.html

Nambah : Jika Maun Skin Lainnya Silahkan Komentar aja admine mumet wkwkwkwkwkwk nanti bakalan di update kalau mau skin lainnya.

Leave a Reply

Your email address will not be published. Required fields are marked *