Tell HN: Couldn't Sleep Last Night, Wrote a (No-Flash) HTML5 Viewer for YouTube

http://neosmart.net/blog/2009/watch-youtube-videos-in-html5/

by ComputerGuru • 17 years ago

110 56 17 years ago

I was bored last night and browsing YouTube in bed on my MacBook, and as usual, when I reached an HD video the fans kicked in and the laptop got hot. Since YouTube now stores the .mp4 version of (most) videos on their servers, I figured it was inevitable that someone had coded something or the other to take advantage of it and view them in streaming format via HTML5 video containers.

When I didn't find one I wrote this instead. It's really basic, but it gets the job done. Give it a YouTube link and it'll display the HTML5 video. The userscript adds a link to the HTML5 viewer for all video pages on YouTube.

NathanKP2• 17 years ago

It looks really nice. I'm giving it a try right now and it doesn't seem to be downloading the video though. I'm using the latest version of Safari on Mac OS X Snow Leopard.

I tried Firefox too and still no download. Activity Monitor shows no network activity that would be indicative of it downloading. I tried pressing play to get it started, still nothing.

The video that I was attempting to watch:

http://neosmart.net/YouTube5/index.php?url=http%3A%2F%2Fwww....

ComputerGuru9• 17 years ago

Seems YouTube's changing the token :S

I'm looking into it.

EDIT: Found the problem. Need a couple of minutes though.

EDIT2: Should be working now. Local testing hadn't shown the IP restrictions in the YouTube link token, fixed now. Thanks for bringing this to my attention, Nathan.

tsuraan2• 17 years ago

I'm not having any luck loading your page, so maybe it's explained there, but how do you get to the .mp4 version of a file? pwnyoutube often works, but it's also often down. I'd love to just be able to download the video and watch it locally, if the .mp4 link allows that.

dreish• 17 years ago

   javascript:(function(){url='http://deturl.com/download-video.js';document.body.appendChild(document.createElement('script')).src=url;})();

I've never had a problem using this.

ComputerGuru9• 17 years ago

I wrote a quick PHP script that loads the YouTube page and parses the URI, creating a download link from the MP4 link template and various info available in the javascript of that page.

Try this link: http://neosmart.net/YouTube5/

bingaman• 17 years ago

youtube-dl.pl http://bitbucket.org/rg3/youtube-dl/wiki/Home

oomkiller• 17 years ago

ClickToFlash allows you to download the HD H264 version of the video.

mseebach2• 17 years ago

May I suggest a GreaseMonkey script that replaces the youtube-flash with the HTML5 video, inline? Like the Safari-plugin mentioned above, but for Firefox.

aw3c2• 17 years ago

If possible please make it use no proprietary GreaseMonkey stuff so Opera users can use it as userscript. :)

edit: Hey, there is http://neosmart.net/YouTube5/youtube5.user.js

blasdel• 17 years ago

Except that it's totally infeasible to hack h264 support into Firefox -- they link directly with liboggplay instead of a more wholesome API (portable like ffmpeg's, or native like QT/DirectShow/GStreamer) precisely to keep you from doing so without a ton of pain.

They pull ideological bullshit like this all the time (not treating iso8859-1 as cp1252, refusing to do font-face for years, etc). I hope their heads fall off.

rufo• 17 years ago

If you haven't seen ClickToFlash yet, it can transparently replace the YouTube flash player with an HTML5 <video> element in Safari:

http://rentzsch.github.com/clicktoflash/

swombat2• 17 years ago

From that link:

"Block evil Adobe Flash"

Great, more ideologists.

wtallis• 17 years ago

Aren't there enough objectively bad things about Flash to justify summarizing it as "evil"? It does so many bad things to a web site's accessibility, usability, download size, security, and performance that anybody with a genuine interest in making the web a better place should be encouraging migration to the open standards based alternatives. Now that HTML5 features are available, it seems that the only significant things Flash has going for it are a large install base and a decent authoring tool.

soult• 17 years ago

But those ideologists are right, Flash is evil in so many ways:

a) It eats babies. (Seriously, look at how much CPU and RAM it eats.) b) It's insecure. Want a flaw that even users with a safe browser (ie not IE) are not safe against? Search for a Flash vulnerability. c) It sucks for handicapped people. Blind? Well your bad that you can only use a screen reader. No website for you. (This obviously doesn't matter for video sites). d) Cookies? Lame, if you really want to track your user (or whatever you call the people that watch your ads), even if he clears his browser cache, use Flash cookies. Want to open Popups? Too bad the user has a popup blocker. Oh wait, we can get around that with Flash. d) It's closed source, so many free software people don't want to run it.

alecco• 17 years ago

I disagree, Adobe is evil.

The problem is web standards and browsers are not great, either. Evil Adobe/Macromedia took advantage of this chaos and solved several problems quick and dirty while pushing one of the most proprietary technologies widely used.

