Menu
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, black-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?
587
With the introduction of HTML5, you can now place videos directly into the page itself. This makes it possible to have videos play on pages that are designed for mobile devices, as plugins like Adobe Flash Player don't work on Android or iOS. The HTML <video> element is used to embed video in web documents.
At a minimum, you should include in the source tag an MP4 with H. 264 with AAC/MP3. This is currently the most widely supported desktop and mobile HTML5 video format. By adding in a second video source in Ogg or WebM in your code you can avoid almost all issues.
HTML5 video works by allowing the person uploading the video to embed it directly into a web page. It works in a variety of internet browsers, including Internet Explorer 9+, Firefox, Opera, Chrome and Safari. Unfortunately, the technology is not compatible with Internet Explorer 8 and earlier versions.
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.
56
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
