Viiideeeooo
A HTML5 Video and Canvas Test
This is my HTML5 stress test using the Video and Canvas tag in HTML5 and the corresponding
JavaScript methods.
The goal here was to copy the Video rendering from
Yooouuutuuube.com, which is a Flash
rendering Youtube Videos in a nice way.
Follow the White Rabbit:
Playability:
Your browser has to be capable of the Video and Canvas tags and methods. Your MSIE till v8.0 will not work, but if you use (which is in all situations recommended) another (actual) browser it will most likely work.
However not all browsers are capable of all video codecs used in HTML5, you have to decide for yourself which video you use in which browser. If your browser does not support the codec of the video you've choosen it will most likely just dont play the video.
(Please note: I have only tested this script in Opera and Firefox. Both of those are only capable of using the OGG Theora and OGG Vorbis codecs, this is why the video i provide for testing is in OGG format only.)
Some explanatory notes about performance and features:
Performance (The following is only true for Windows 7!): At this moment of progress in HTML5 Firefox is not the fastest browser for javascript and HTML5. On my Core 2 Duo E8500 Firefox is dropping the framerate from the intended 30 FPS to about 21 FPS while stressing one core of the CPU at full load.
Besides the fact that i'm a Opera Fanboy for 8 years now, i recommend to use Opera for this test, with Opera i have the full 30 FPS while stressing the CPU with 45% average load (means one core is nearly at 90% load).
Features: At this moment (will of course change in the future) Firefox does not know the
<input type="range" /> tag. Since my goal was to use HTML5 to it's full potential, i decided to use this tag for the seek bar and volume control bars, leading to the fact that in Firefox you don't have the capability to use those features. If you want to use those (cool) features you have to use Opera or another browser capable of those tags.
To cut a long story short: I suggest using Opera instead of Firefox, at this moment it works much better than Firefox.
(Please note: I don't use any browser switches, those are bad behaviour. Instead i check if the browser is capable of the features used, which leads to a correct error handling.)
A word to all the developers:
All scripts on this site do not use any server side technologies, it's just plain HTML and Javascript.
Take a look into the page source code, the javascript is well documented and should be easy for you to reuse (please respect the license below).
Here are some Questions i'd been asked from the guy who made Yooouuutuuube.com:
Q: I have actually wondered how well an HTML5 implementation would run...
A: well, fast enough to do a smooth animation on an actual cpu, but i wish it would be faster.
Q: I'm not yet familiar enough with the canvas element to write a port.
A: neither was i, but there are at least *some* documentations available out there, but its hard to find them. html 5 is still in "working draft" status by the w3c, so i was happy to find at least something. in general the opera developer page was a huge help: http://dev.opera.com/ opera is one of the w3c members that worked on the specification of html5.
Q: I noticed your comment about the security errors. Forgive me but I am basically a novice when it comes to HTML5--Is there a security sandbox model for accessing data cross-domain?
A: unfortunately, there is. have you read the w3c specification i linked in the comment? its a bit complicated written, but it simply says: when you render foreign content with code you *could* use to save the image data to your computer (means: you can see the data that some user has opened in another frame or page, performing a css attack) it throws an hard access forbidden exception.
Q: If so is it possible to specify on an external domain (using a crossdomain.xml file or something) permissions for your domain to render content from it?
A: as much as ive seen - no.
Q: I see from your comment you are using a different copy algorithm but, not being familiar with HTML5, I'm not really sure what's going on here. I'd love a walkthrough of your methodology!
A: the differences are simple:
i now use only the "drawImage" methods, which only is capable of copying image data from a canvas or video to a canvas, and therefore does not throw an security exception. there are 3 copy commands, the first is moving the whole scene one video tile width to the right, the second is copying the most right fully visible tile "slot" (over the whole height of the canvas) to the left to perform the line feed necessary, and the third is simply copying a new video frame from the video tag to the canvas.
before (during development) i used a different method for the 2nd copy command:
i used "getImageData" to buffer the most right strip to a image buffer (which is simply a variable holding the image data) BEFORE the (now) 1st copy command, and used "putImageData" to write the strip back to the canvas afterwards, which preserved the correct copy order with no video frame visible twice. this is now the 2nd copy command.
the catch about it: because i copied the image data to the memory, i would be able to send me that data over ajax for instance, and therefore the sandbox model was kicking in for foreign video data and giving me the finger (although theres no real sense to prohibit copying video data).
the performance was exactly the same, regardless which copy method i used, which gives me hope for future projects that one can do very advanced image processing with that commands.
Q: Maybe I could give suggestions to help with performance.
A: well, the performance is a bit tricky. i tried to use a algorithm that copied every video frame at a time from the right strip to the left, i thought the massive amount of pixels copied in one step would made the copy process slow, but i was not right.
in fact it seems like theres no real speed impact when it comes to image size, only the amount of copy commands dictate the performance, which is a bit silly.
maybe this will change in future, but there is little hope imho.
License:
This whole website and the scripts used herein are published under the following license:
Viiideeeooo.de von
Sebastian Wüst steht unter einer
Creative Commons Namensnennung-Keine kommerzielle Nutzung-Weitergabe unter gleichen Bedingungen 3.0 Deutschland Lizenz.
Impressum:
Haftungshinweis: Trotz sorgfaeltiger inhaltlicher Kontrolle uebernehmen wir keine Haftung fuer die Inhalte externer Links. Fuer den Inhalt der verlinkten Seiten sind ausschliesslich deren Betreiber verantwortlich.