Create Video Demo With jQuery and HTML Without Really Taking Screencast and Post-processing. Very Useful To Create Quick Guides Within Minutes. If you are dreaming of a human is jumping, shouting – that is really impossible, but easy things like demo of how to login, how to an action on webpage can easily be created on the fly with this jQuery Plugin.
How To Use This jQuery Plugin To Create Fake Video Demo
Copy paste the urls on your any plain text editor and then copy the urls on your browser to open the webpages. This method of opening webpage is irritating but protects your privacy and gives the full control. Anyway, see the official demo page here :
1 | http://uiplayground.in/jquery-image-player/demo-basic.html #copy the url |
The way we started this subheader can make a normal human to feel a bit disoriented. Anyway, if you go to their Demo > Basic demo page, you’ll get something like this :
---
If you are using WordPress, JQuery is already loaded on the fronted. Then you need only two files to load :
1 2 | <link rel="stylesheet" href="jquery-image-player-min.css"> <script type="text/javascript" src="jquery-image-player-min.js"></script> |
Another Javascript is needed at the bottom of the page to call the things :
1 2 3 4 5 6 7 8 9 10 | <script> $(document).ready(function(){ $('#demo1').jsVideoPlayer({ showTitle : false, showVolumeControl : false, playerWidth:400, playerHeight:385 }); }); </script> |
Obviously, we need a custom CSS :
1 2 3 4 5 6 7 8 9 10 | <style> #demo1 .galWrapper{background:#2f4159;} demo1 .contentArea{position: absolute; top: 10px; left:50px;} #demo1 .img1{position: absolute; top:0; left:0;} #demo1 .usernameText, #demo1 .passwordText{position: absolute; top:107px; left:35px; z-index:1; font-size:15px; color:#009a9a; font-weight:bold; font-family:arial; height:20px; width:auto; display:inline-block;} #demo1 .usernameText img, #demo1 .passwordText img{position:relative; float:none;} #demo1 .passwordText{top:162px; width:10px; background:url(../demo-images/password.png) repeat-x 0 0; } #demo1 .pipe{position:relative;} #demo1 .pipe:before{content:''; position:absolute; top:0; right:-4px; width:5px; height:20px; display:block; z-index:1; background:url(../demo-images/pipe.gif) repeat-x 0 0; } </style> |
Last part is the HTML :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <div id="demo1"> <ul> <li data-duration="0"> <div class="contentArea"><img src="demo-images/img1.png" class="img1" /> </div> </li> <li data-duration="1000"> <div class="contentArea"><img src="demo-images/img1.png" class="img1" /> </div> </li> <li data-duration="1000"> <div class="contentArea"><img src="demo-images/img2.png" class="img1" /> </div> </li> <li data-duration="1000"> <div class="contentArea"><img src="demo-images/img2.png" class="img1" /> <div class="usernameText">yourname</div> </div> </li> <li data-duration="1000"> <div class="contentArea"><img src="demo-images/img3.png" class="img1" /> <div class="usernameText">yourname</div> <div class="passwordText" style="width:60px;"></div> </div> </li> <li data-duration="1000"> <div class="contentArea"><img src="demo-images/img4.png" class="img1" /> <div class="usernameText">yourname</div> <div class="passwordText" style="width:60px;"></div> </div> </li> <li data-duration="1000"> <div class="contentArea"><img src="demo-images/img5.png" class="img1" /> </div> </li> </ul> </div> |
The HTML part and CSS files changes the things. It is not exactly easy to create a demo. But it is also true that, without screencast these can not be made easier before. Whether this Plugin has future or not, that depends on the developer. The idea is good, but basically with one demo, it is near impossible to be so creative to create a substitute of a screenshot.
