We Keep Coding

How to draw a first video's frame in canvas?

I've found several posts like this but none of them work. For example, this post's first answer is a common solution. I made a fiddle based on his fiddle. The problem is it does work if you change the video's position it'll draw the current frame of video. But what I need is the first frame of the video just after I uploaded it. I tried to draw an image when the loadeddata event is fired. According to its description just what I need:
The loadeddata event is fired when the frame at the current playback position of the media has finished loading; often the first frame.
Still won't draw the first frame. Then I tried to draw an image on canplay and canplaythrough events which should work fine. But it didn't.
After some time playing with events, I found a temporal solution if we set a timeout for > 50 ms and try to draw a canvas it'll draw the first frame. But it's not a stable solution.
My thoughts are maybe the problem with buffering but at the same time canplaythrough fires when the user agent can play the media and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content. And it still didn't work.
Any thoughts?

HTML5 video playing backward, detect "end" of video

I am trying to make video player where, when you click on backward button, it will go backwards, and when it hits 00:00 time, it change video source and starts to play another video.
Asume that list of videos can be js array. When you are on video2, you hit backward. Video2 is going backward and when it hit 00:00, it swap source to video1. And video1 will be playing backward.
var vids = [
"video1",
"video2",
"video3",
"video4"
];
According to my research, HTML5 video supports onended() function when you can detect normal end of video, but it does not solve it for end in backward direction.
According to this thread play-a-video-in-reverse-using-html5-video-element.
Browsers currently do not support playing video backward. There is only one way how to manage it by faking current time in video. See how it looks like in this jsfiddle http://jsfiddle.net/UkMV2/5/
Use of onended() function when video plays forward, and put another video when that before ends is easy. But how to detect that video ended in start?
I will appreciate any suggestions which can move me forward.

Videogular - video stops playing often - how to preload and indicate loading status

I have 86mb 1920x1080 video that I am playing online using videogular.
The video freezes often, taking 5-10 seconds to continue playing.
Is there a way to preload video completely and then play?
Is there a way to indicate how much has been loaded (as it's done on youtube?)
I've already tried preload:"auto",preload:"none" and preload:"preload".

smooth video transition HTML5

looking to use HTML5 video tag and JS. the aim is to make a video swap from one video to the next very smoothly just like a cut in the movie. I have had a look at the API
http://www.w3.org/TR/html5/video.html#tracklist
if anyone has an idea that would be great. My current plan is to familiarise myself with the API and figuare out how to que up the video for a smooth change. currently sellect a src and then play() causes an ugly white space pause before the next video comes in.
many thanks for looking

Use firefox and make hardware acceleration on. if you have good hardware it should work.
and you can also try this method, imagine if you have 5 videos to play and when you are in the 2nd video you can keep them by the video currently you are playing ,keep them on left and right sides and make them pause. when you move on to the 3nd video you can just get that relevant video and make it play. this method should eliminate any unnecessary lags.

HTML5 videos use a very low amount of CPU, so there's no reason you can't have multiple tags on the page at the same time. I would suggest having them all on the page and then using CSS and JavaScript to transition between them.

You won't be able to make this work on iOS since it doesn't allow playback to initialize without user interaction. The user will have to click to start each video.
Annoying, but that's how Apple rolls.

Speeding up HTML5 video seek?

Hey all I wonder if you guys know some trick that could help me out. What I have implemented is a slider that controls the seek position of an HTML5 video via the currentTime property. What I would like to have happen is as the user is dragging the slider the video is updating in real time.
What I have works but the video players image doesnt update to each frame as I set the current time. Any thought?
slide: function(e, ui){
seeksliding = true;
$gVideo[0].currentTime = ui.value;
},

Modern browsers are generally very good at seeking quickly, even to the point where you can synchronize two or more videos using Javascript, with the same kind of functionality you're describing. (Firefox around version 4-5 would take a few extra milliseconds and lose sync, but it's better now.)
The code you have should work, as long as ui.value is between zero and the duration of the video. But you may run into problems if a) the video is not loaded or b) there is something up with the encoded video file.
First, make sure the browser can play the video and seek without any Javascript controls. Just try opening up the file in the browser, first straight off your hard drive and then off the network. If you can't seek with the native controls, you can't seek with Javascript. I've sometimes seen seeking errors solved by re-encoding a video without B-Frames.
Next, see if the video is loaded when you're trying to seek. You can speed this up by adding a preload attribute to the video tag. And make sure the slider event isn't enabled until the browser has the video's duration, by putting the slider code inside a loadedmetadata event.