Blog

HTML5, Video, Canvas, and Ext JS

HTML5 is coming. All of us at Ext are excited to embrace the new standard as it gains acceptance. This post will examine two notable HTML5 developments—Video and Canvas. The <video> tag allows for native video rendering, removing the current need for third-party plugins like Flash. Likewise, the <canvas> tag has a clean yet very powerful API allowing you to draw complex graphics at the pixel level.
As a part of HTML5, the <video> element can be customized and manipulated with CSS and JavaScript, giving us a great deal of control over how the video is presented to the user. With a little imagination we can create useful components, in this example we'll create a "live video" thumbnail:
The image above is an Ext JS web desktop, showing a video of an HTML5 video element in a window. Nothing too exciting... until you mouse over the taskbar button for the video player. Here, I have used a <canvas> tag to render a small preview which is live-updated from the actual video.
Building a HTML5 Video Window
In this installment, I'll show you how to put a video element in a window and set up the preview quicktip using a fairly small amount of code.
We'll start off with an extension to Ext.Panel which allows us to display HTML5 videos:

You'll notice that I've registered the extension as 'html5video'. This will allow you to use xtype: 'html5video' in a panel or window. We're going to use the Ext JS web desktop example. If you haven't seen it already you can find it here.
Next we'll add the html5video panel to a web desktop window, and the canvas preview to the taskbar button (you can follow along if you download Ext 3.0 and extract it on a web server, and edit sample.js in examples/desktop/).
Paste the html5 extension code above and the video window app below into the bottom of sample.js, or replace it with this version.

In the source above, I have specified two files in the src param. This isn't a playlist, but the video format fall back order. Not all browsers support the same formats so you have to include multiple sources, starting with the format that Firefox supports.
You can now open the web desktop example in Firefox 3.5+, or Google Chrome and go to Start->Video Window. This demo should also work on a webkit-nightly build (HTML5 video has yet to be added to Safari 4).
Here is the finished product.
Falling back
The HTML5 video tag allows for a general fallback in browsers that aren't supported. The html5video Ext extension has an optional parameter, 'fallbackHTML'. You can use this to provide your own message to upgrade or the flash player equivalent.
YouTube and HTML5 (webkit only)
YouTube provides a h.264 (mp4) source for any video. Although it isn't obvious, you can get at the h.264 source url and pass that to the video tag. Unfortunately this doesn't work for Firefox, and YouTube doesn't provide an OGG Theora source. The YouTube HTML5 Viewer essentially creates an HTML5 video tag with the YouTube h.264 source.
Conclusion
Modern browers have implemented the the HTML5 video element even while HTML5 is still in the drafting stage.
Despite the issues with codec support, we can still use it and build tools around the API.

Webstandard-Blog

Lucas

Before to begin Html 5 features, please correct the Html 4 bugs.
ExtJs have a lot of memory leak problems never solved with browser (most with firefox),
If we add graphicals and videos functions, computers will burn alone without these corrections.

t-shirts

html5/css3 is a great promise but how long will it take before we can be sure all our surfers can see it?
they just started to bury ie6 now, and looks like eternity until all surfers will be able to read html5/css3

Diyet

As a part of HTML5, the element can be customized and manipulated with CSS and JavaScript, giving us a great deal of control over how the video is presented to the user. With a little imagination we can create useful components, in this example we’ll create a “live video” thumbnail:

Zay?flama

html5/css3 is a great promise but how long will it take before we can be sure all our surfers can see it?

As a part of HTML5, the element can be customized and manipulated with CSS and JavaScript, giving us a great deal of control over how the video is presented to the user. With a little imagination we can create useful components, in this example we’ll create a “live video” thumbnail:

car wallpaper

Jeux de foot

Before to begin Html 5 features, please correct the Html 4 bugs.
ExtJs have a lot of memory leak problems never solved with browser (most with firefox),
If we add graphicals and videos functions, computers will burn alone without these corrections.