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