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

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

neosmart.net

110 pointsComputerGuru56 comments

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.

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....

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.

Yes that got it! Thanks for the quick fix.

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.

   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.

sexy!

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/

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

That's pretty nice. Thanks!

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

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.

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

This doesn't do the replace inline, it just makes a link to the neosmart website which is quite slow at the moment.

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.

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/

From that link:

"Block evil Adobe Flash"

Great, more ideologists.

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.

There's enough bad things about almost any good thing...

I use Flash (Flex, actually) for my company's website and it works very well for us. Blanket-labelling it as evil is just silly. Flash is no more evil than a hammer.

A large install base and a decent authoring tool are the sine qua non of online rich media.

Silverlight has the latter; HTML 5 will eventually attain a decent install base; but Flash has both now.

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.

> 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)

You are right that Flash's accessibility support and the...lack of content providers taking advantage of them...sucks for all sorts of handicapped people, but it's still there and being improved on (hopefully) so it's not a total dead end for screenreaders. Plus, flash videos can be a good source for audio for the blind.

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.

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.

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.

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

fyi, the link works great in Safari.

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.

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.

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!

Thank you! and you're welcome :)

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

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.

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?

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.

Main development was with Safari, WebKit, Chrome, and Firefox on OS X. Couldn't get it to work with Camino.

Tested as well on Chrome for Windows. Of course, Internet Explorer doesn't work.

EDIT: Sorry, guess that's the effect of an all-nighter. It actually doesn't load in Firefox for me, either.

Well I'm not gonna blame you for it not working in Firefox. I've actually had to re-write client-side code (generally just quick hacks, similar to your project) solely for Firefox patching some sort of quirk or behavior change into their browser. It can get especially annoying if you're always testing with the most recent version.

Nevertheless its a neat app. ;)

I've been told it actually works on the iPhone and plays videos that fail to load due to format problems the normal way. =]

Well it doesn't seem to work on Iron (which is essentially Chrome) on Windows for me.

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?

Try this, http://www.youtube.com/html5 and if this will not play then it is most likely an issue with Firefox; try installing Chrome and see if that resolves the playback issue. I was experiencing the same issue in Firefox 3.5.5

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.

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

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?

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.

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.

What makes you think so?

What makes me think HTML5 is not for streaming? Streaming video technology works differently.

What makes me think companies with the concerns outlined by the OP would not consider HTML5? It would be much more difficult to control their content. Flash is great as a hard to penetrate content container. Exposing your content by using HTML + JS to display it is less than ideal if you want to serve ads/make it difficult to steal content.

But of course, you can download full HD TV shows without DRM from other places on the Internet. I consider Hulu proper punishment for people that have never heard of usenet.

http://www.youtube.com/html5

Youtube streams the file. Youtube also serves ads. Youtube, as exemplified by the OP and by my link is experimenting with an HTML5 player. But you are right. HTML5 has this problem of exposing the player, so any mechanisms in the javascript to force ad viewing can be more easily defeated.

A possible solution would be to track user session and force a new ad on every new session (so you can't clear cookies). That way ad tracking can persist outside of the video player itself by using the cookie.

The other problem is, who serves video files themselves anymore? So if Youtube, or any other video services who depend on ads to keep themselves afloat can't use the HTML5 video tag, who will?

Who will? Anyone who wants to serve video without interstitial ads. Think about the world before Youtube-like sites. How did we embed video? Often times hosted on our own servers. If I want to serve up a dynamic video for example, right now Youtube-like services do not allow me to do that. I think dynamic video is a great use case for the video tag e.g. splicing a use photo into video.

It seems to me that unless the ad is prepended to the actual video file then using javascript we can tell when an ad is playing and kill it/skip to the "real" content. On the other hand the average user probably does not have the expertise to kill ads, so maybe the point is moot.

Yes but someone can easily make a browser extension that kills it for them.

Or use firebug and inject javascript into the page.

I think people stopped embedding videos and started using third party tools because it makes it easier. Third party tools will always make it easier. No need to worry about bandwidth, file space, etc (even if the cost of these items are going down). And as long as these tools make it easier, these tools will probably want control of their players and will want to put ads in them.

Youtube streams the file.

No they don't, they use progressive download. This is very different from streaming.

Yes I know, and you can retrieve the FLV file from your cache too. Sorry for using the wrong technical term but for the point at hand it is irrelevant.

Actually it'd be more in YouTube's interest to control the playback experience since they use HTTP streaming, since the stream is less controllable by itself.

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.

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

A crow eating a dead rat? (Zhuangzi)

Reply on news.ycombinator.com