HTML5 video performance

For some weeks now, I have been developing an HTML5 based website and experiencing some major performance problems. These problems surely depend on the demands of the design, but since the coding still is very slim and uses only a few media types, I wonder if I overlooked something that causes these problems.

Before you say it – I know that a Flash website could easily do the same with vastly better performance. I try to get a similar functionality/design with only HTML(5), which should be possible by now.

I'm talking about a website with a full-screen video background (HTML5 ) and the main content on a wide, blac开发者_JAVA百科k-backgrounded middle column. The content can contain other HTML5 videos in YouTube/Vimeo-style size. This is where the CPU panics half way, and I work on a recent Mac Pro…

I set the video (of any size from 480i to 1080i) to scale with the window's width & height. I also set it to 1080i and 100% of size. I also added JavaScript to pause the background whenever one of the smaller project videos was in focus. All variations caused an unacceptable slowness in either browser or site situation (another video played).

I was told this example would have the best performance. But I duplicated the data rate and resolution without any benefit.

Who is an expert in web video performance?

Some things to look at: The HTML5 video and canvas elements use Hardware acceleration from your GPU and hence are dependent on not only the Browser but also the Machine the browser is running on. E.g. Chrome on a machine with a poor graphics card will be worse than Chrome on a machine with an upscale graphics card. You must also consider bandwidth and your network latency.

I would suggest eliminating the variables; load the video locally at first to cut out the network, then try from different machines of varying hardware capability and see what works best. You might also try different encodings. OGG vs m4v vs h264

Lastly I would look at the resolution. 1080i on a small screen may not really be worth it.

I think you should revisit your decision to use HTML5.

It doesn't matter if you have 8 cores, or even 2 CPUs. HTML5 is unfinished and the implementation is slow and buggy at the moment. You're probably doing everything right.

Watch the big players (vimeo, google), when they switch to HTML5 then that's probably the time to go with it. I don't agree with people who say "html5 is good for everything". I believe that for now it is unfortunately just good for iDevices (iphone, ipad)... where you have one browser so the specification is "set" here.

Also, you can't switch HTML5 VIDEO to fullscreen. I think that tells you a lot.