Siboker

Sharing is Carring

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



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 comments:

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

    ReplyDelete
    Replies
    1. VIDEO JS,, HTML5,, JW PLAYER bisa koq buat google drive

      Delete
    2. GImana carnya gan.... kalau videonya mkv... karena kebanyakan sourcenya kan mkv....

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

      Delete
  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

    ReplyDelete
    Replies
    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

      Delete
  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

    ReplyDelete
    Replies
    1. Cara buat direct urlnya gimana min.....

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

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

      Delete
    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..??

      Delete
    5. @Abdul Hadi

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

      Delete
    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

      Delete
    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

      Delete
  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

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

    ReplyDelete
  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

    ReplyDelete
  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.

    ReplyDelete
  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.

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

    ReplyDelete