Cara memasang Video Js (Web Video Player HTML5) di Blogger

Siboker , Februari 15, 2016


VideoJS adalah aplikasi Web video player untuk halaman web yang dibuat menggunakan HTMl5, CSS, dan Javascript. VideoJS telah ada sejak tahun 2010 dan hingga kini telah digunakan lebih dari 100.000 website termasuk Twitpic, Vine, Instagram, Tumblr, Dropbox, dan 99designs.
Berikut ini cara pemasangan VideoJS di blogger.

- Buka Template
- Edit HTML
- Cari  kode </head>
- Copy kode dibawah ini
<link href='http://vjs.zencdn.net/5.4.6/video-js.css' rel='stylesheet'/>
- Pastekan tepat di atas kode </head>

- Cari kode </body>
- Copy Kode dibawah ini
<script src="http://vjs.zencdn.net/5.6.0/video.js">
- Pastekan tepat diatas kode </body>


Dan cara penggunaan pada postingan

- Copy kode dibawah ini
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="URL-POSTER-ENTE.JPG" data-setup="{}">
<source src="URL-VIDEO-ENTE.MP4" type='video/mp4'>
</video> 


Warna PINK url video , ganti dengan url video ente.

  Live Demo
Selesai , semoga membantu :v

23 komentar :

  1. Gan... player untuk video yang hostnya dari Google Drive aja gak...

    BalasHapus
    Balasan
    1. Maksudnya ada apa nggak....

      Hapus
    2. VIDEO JS,, HTML5,, JW PLAYER bisa koq buat google drive

      Hapus
    3. GImana carnya gan.... kalau videonya mkv... karena kebanyakan sourcenya kan mkv....

      Hapus
    4. Harus format dulu ke MP4,, mkv gak kebaca di HP atau browser slain Chrome.. kan ada tuh online converter yg di sediain ama GDrive

      Hapus
  2. Google drive pake Video Js bisa.

    Selesai upload video ke googledrive,
    ente generate dulu direct linknya
    Disini.



    Contoh url video ane

     https://drive.google.com/file/d/0B77XO2Skr5ZcdGdBNW5naGI1NVE/view

     Jadinya

     https://drive.google.com/uc?export=download&id=0B77XO2Skr5ZcdGdBNW5naGI1NVE



    trus masukin dah ke source src video



     <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
    data-setup="{}">
    <source src="https://drive.google.com/uc?export=download&id=0B77XO2Skr5ZcdGdBNW5naGI1NVE" type='video/mp4'>
    </video>


    DEMO

    BalasHapus
    Balasan
    1. Gak bisa gan.... metode itu cuma bisa kalau file videonya kecil... kalau videonya besar gak bisa di play.... misalnya ini.... https://drive.google.com/file/d/0B-ay_9EGAgqZTEFtS2JFeUxfUlU/view

      Hapus
  3. @atas ane
    Ente tepat sekali karna direct downloadnya ada ID expirenya, tp wa da nemu solusinya...


    ni url video lu = (https://drive.google.com/file/d/0B-ay_9EGAgqZTEFtS2JFeUxfUlU/view)
    ni direct urlnya = (https://fb9aca5e1f76c13ab3464e92edf252c311116f16.googledrive.com/host/0B77XO2Skr5ZcQ3R2NU1DN3BmZjg/The%20Vampire%20Diaries%20S01E01%20720p%20BluRay%20x264.mp4)


    jadi video ente harus di Host dlo di googledrive.


    Ini cotoh video pampir lo :v
    http://sibokerdemo.blogspot.co.id/2016/02/video-host-with-videojs.html

    BalasHapus
    Balasan
    1. Cara buat direct urlnya gimana min.....

      Hapus
    2. Berarti itu harus mp4 dulu ya... kalau mkv gak bisa ya??

      Hapus
    3. pake trik host file di google drive
      gampang kok search aja "how to host file on googledrive"

      Hapus
    4. Om boker,, video js juga gak bisa ya di thema Grifus,, cuma bisa pake HTML5 doank,, jw player juga gak bisa,, gimana caranya agar support JW ama Video JS..??

      Hapus
    5. @Abdul Hadi

      video web playe kan pluginnya bnyk bro, ente pake plugin aj .. mau Jw , Js ,smua ada kok.

      Hapus
    6. Gimana cara bikin direct linknya om? Ada tutor kah? Saya muter muter gak nemu bikin link directnya itu, buat solusi video yg gak bisa di stream

      Hapus
    7. Gimana cara bikin direct linknya om? Ada tutor kah? Saya muter muter gak nemu bikin link directnya itu, buat solusi video yg gak bisa di stream

      Hapus
  4. mas, saya newbie, lagi belajar. mau nanya mas mas gimana sih kalau kita pasang video JS di blogspot agar subtitlenya bisa jalan juga... soalnya saya udah coba cara diatas dan saya liat di tetangga ko bisa ya videonya da subtitle nya. saya ikutin pasang juga

    track kind=caption ........
    tapi ga kluar mas subtitlenya. mohon pencerahannya mas mas

    BalasHapus
  5. kira-kira kalo bikin streaming bola tuh apa aja sih gan kodenya?

    BalasHapus
  6. kalo misalny gini : https://r1---sn-npo7zn7k.c.docs.google.com/videoplayback?requiressl=yes&id=7bd1ec3ce6696894&itag=18&source=webdrive&ttl=transient&app=texmex&ip=180.248.4.232&ipbits=32&expire=1469405320&sparams=expire,id,ip,ipbits,ipbypass,itag,mm,mn,ms,mv,nh,pl,requiressl,source,ttl&signature=7C46E99A870B398AE754B68FBC28F9B1F03547A9.4DC21926B977F1BB55350DFFBF221973A58BF019&key=cms1&pl=20&begin=0&cache=HIT&redirect_counter=1&req_id=b7f5acda4cd236e2&cms_redirect=yes&ipbypass=yes&mm=30&mn=sn-npo7zn7k&ms=nxu&mt=1469390790&mv=m&nh=IgpwcjAzLnNpbjEwKgw3Mi4xNC4yMTMuMjM

    mau tau link aslinya gmna om

    BalasHapus
    Balasan
    1. Kayaknya ini link download...
      Bisa juga di putar,tapi cuma ente yg nonton hehe...

      Itu ada IP nya ente
      180.248.4.232

      File aslinya nggak tau wkwkwkwkwk

      Hapus
  7. nanya dong om boker atau siapa saja yang tau kalau masukin script ads ke dalam video gimana caranya jadi sebelum video di play script iklan muncul ditengah2 tombol play.

    BalasHapus
  8. nanya dong om boker atau siapa saja yang tau kalau masukin script ads ke dalam video gimana caranya jadi sebelum video di play script iklan muncul ditengah2 tombol play.

    BalasHapus
  9. Thanks, infonya bro. termasuk masukan dari temen2 di coment, infonya berharga sekali. Aq coba inprove di www.gratiskabeh.com, mampir balik ya. Wassalam.

    BalasHapus

Copyright © 2017 Siboker - All Rights Reserved | Design By