jQuery Video Player

Hi, today i am going to show you a simple video player using html5 jquery and ajax, and we can also play multiple videos by clicking on video thumbs with ajax request. let's see how we do this.

HTML

take the video tag and give it id name #dump and place a video path to src attribute in source tag, and take list of video thumbs and keep it in right side of video player. take one loader div to display loading image while loading the video. in image tag store the external video path in dir attribute later we will take this path and use to play the video via ajax.

<div id="lessoncup">

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="62%" align="left" valign="top">
    <div id="loader"></div>
    <div id="dump">
    <video width="480" height="290" controls autoplay="true" preload="auto">
  <source src="videos/one.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
    </div>
    </td>
    <td width="38%" align="left" valign="middle">
    <ul>
<li><img src="one.jpg" width="100" height="100" dir="videos/one.mp4"></li>
<li><img src="three.jpg" width="100" height="100" dir="videos/two.mp4"></li>
<li><img src="two.jpg" width="100" height="100" dir="videos/three.mp4"></li>
<li><img src="four.jpg" width="100" height="100" dir="videos/one.mp4"></li>
</ul>
    </td>
  </tr>
</table>
</div>

CSS

<style>

ul{ list-style:none; margin:0; padding:0;}

li{ float:left; margin:15px; padding:5px; border:solid #339 5px;-webkit-box-shadow: 2px 2px 2px #666;
box-shadow: 0 1px 2px #666; width:100px; height:100px; background-color:#F7F7F7; cursor:pointer;}

#loader{background-color:#000; width:480px; height:290px; color:#FFF; display:none;}

.loading{ padding:130px 0 0 200px;}

</style>

Javascript

write the click function to img tag and get the video source path form dir attribute and store it in one variable now call the videoplayer.php file via ajax and send the variable to this file with post method.

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
   
    $('img').click(function(){
  
  var video = $(this).attr('dir');
  
  $('#dump').hide();
  
   $("#loader").fadeIn(400).html('<div class="loading"><img src="loader.gif" align="absmiddle">&nbsp;Loading Video...</div>');
   
   var datasend = 'videofile='+video;
   
   $.ajax({
    
    type:'POST',
    data:datasend,
    url:'videoplayer.php',
    cache:false,
    success:function(msg){
     
     $('#dump').show().html(msg);
     $('#loader').hide();
     
    }
   
   
   });

  
 });
   
 
});

</script>

videoplayer.php

in this file put the video tag and just place the jquery requested variable to src attribute in source tag.

<?php
extract($_REQUEST);
?>

<video width="480" height="290" controls autoplay="true" preload="auto">
  <source src="<?php echo $videofile;?>" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Live Demo   Download Script