hunkPlayer.js a jQuery video plugin Created by husain saify

hunkPlayer.js is a light weight jQuery plugin which provide a developed by Husain saify. hunkPlayer provide a custom video controls at a html5 video element across browser. hunkPlayer is developed because every browser is developing its own video player and this thing harm the webdeveloper because they want their website to be uniform accross browser and this is possible by hunkPlayer

Creat a Custom html5 video player with JavaScript

Download Script

View Demo

How to use hunkPlayer.js?

to use hunkPlayer.js is super you do not need to put something extra in your html just the simple <video> tag and call the hunkPlayer it will do the rest for you 

 <video width="550" controls>
  <source src="video.mp4" type="video/mp4">
 </video>
 <script type="text/javascript" src="jquery.js"></script> //include jquery
 <script type="text/javascript" src="jquery.hunkPlayer.min.js"></script> //include hunkPlayer.js
 <script type="text/javascript">
 $(document).ready(function(){
  $('video').hunkPlayer(); //call hunk player
 });
 </script>

Like Us on Facebook / Add Hunk As Friend

Custom html5 video player with JavaScript

In this post we are going to create a custom html5 video player with JavaScript. at 24/2/2014 i got a mail from a reader to explain the html5 video api the funny thing is that i was knowing less about a html5 video api with javascript that why i decided to rub my hands on video api and read a article on w3school about HTML Audio/Video DOM Reference and created a custom html5 video player and now its ready to rock and roll the web

Custom html5 Video Player With JavaScript

Download Script

View Demo

Why Their is a need of a custom video player?

The problem is that every browser develop its own video player and unfortunately they are different from each other. to show same user experience around cross browser we have to create a custom video player.

Native browser video controls across different browsers

html

html is super easy u just need to wrap the <video> tag in a <div> and put some additional divs after the <video> tag to make video controls sounds little bit confusing wait i show the code

<div id="video_container">
 <video load="metadata" id="my_vid" width="550" height="320">
  <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4"></source>
 </video>
 <div id="video_control">
  <button id="playpause">play</button><!--play pause button-->
  <input id="seekbar" class="bar" type="range" min="0" max="100" value="0" step="1"><!-- seekSlider -->
  <span id="currentTimeText">0:00</span> / <span id="durationTimeText">0:00</span><!-- video time display -->
  <button id="mute">mute</button><!-- mute button-->
  <input id="volumeBar" class="bar" type="range" min="0" max="100" value="100" step="1"><!--volume control -->
  <button id="fullScreenBtn" title="fullscreen">[  ]</button><!-- fullscreen -->
 </div>
</div><!--main video wraper-->

JavaScript

the main thing is javascript you can control the video behaviour via JavaScript api to learn more visit HTML Audio/Video DOM Reference

//create golbal variables of the video controls ======================//
 var playbtn,
   seekbar,
   vid,
   currentTimeText,
   durationTimeText,
   muteBtn,
   volumeBar,
   fullScreenBtn;

 function GetPlayerReady(){
  //set object referance of video control ======================//
  vid = document.getElementById('my_vid');
  seekbar = document.getElementById('seekbar');
  playbtn = document.getElementById('playpause');
  currentTimeText = document.getElementById('currentTimeText');
  durationTimeText = document.getElementById('durationTimeText');
  muteBtn = document.getElementById('mute');
  volumeBar = document.getElementById('volumeBar');
  fullScreenBtn = document.getElementById('fullScreenBtn');

  //add event listener ======================//
  playbtn.addEventListener('click', playPause, false);
  seekbar.addEventListener('change', vidSeek, false);
  vid.addEventListener('timeupdate', seekTimeUpdate, false);
  muteBtn.addEventListener('click', vidMute, false);
  volumeBar.addEventListener('change', changeVolume, false);
  fullScreenBtn.addEventListener('click', fullScreen, false);
 }

 window.onload = GetPlayerReady; //call the main function when document is loaded

 //play pause function ======================//
 function playPause(){
  if(vid.paused){
   vid.play();
   playbtn.innerHTML = 'pause';
  }else{
   vid.pause();
   playbtn.innerHTML = 'play';
  }
 }

 //video seek slider function ======================//
 function vidSeek(){
  var seekTo = vid.duration * (seekbar.value / 100);
  vid.currentTime = seekTo;
 }

 //video time display function ======================//
 function seekTimeUpdate(){
  var newTime = (vid.currentTime / vid.duration) * 100;
  seekbar.value = newTime;
  //currentTime & duration display//
  var curSec = Math.floor(vid.currentTime / 60);
  var curMin = Math.floor(vid.currentTime - curSec * 60);
  var durSec = Math.floor(vid.duration / 60);
  var durMin = Math.floor(vid.duration - durSec * 60);
  if(curSec < 10){
   curSec = "0"+curSec;
  }
  if(curMin < 10){
   curMin = "0"+curMin;
  }
  if(durSec < 10){
   durSec = "0"+durSec;
  }
  if(durMin < 10){
   durMin = "0"+durMin;
  }
  currentTimeText.innerHTML = curSec+":"+curMin;
  durationTimeText.innerHTML = durSec+":"+durMin;
 }

 //mute function ======================//
 function vidMute(){
  if(vid.muted){
   vid.muted = false;
   muteBtn.innerHTML = 'mute';
   volumeBar.value = 100;
  }else{
   vid.muted = true;
   muteBtn.innerHTML = 'unmute';
   volumeBar.value = 0;
  }
 }

 //volume bar function ======================//
 function changeVolume(){
  vid.volume = (volumeBar.value / 100);
 }

 //full screen fnction ======================//
 function fullScreen(){
  if(vid.requestFullScreen){
   vid.requestFullScreen();
  }else if(vid.webkitRequestFullScreen){
   vid.webkitRequestFullScreen();
  }else if(vid.mozRequestFullScreen){
   vid.mozRequestFullScreen();
  }else{
   alert('Your Browser Does Not Support Fullscreen');
  }
 }