And "the web" has to come back with real non-proprietary widely adopted solutions to all this things because most web designers are addicted.

One of the typical non-video problems: file uploading.

So Adobe and Flash are evil, a necessary evil. The OP coded something instead of just giving an opinion. Respect.

PS: I still don't understand how Microsoft, Netscape, Opera and Mozilla allowed this monster to exist.

bmalicoat• 17 years ago

I don't think you can make a case for Flash in OS X not being evil. I never had a problem in Windows, but seeing it grab ~50% of my cpu, even when idle, on a Mac definitely makes me categorize it as evil.

chrischen4• 17 years ago

This is really cool. And I have a question about HTML5 video in general: how would an HTML5 player prevent users from messing with ads if it were used by a site like Hulu?

swlevy• 17 years ago

Generally, sites that serve longer video segments (like Hulu) use flash streaming (so the video is not a single file but many fragments served via a special media server), so swapping out the client player would be considerably more difficult.

kwamenum864• 17 years ago

HTML5 video is not supposed to be used for video streaming at all. I think it is doubtful that companies with the concerns you described would use the video tag.

rimantas• 17 years ago

What makes you think so?

spazmaster• 17 years ago

Very nice! Just watched Did you Know 4.0 in HTML5 and the activity on the CPU on my MBP was super low, unlike when watching it in Flash. Thanks for staying up the night!

ComputerGuru9• 17 years ago

Thank you! and you're welcome :)

drawkbox2• 17 years ago

Google/youtube beat you to it in April: http://www.youtube.com/html5

Must be viewed in Chrome Also show a video of their O3D technology, similar to WebGL.

ComputerGuru9• 17 years ago

That's just a sample. No way to load other videos in the HTML5 viewer.

fyi, the link works great in Safari.

drawkbox2• 17 years ago

True. But the player code is all there. It should work in any html5 enabled browser (Safari 4, Chrome, and FF 3.5) although FF 3.5 is having some issues with it.

This does highlight one problem with html5 based video, different browsers will interpret it differently no matter how hard standards are pushed. Flash video (FLV) saved us from that and all the horrible players like Real Media, Windows Media and Quicktime by being consistent and working across all browser as long as you have the plugin.

JMiao• 17 years ago

thinking it would be nice if you also let us view a random video link rather than find/copy/paste.

yesimahuman2• 17 years ago

This seems cool. It's not working for me though, the video never plays and the track scan and volume buttons have a blue border around them. I'm on FF 3.5.5

ComputerGuru9• 17 years ago

You need to manually press the play button. The numbers are a lie (0:00/0:00) and the blue border only appears in FF (silly thing requires a border=0 which I'll add later). It may take a while on slower internet and some videos do not have an MP4 upload on YouTube. However, the YouTube slider does work and you can use it to skip to any part of the movie.

kwamenum864• 17 years ago

Wow. That sure is a barrage of caveats. Nevertheless, this is awesome. I had the exact same idea last night and I could not sleep either; I put on a movie instead so kudos :) This is a really great idea and based on the shortcomings of Flash you described in your article it sounds like Google should have been doing this anyway. If they can take advantage of a new technology to better serve their users, why not?

mlLK3• 17 years ago

Only browser I got your app working in was Chrome. What browser were you primarily testing the application in? What version? Because Firefox just released an update this morning and it could very well be the culprit.

I not only could not get Firefox (3.5.5), IE7, or Safari to work with your HTML5 YouTube app, but I could not get YouTube's app to work either; I hope this fact mitigates your worries.

yesimahuman2• 17 years ago

Thanks. I did press the play button and nothing is playing. I just copied the whole youtube link into the box before watching. That's what you're supposed to do, correct?

felixmar• 17 years ago

Firefox does not support MPEG-4 video because of patent licensing issues. Firefox supports Ogg files with Theora video and Vorbis audio. Google has an agreement with MPEG LA and is therefore able to ship an MPEG-4 AVC decoder with Google Chrome.

ComputerGuru9• 17 years ago

OK, it's going to be super-slow right now because it's already been slashdotted.

Don't know why it's taking it down so badly, MySQL has been acting up for the past fortnight :S

EDIT: Just swapped services (from Apache to IIS) and it looks like everything's doing better.

r11t• 17 years ago

Here is a browser bookmarklet for your Youtube HTML5 video viewer : http://gist.github.com/229475

gcanyon• 17 years ago

On my macbook, using this viewer causes Safari to take about 20% CPU. Same video using flash takes about 13%. Flash doesn't seem to be CPU-evil on my machine.

radley• 17 years ago

A crow eating a dead rat? (Zhuangzi)

Tell HN: Couldn't Sleep Last Night, Wrote a (No-Flash) HTML5 Viewer for YouTube

Related Stories