Loading a HTML5 video to use with canvas - javascript

Good day,
I need a javascript only solution to programmatically load a video, so that I can later reference it and draw it on my canvas application. I'm utterly confused on how one would check to see if a video loading is complete, since there is no event for that. Also, it seems, that video.load() doesn't load anything, and I can't seem to get any attributes (everything comes up as null) of the video element, even after starting it to play with video.play().
Any help is much appreciated. Thanks!

A cross-browser implementation of a progress-event can be found in the jMediaelement-libary.
https://github.com/aFarkas/jMediaelement

Could Video.js be what you are looking for? It provides an API which allows access to to tracking and setting of progress.

http://html5doctor.com/video-canvas-magic/ can help i guess

Related

Visualising Audio From SoundCloud's Custom player?

I would like to know if it is possible to visualise audio from soundcloud's custom player:
http://developers.soundcloud.com/docs/custom-player#
At the moment I could only think about using videos, but I would like to know if it is possible to do with javascript or jQuery, maybe there are some cool libraries out there?
EDIT:
So far this is the only exact thing I found that does exactly what I want, but I am having trouble in understanding how it works, I was trying to play around with source code but had no luck ;/ and I don't wan't to copy it exactly. Maybe you could explain principle behind it and suggest how to change it's appearance?
check here: http://learningthreejs.com/blog/2012/05/08/sound-visualisation-vuemeter-in-webgl/
or you can search other Web Audio Api examples for Chrome and Safari and Data Audio API for Firefox

How to make an embedded YouTube video continuously replay?

I'm sure there must be a small option or tweak which can be set or used in order to make this possible.
Any help?
From their documentation, you should just be able to add the loop parameter.
http://www.youtube.com/v/VIDEO_ID?version=3&loop=1&playlist=VIDEO_ID

Javascript mp3 audio data

Say i have a HTML5 tag. Is there any possible way for Javascript on the page to get the current speaker output, and then graph it to produce a volume bar that got larger when the music got louder and smaller when the music got quieter? I don't care if it works in IE or not. If this is not possible, would it be possible to extract that data out of the mp3 file and hope it lines up? I REALLY don't want to use flash.
Edit: I was inspired by this. Unfortunately it uses hard-coded values which wont work for me.
Short answer, yes it's possible. Check out the esteemed Mr. Doob's example. Sadly, looks like the explanatory blog post is down.
Mozilla has a custom extension, but Doob's example is working in WebKit...
The JS Audio Data API will let you do this with an html5 audio tag, or audio that is played from javascript. See https://wiki.mozilla.org/Audio_Data_API for details and examples. I don't know offhand what the status of this API is in current browsers.

Starting and stopping a sound with Javascript

I need to start a sound effect at will... I need it to be stopped as well before it is over. I'm doing this all in JavaScript. How would I go about this? I've never used sounds before in a page (normally not a good thing to use sounds, this project requires me to).
Any help would be appreciated :)
If it means anything, I'm also utilizing jQuery.
If you're using jquery, have you tried the sound plug-in?
You may want to look into SoundsManager2

Create an event that starts if the page makes any sound?

I need to create an event that starts if the page is making any sound, or if there is a file playing on it.
Is there a way to do this?
Thanks
There are multiple way for your page to play a sound -- mostly via <object>, <embed> (though you can do it in an <applet> too!). Trouble is each one of these embeds a plugin in the page and each plugin has different parameters, and they are specific for each provider. And there is a multitude of them... And sound formats... so you could write a script that iterates through all these tags and finds all the parameters for them and try to figure out if this is a QuickTime plugin, or a real player, or windows media etc etc etc -- point being it will be a horrible function and it will still not cover all the cases. So I guess NO should be the short answer.
Only possible with HTML5 supporting browsers, but if you use the <audio> tag you have an event attibute at your disposal called onplay
If jQuery, you can do an each event bind for the play event for all audio tags on a page.
Try it:
http://jsfiddle.net/jdgiotta/rvpBj/

Categories