Learn jQuery in 30 Days (Became jQuery Beginner to a Pro)

Hey guyz this post will be pretty long and this post is a request from my user in this post i am going to post 30 jQuery video and u can watch that videos and learn to programme jQuery. I doesn't matter if u r a jQuery beginner or a pro this videos will help u So Get started to (Became jQuery Beginner to a Pro).

jQuery part 1 - Introduction to jQuery

In this video i will make your introduction to the world of jQuery and try to explain jQuery uses Click to watch video

jQuery part 2 - Understanding jQuery

In this video we will create your first jQuery document and testing the jQuery Click to watch video

jQuery part 3 - Learn jQuery basics

In this video we i show u some basic DOM (Document object module) manupulation with jQuery Click to watch video

jQuery part 4 - learning jQuery class method

In this video we will using some of the jQuery class method such as addClass, removeClass, toggleClass, and we will learn about bind event handler Click to watch video

jQuery part 5 - jQuery event handlers (part 1)

In this video we be talking about the most important thing in the jQuery its event handlersClick to watch video

jQuery part 6 - jQuery event handlers (part 2)

In this video we will be talking some more about event handlersClick to watch video

jQuery part 7 - Practice what we have learned

In this video we will be creating some cool example applications with jQueryClick to watch video

jQuery part 8 - jQuery val() function

In this video we will rubbing your hand to get all from the jQuery val() function. This function is used to get the value from a html tagClick to watch video

jQuery part 9 - jQuery attr() function

In this video we will learning attr() function in jQuery, this function is used to set or get a attribute of a html tagClick to watch video

jQuery part 10 Creating a cool Example

In this video we will create a cool tooltip example to get in touch of the things we have learned till nowClick to watch video

jQuery part 11 - fadeIn, fadeOut, fadeToggle animation

In this we will be learning jQUery animation techniques some thing like fadeIn fadeOut fadeToggle.Click to watch video

jQuery part 12 - jQuery animation slideUp,slideDown,slideToggle

In this we will be learning some more jQuery animation like slideUp, slideDown, slideToggle they are very cool like me take a look LOL.Click to watch video

jQuery part 13 - jQuery animate function

We will be covering the last and my favourite animation effect call animate()Click to watch video

jQuery part 14 - Ajax Load()

In this part we will be talking about ajax and and getting closer to load(). This function is used to load a external script files to the pageClick to watch video

jQuery part 15 - Ajax $.get()

In this part we will be learning about the jQuery $.get() HTTP RequestClick to watch video

jQuery part 16 - Ajax $.post()

In this part we will be learning about the jQuery $.POST() HTTP RequestClick to watch video

jQuery part 17 - Ajax $.post() callback function

In this part we will be learning about the jQuery $.POST() Callback fuctionsClick to watch video

jQuery part 18 - Ajax $.ajax() function

In this part we will be learning about the jQuery $.ajax() fuctionsClick to watch video

jQuery part 19 - Ajax $.ajax() Callback function

In this part we will be improving our feedback form and taking about $.ajax callbck functionClick to watch video

More videos comming soon

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