HTML5 Video Capture Snapshots / Images

I was recently developing a fully resposive and customised HTML5 player and I wanted to be able to switch between bitrate sources smoothly. Instead of using two seperate videos, I thought it might be easier to capture a snapshot at the video’s currentTime, display it while the video shows a  glitch during switching of the source and remove this snapshot once switched. In order to do so, I needed to create a simple jquery method to do so using canvas. I thought it was pretty cool so I decided to upload a mini version to display the capturing of the images under the video while playing. For a live demo click here.

Instructions:

CSS:

#player-container { position: relative; width: 620px; }
#player-container .camera {

width: 32px; height: 32px; position: absolute; top: 10px; right: 10px; z-index: 99999999;
background-color: rgba(0,0,0,0.7); border-radius: 4px;
background-image: url(‘camera.png’);

}

#gallery-snapshots { width: 100%; height: 87px; background-color: rgba(0,0,0,0.7); margin-top:10px; width: 620px; }
#gallery-snapshots:empty { background-color: transparent; }
#gallery-snapshots canvas{ float: left; margin: 10px; }

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: ” “;
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

 

Jquery:

<script src=”http://code.jquery.com/jquery-1.11.0.min.js”></script&gt;

<script>

function takeSnapshot() {

var video = $(“#player-container”).find(“video”);
var wrapper = $(“#gallery-snapshots”);

var canvases = $(‘canvas’);

//Remove if it has no limit of how many snapshots
if (canvases.length == 4)
canvases.eq(0).remove();

var spacing = 20;
var height = (video.height() / 4) – spacing;
var width = (video.width() / 4) – spacing;

var canvas = $(‘<canvas />’).attr({ width: width, height: height })[0];
canvas.getContext(‘2d’).drawImage(video[0], 0, 0, width, height);

wrapper.append(canvas);

}
</script>

And finally, the HTML:

 <div id=”player-container”>

<div id=”captureSnapshot” class=”camera” onclick=”takeSnapshot()”></div>

<video width=”620″ autoplay autobuffer controls preload=”auto”>

<source src=”movie.mp4″ type=”video/mp4″>
<p>Your browser does not support HTML5 video.</p>

</video>

</div>

<div id=”gallery-snapshots” class=”clearfix”></div>

Have fun !!

Advertisements

Simple jQuery Pagination – Pager

I was looking for a simple javascript/jquery pagination plugin but all seemed so complex with functionalities I did not need that I decided to create a really simple one. All that this pagination does is: give items to be paginated the same class name and give it a maximum number of items to be displayed per pagination page while also a maximum number of pagination icons. Here I placed a pagination at the top and at the bottom of my items so no IDs where used but instead class names have been used everywhere.

View Live Demo Here

Step 1:-

In your head section add the following references (jquery and pagination js/css) or download directly on your local:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="http://twiggle-web-design.com/tutorials/pagination/style.css" rel="stylesheet" type="text/css" />
<script src="http://twiggle-web-design.com/tutorials/pagination/pagination.min.js" type="text/javascript"></script>


Step 2:-

Add the following divider wherever you would like the pagination to appear, its important to use the class name “pagination”:


<div class="pagination"></div>


Step 3:-

Either in your head section of at the bottom of your body section, add the following javascript code:


<script>
$(document).ready( function () {

//initPagination(element, maxItems, maxPages);
//element: the class name given to the elements which will need to be paginated
//maxItems: the maximum number of items to display per page
//element: the maximum number of navigation numbers in the pagination nav bar
initPagination("item", 10, 5);

});
</script>


Goodluck 🙂

PS: drop me a comment if you have any questions

Error: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

I was trying to make an AJAX Post to another domain http://freegeoip.net/ to get Geo Location and therefore the browser would not allow me to proceed due to cross-domains. Cross domain means that if you are on domain A.com and would like to make a request to domain B.com, it does not allow the request to be made since the boundaries are set on the domain A.com by your browser. Script tags allow us to overcome this boundary however we still cannot read or do anything with the data returned.

Ajax Post:

$.ajax({

url: 'http://freegeoip.net/json/',
type: 'POST',
dataType: 'json',
success: function (data) {

var ip = data["ip"];
var country_name = data["country_name"];
var city_name = data["city"];

}

});


Error:

XMLHttpRequest cannot load http://freegeoip.net/json/. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:4868‘ is therefore not allowed access.

Solution ( Very Easy!) :

JSONP is just like the normal JSON we are used to but it also passes an extra parameters with more of your pages details. When sending a request to another domain B.com with JSON, if the domain B.com has JSONP enabled, it will change the response in a way to be readable for us to handle. Therefore, all we need to do is change the dataType from “json” to “jsonp” as follows:

$.ajax({

url: 'http://freegeoip.net/json/',
type: 'POST',
dataType: 'jsonp',
success: function (data) {

var ip = data["ip"];
var country_name = data["country_name"];
var city_name = data["city"];

}

});


This worked perfectly for me, and I could successfully get the Client IP, Country and City.

PS: the above requires jQuery to function since we are using a jQuery Ajax Request.

Goodluck 🙂

Solved: Bootstrap 3.0.0 responsive navbar toggle not expanding/collapsing

I have recently downloaded bootstrap and needed to use a fixed responsive navbar at the top. When the window was small, the navbar was responding successfully as in only the logo and the toggle bar were showing rather than all the menu items. However, when clicking the toggle button, the menu items should have expanded down but instead nothing was happening.

I researched the issue on Google (as usual) but could not find a solution. Then I realised the Bootstrap needed jquery which I was infact using. However, I was not using the latest version. Therefore, I downloaded the latest version and tried it out. This seemed to have fixed my issue.

Hope it was of any help for some of you out there 😉

MVC 4.0 jquery object has no method “”

In order to help you understand the reason for this post, I will explain my initial situation. I was using .NET MVC 4.0 with razor and I needed to use some jquery plugins. I tried fancybox, tagsinput, etc etc and each plugin kept on failing to work do the error similar to “$().fancybox is not a function”. After some reseach and attempts to fix this issue, I realised that jquery was loading twice, not because I referenced it twice.

I initially looked at the _layout.cshtml page and saw that css and modernizer are being rendered by razor but since I did not see the rendering of jquery I added my own jquery reference. However razor was rendering jquery at the very bottom of the _layout.cshtml and thus jquery was being referenced twice, making plugins unusable. Razor uses the follow render syntax to reference jquery at the bottom of the page:

@Scripts.Render(“~/bundles/jquery”)

To fix either remove your reference at the top or if like me you have used normal jquery such as $(document).ready() etc, you will need the reference at the top and not at the bottom. In that case either remove the render from the bottom, or just drag it all the way to the head of the page.

Hope this helped 🙂

Create a textbox watermark using CSS and jQuery

Step 1: –

First of all, we need to reference the latest jquery plugin (at the time being  version 1.9.1):

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js“></script>

Step 2:-

Add some styling to the textbox watermark, which is usually a light grey text font

<style>

.watermark
{

font-family: Calibri, Arial;

font-size: 14px;

color:gray;

}

</style>