HTML5 Video Tips

Tuesday, November 1, 2011

HTML5 Video Tips

HTML5 has a lot of new features. One of the coolest but not often utilized is the newelement. It allows pages to embed video files without requiring the user to download a plugin.

By default YouTube videos use HTML5 if the user’s browser supports it, and use Flash otherwise.

One of the unfortunate things about HTML5 Video is a lack of consistently supported formats – each browser supports its own list of formats, and there’s no single format supported by all of them. There is a built-in way of dealing with it, but unfortunately it still means encoding your video to multiple formats. Once you’ve done that though, you can put a element in yourelement for each version, and the browser will automatically go through them until it finds one it supports.

For browsers that don’t support HTML5 Video, you can put fallback code inside the element just like the <object> element. You can insert an alternate player, a link to download the video file, or a message letting users know that their browser doesn’t support HTML5 Video. Browsers with HTML5 support know not to display the content within the element, but others ignore the unknown tags and display everything inside them normally.

Another cool thing about HTML5 Video is that it’s directly integrated with JavaScript. Because you can use JavaScript to control the video, you can create your own custom controls, hide the built-in ones with the control attribute, and give your users a more consistent experience.

About Matcha Design

Matcha Design is a full-service creative B2B agency with decades of experience executing its client’s visions. The award-winning company specializes in web design, logo design, branding, marketing campaign, print, UX/UI, video production, commercial photography, advertising, and more. Matcha Design upholds the highest personal standards for excellence and can see things from a unique perspective due to its multicultural background.  The company consistently delivers custom, high-quality, innovative solutions to its clients using technical savvy and endless creativity. For more information, visit MatchaDesign.com.

Related Tags

You Might Also Like