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 !!

CSS Width 100% Height 100% issue with paddings!

Explanation and Solution:

Sometime, which tends to happen very often, we need to create an element which is 100% in terms of both width and height however with the padding it ends up being bigger than 100%. Let’s say we have an element 100% and a padding 10px on all sides. CSS does not work well if we just write width: 100% – 10px but I have a quick and easy solution to this. There is a CSS3 property that allows you to consider the padding as part of the width and height set. This CSS3 property is called box-sizing which basically calculated the width assuming the padding is included within the width / height set.

This would mean:  

width + padding = 100%

height + padding = 100%

 

CSS Code Sample:

.myElement{

width: 100%;

height: 100%;

padding: 10px;

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */

-moz-box-sizing: border-box; /* Firefox */

box-sizing: border-box; /* Opera/IE 8+ */

}

 

Enjoy 🙂

CSS Selectors and Pseudo Selectors Helper

Important Selectors which might not be the most popular selectors, but make your like 100 times easier:

Selector Explanation Example
::after / ::before  prepends / appends a new element with the given content.  p::after { content: ‘This comes after’; }
+  for immediate adjacent sibling  p + p { } // 2 p’s next to each other
~  selects all sibling after of the given class within the same element  img ~ p { } // all p’s after img
>  child element – for first descendent children only  ul > li { } //only li’s directly under ul
::first-letter  selects the first letter of an element only  p::first-letter { font-size: 20px; }
::first-line  selects first line of an element. (won’t work on display:inline)  p::first-line { color: red; }
:first-child

:last-child

:nth-child

 selects any first child of an element

selects any last child of an element

selects the given child by position in an element

 p:first-child { color: red; }

p:last-child { color: green; }

p:nth-child(2) { color: blue; }

:first-of-type

:last-of-type

:nth-of-type

:nth-last-of-type

 selects first child of a specific type in an element

selects last child of a specific type in an element

selects  the given child by position of a specific type in an element

selects  the given child by position from bottom of a specific type in an element

 p:first-of-type { color: blue; } //1st of type p

p:last-of-type { color: navy; } //last of type p

p:nth-of-type(2) { color: navy; } //2nd from top

p:nth-last-of-type(2) { color: black; } //2nd from last

:in-range /

:out-of-range

 for input type range, can be used as a validator  input:in-range { border: 1px solid green; }

input:out-of-range { border: 1px solid red;}

:invalid  used for validations when using the required attribute to denote an error input:invalid { border: 1px solid red; }
:valid  used for validations when using the required attribute to denote valid  input:invalid { border: 1px solid green; }
:matches  groups by selectors  :matches(nav, div) h1 { color: red; }

:matches(nav, div) :matches(h2,h3) { color: green; }

:not(x)  selects all except given type or class  p:not(span) { font-size: 14px; } //span wouldn’t be 14px
:only-child  if the type given is the only child in the element  div p:only-child { color: red; } //if p is the only child in div
:required  indicated a required field when the required attribute is present  label:required { border: 1px solid red; }
:target  matched the hash in the url and the id of the element  http://example.com/#games

<div id=”games”></div>

#games { display: none;}

#games:target { display: block;}

 *  universal selector refers to all elements and types  *{ margin: 0px; }

Error: It is an error to use a section registered as allowDefinition= ‘MachineToApplication’ beyond application level. This error can be caused by a virtual directory not being configured as an application in IIS.

There can be different reasons why this happens, however what I needed to do to fix this was:

Check for and remove any nested web.config files with authentications and full settings in.

Simple css3 greyscale image on hover

If you would like to hover over an image and make it greyscale with no hastle what so ever, then this demo is ideal for you:


img{ height: 350px; } //height is not needed

img:hover

{

-webkit-filter: grayscale(1);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

filter: gray; filter: grayscale(100%);

filter: url(desaturate.svg#greyscale);

}

Click HERE FOR DEMO

 

 

Enjoy 🙂

Simple Javascript Countdown

countdown

 

I recently needed a simple javascript countdown and thought would be easier to create one rather than using a complicated existing one. In the following demo, I’m getting date now and add only 1 minute to it for the count down. As soon as the countdown reaches zero seconds, the countdown will be hidden and another element would show.

View DEMO HERE

Continue reading

Adding MVC Meta Tags to razor pages

In every View we can assign different meta tags (title, description, keywords, etc) however it is not very clear to every one how this is achieved. In reality this is quite easy.

So here it goes:

In your “_Layout.cshtml” paste the following in your head section:

@if(ViewBag.Description!=null)
{
<meta name=”description” content=”@ViewBag.Description” />
}
@if(ViewBag.Keywords!=null)
{
<meta name=”keywords” content=”@ViewBag.Keywords” />
}

 

Now, in your other pages which will inherit from the layout, at the very top where you usually have Viewbag.Title defined, add the following Viewbags:

@{

ViewBag.Title = “Home Page”;
ViewBag.Description = “Welcome to Rochcass Blog”;
ViewBag.Keywords = “C# posts, errors and solutions, problem solving, css3, html5, ASP.NET, Linq, MVC, Nhibernate”;
}

 

You can do the same for other meta tags such as author, etc.

 

 

 

 

Simple jQuery Pagination – Pager

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

Adding mime types to web.config

In some cases, we need to add mime types in order for the IIS to detect our files. For instance, I needed to add a custom font using CSS3 and so I added it to my stylesheet as follows:

@font-face {font-family: “myCustomFont”; src: url(../fonts/myFont.otf) format(“opentype”);}

When running on my Localhost, the font would appear fine however when upload to IIS the fonts would not show properly.

It also makes a difference depending which IIS one is using.

If running on IIS 6 or older, you will need to configure mime types on the server:

Read Microsite Instructions on configuring mime types for IIS6

If running on IIS 7 or newer, the mime types can be added to the web.config which will allow you to not touch the IIS directly (suggested):

Open the web.config and in the <system.webServer> section which is situated directly within <configuration> tag and add the following mime types to cover it all:

<staticContent>
<mimeMap fileExtension=".mp4" mimeType="video/mp4" />
<mimeMap fileExtension=".m4v" mimeType="video/m4v" />
<mimeMap fileExtension=".ogg" mimeType="video/ogg" />
<mimeMap fileExtension=".ogv" mimeType="video/ogg" />
<mimeMap fileExtension=".webm" mimeType="video/webm" />
<mimeMap fileExtension=".oga" mimeType="audio/ogg" />
<mimeMap fileExtension=".spx" mimeType="audio/ogg" />
<mimeMap fileExtension=".svg" mimeType="images/svg+xml" />
<mimeMap fileExtension=".svgz" mimeType="images/svg+xml" />
<remove fileExtension=".eot" />
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<mimeMap fileExtension=".otf" mimeType="font/otf" />
<mimeMap fileExtension=".woff" mimeType="font/x-woff" />
</staticContent>

Hope that helps 🙂