After looking into ways to call the YouTube mp4-file from within a Video for Everybody html-block (which is not possible, Google protects raw video-files using what seems to be a session-based hash that has to be provided in the URL), I decided to take another (dirty) approach; faking it!
The solution is entirely javascript-based and is as un-elegant as it is simple; create a html-file with a script include of http://futtta.be/newTube/newTube.js and a div with “id=newTube” containing a link to a YouTube-page and the script automagically takes care of the rest. Check out http://futtta.be/newTube/ to see it in action.
The result is an embedded YouTube player which will display the HTML5-version if you’re running a browser which supports mp4/h264 playback (i.e. a recent version of Chrome or Safari) and if you enrolled in the beta. If either of these preconditions aren’t met, you’ll just see the plain old Flash-player.
Don’t get your hopes up too high, newTube is probably not as obvious as normal YouTube embeds (for reasons I’ll get into in a follow-up post, when I have some time to spare that is). You’ll have to wait for someone (YouTube, Dailymotion, Vimeo, … are you listening?) to offer real embeddable html5-video (with support for both mp4/h264 and and ogg/theora).
But I did have fun creating the very first html5-capable embedded YouTube-player ;-)
Thank you very much, i included it on my webpage. Great work …
BTW: i changed it from (div id=”newTube”) to class=”newTube”, so it is possible to have multiple videos on one page.
I’ve re-implemented newTube.js as part of my wp-youtube-lyte wordpress-plugin, more info in this post
@der flo: indeed; makes a lot of sense, lyte (part of wp-youtube-lyte) works that way as well. had to include some code to do crossbrowser getElementsbyClassName though :)
Great work! Be good if you are able to re-size the height and width via url or something to =]
thanks sammy. resizing will probably not be possible, as the size of the player is the size it has on YouTube itself.
thank you . great work!
i was trying to have more than 1 video in a single page,, but the getElementsbyClassName seems not no work.
i change from id to class in html code and getElementById to getElementsbyClassName in the js but the result is no video!
Did you add the getElementByClassName-code to your ja?
I implemented HTML5-youtube embeds in my wordpress-plugin, you can check out the js-code in lyte-newtube-min.js to see how to implement getElementByClassName there?
i add you getElementByClassName-code js and change from id=”newTube” to class=”newTube” but it doesn’t seem to work..
ok, different approach: enter your video’s like this and all should be well (you’ll be eating my bandwidth though ;-) ):