HTML5 Video Tips

Matcha Design - Tuesday, November 1, 2011

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.

Matcha Design Web Development Tutorial Series on HTML Video Tips

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 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 agency specializing in web designprintidentitybrandinginterface designvideo productionstill photography and motion design. Using our passion for excellence, multi-cultural background, and award winning practices, we consistently provide high-quality, custom, innovative solutions to meet the diverse marketing needs of our clients. For more information, visit www.MatchaDesign.com.

Copyright 2022 Matcha Design, LLC. All Rights Reserved.  Privacy Policy