Develop Reference

What is this technique called using html5 video? [duplicate]

I'm creating a video player with HTML5 and Javascript and I'm wondering if anyone has solved the challenge of creating dynamic thumbnails.
Mimicking youtube video player where you hover over progress bar and a popup shows with a thumbnail. I know that youtube saves out an image and repositions the sprite in the thumbnail viewer frame based on position hovered over.
Is this viable to do with JS and canvas?
What I'm doing now is... hovering over my progress bar creates a copy of the video element. I then set the currentTime on the copied element. I then grab a snapshot using canvas. I'm not sure why, but the images seem to be blank.
Maybe someone has run into this problem?

YouTube have pre rendered thumbs that are stored in a single image in a grid with ten columns and how ever many rows are needed. The thum images I have seen are low quality jpg 800 pixels across giving thumbs 80 pixels by ?? (depending on aspect) When the user hovers the thumb closest to the that time is displayed.
Creating the thumbs at the client side will be problematic because video are not entirely random access. Seeking to a random location involves the video moving to the nearest previous keyframe and then decoding all frames till it gets to the frame you have requested. Depending on the format, encoding options, the spacing of key frames (if any rolling eyes), and if the seek location has been loaded, seeking to some location can be very slow. Getting a set of thumbs for a video can take a long time. The additional problem with the HTML5 video API is that it has only one playback channel, so while you are seeking for thumbs you can not watch the video.
You problem with blanks may be due to not waiting for the seek event.
Try
video.addEventListener("seeked",function(e){
// snap shot code here
});
But this does not always work I have found. So it pays to listen to all the appropriate events, and only seek when the video is ready. Here is a list of media events that will help.
As videos don't change your best bet is to create the thumbs on your server after the video has been uploaded. Low quality jpgs seem to be the go and will be loaded by the client much sooner than even a fraction of the video has been.

However, this can be achieved by using a combination of HTML5 canvas. You will have to do the following.
add an timeupdate event listener to the HTML5 video
at each 1 sec, grab the current time and create an element (span is this case) and bind the value of the current time in a special attribute of the newly created span
Append each created span element to your HTML5 progress element (I suppose you're using 'div' and not 'progress' element.
Add an mouseenter event listener to the created span.
Whenever the user hovers the progress bar, the mouse would eventually touches one of the span. Then, dynamically create a video element and set the src attribute with the main HTML5 video source. Then, set the currentTime to the value of the hovered span and snapshot it to an already canvas element.
There, you show the user the current frameRate.
Scripting is all about manipulations and gradually processes of putting pieces of codes to work.

Create a screenshot using html5 canvas and add movable elements

I am interested in building a new functionality in which the user can print what he sees in the page (as screenshot). But first he has to customize the position of some elements (images).
I am trying to find a way to do this and I was thinking of html5 canvas. I have little experience on this and I wonder if what I am thinking is at all possible.
My idea is to take a screenshot of the corresponding element (in this case is a div element with a map). I save this screenshot in a canvas and on top of it I place some other images (legend of the map) which are movable. The user can drag and drop them on the canvas.
Do all these make sense? Can it be implemented or is science fiction?

Video with timed image overlay

I was wondering if anyone could help me with HTML5 video with image overlays that are timed. I want the images to display and disappear at certain times, which will make the video pause and resume on the click of a button. I want to know the best approach to this in regards using HTML5, javascript etc.
I am using the video tag in HTML5 with Dreamweaver CS6 at the moment and I have full screen video working, with an image overlaid using the z-index, but I can't get it to display and disappear at a certain time.
Any ideas?

probably you have to add some event listener to your video:
timeupdate , loadstart, ect to manage the visibility of your image in overlay

HTML5 Best way to define coordinates for parts of an image, that when someone clicks on that we can find which part clicked

I am new to HTML5 and i have working on converting simple flash game to HTML5. What i have to do is, i am having an image of a character, so i have define the parts of the image in such a way that when user clicks on the head it should say you have clicked on head, and if some one click e.g on hand it should say you have clicked on hand or it is clicked in the face of the character.
I have done googling and find we can define different shapes and i have drawn and got successfull
So i just want to know that in my image what should i have to do, i have to use images for different parts or i have to draw character using HTML5 bezierCurveTo function.
Please tell me the best way and how can i do that.
Thanks

You can do it either with Images, SVG Elements, or Canvas.
If you have Images or SVG Elements, you can hook the onclick event of the Image to tell when it is clicked. Images will be the rectangular bounding box of the image, but SVG Elements will be the tight bounds. Use document.getElementById(<id>) to get the element from your page.
If you are using Canvas, you can use also use onclick but inside the callback, you can use CanvasRenderingContext2D.isPointInPath() to see if the point is in the head. This will allow you to check the exact bounds of the head, not just the rectangle around the head.
canvas.onclick = function(event) {
context.beginPath();
// Recreate the head path here.
if (context.isPointInPath(event.offsetX, event.offsetY)) {
// Click was within the head
}
};

How to link from a HTML 5 canvas animation

I am trying to create links from an HTML 5 canvas animation. How can I make a specific image in the canvas also a link?
Thank you!

The Canvas tag doesn't have link functionality, however you might be able to use javascript coding to manually link to a new page. Just add an onclick event that fires the link.
Also, the canvas won't know where your image is. So if the image is only taking up part of the canvas, you will need to check the mouse position to make sure the image is being clicked directly.