css

we are using css to make the video control pretty. i have not focused on making the control pretty because i was not having time but in next post i will make a jQuery plugin which u can include easily

div#video_container{width: 550px;background: #000;margin:0 auto;}
 div#video_control{background: #333;padding: 10px;color: #ccc;}
 input#seekbar{width: 180px;}
 input#volumeBar{width: 80px;}
 .bar{
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance: none !important;
  background: #000;
  border: #666 1px solid;
  height: 5px;
  outline: none;
 }
 .bar::-webkit-slider-thumb{
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance: none !important;
  background: #fff;
  height: 15px;
  width: 15px;
  border-radius: 100%;
 }
 .bar::-webkit-slider-thumb:hover{
  cursor: pointer;
  opacity: 0.7;
 }
 .bar::-moz-slider-thumb{
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance: none !important;
  background: #fff;
  height: 15px;
  width: 15px;
  border-radius: 100%;
 }
 .bar::-moz-slider-thumb:hover{
  cursor: pointer;
  opacity: 0.7;
 }

Like Us on Facebook / Add Hunk As Friend

Drag and Drop Game With html5 & javascript

In this post i am going to teach how to create a Drag & Drop Game with Html5 and javaScript. It is very easy and Quite Interesting to create so i stop talking get started

Drag and Drop Game

Download Script

View Demo

html

html is super easy one thing to keep in mind is that the element you wanted to be draggable should be set as draggable="true"

<img src="./salman.png">
<img draggable="true" src="./shirt1.png" style="top:30px; position: absolute;z-index:5px;">
<img draggable="true" src="./shirt2.png" style="top:240px; position: absolute; left:600px;absolute;z-index:5px;">
<img draggable="true" src="./shirt3.png" style="top:240px; position: absolute;absolute;z-index:5px;"> 
<img draggable="true" src="./shirt4.png" style="top:30px; position: absolute; left: 600px;absolute;z-index:5px;">

css

Their is nothing in special in css just we are setting the cursor to move

[draggable]{
    cursor: move;
}

JavaScript

The main thing is JavaScript in the file we are controlling the drag and drop events

var x = '';
var y = '';
var shirt = '';

function dragOver(e){
 e.preventDefault();
}

function dragStart(e){
 shirt = e.target;//select the shirt

 if(e.offsetX === undefined){//get the x & y of the image
  x = e.layerX;
  y = e.layerY;
 }else{
  x = e.offsetX;
  y = e.layerY;
 }

 shirt.style.zIndex = 10;//set the image above the all
 shirt.style.opacity = '0.4'; //set image opacity 40%

 //when drag end remove image opacity
 shirt.addEventListener('dragend', function(){
  shirt.style.opacity = '1';
 }, false);
}


function dropHandler(e){
 e.preventDefault();
 //postion the shirt
 shirt.style.left = e.pageX - x + 'px';
 shirt.style.top = e.pageY - y + 'px';
}

document.querySelector('body').addEventListener('dragstart', dragStart, false);//when drag start
document.querySelector('body').addEventListener('dragover', dragOver, false);//when drag end
document.querySelector('body').addEventListener('drop', dropHandler, false);//when the image is drop

Like Us on Facebook / Add Hunk As Friend