In recent years, you may hear the term "HTML5" from time to time as it is the fastest growing web development trend and HTML5 video as a part of HTML 5 becomes the new way to stream video online. To put it simple, before HTML5, a video could only be played in a browser with a plug-in (like flash). However, HTML5 allows you to embed video on a page similar to how you can embed an image.
Till now, iPad, iPhone, Android and all new browsers declare the support for HTML5 video. That’s great. But do you know how to create a HTML video? What formats and browsers are supported by HTML5 video? What's difference between HTML 5 video and flash? Just keep reading, I will answer all of these questions on this article. If you read this and something was missing that you really needed, please let me know.
Part 1 What Formats Do I Need for HTML5 Video?
There are 3 important video types which are supported by HTML5: MP4, WebM, and Ogg/Ogv.
MPEG-4 is the HTML5 supported file format that has been around longest. The MPEG-4 file type is generally encoded in H.264 which allows for playback in third party Flash players. This means you don't need to keep a .flv video copy to support a fallback method!
WebM uses the VP8 codec that is owned by Google. It has high video quality, but it can take a lot longer to encode a video in WebM than in H.264. The format is already supported by Opera, Google Chrome, Firefox 4+, and most recently Internet Explorer 9. It's still unknown by most web professionals but WebM is the leading video media format in the future of web video.
Ogg uses Theora encoding which is based on the open-source standard audio file format. These can be saved with a .ogg or .ogv extension. Ogg is the only standard that is truly unencumbered by patent.
If you want to embed HTML5 video to web successfully, you need a HTML5 Video Converter to make these three versions of your video - OGG, MP4, WebM. Video Converter Ultimate allows you to convert videos to HTML5 compatible WebM, Ogg and MP4 files quickly. If necessary, just download it and have a try.
Video Converter Ultimate – Convert Video to HTML5
This HTML5 Video Converter allows you to convert almost all videos to HTML5 compatible WebM, Ogg and MP4 easily.DownloadDownload
Part 2 What Web Browser/Device supports HTML5 Video?
Browsers that support HTML 5 video support 3 video formats MP4, OGG and WebM, but not all browsers support the same format which may make you confused.
MP4 Supported Desktop Browsers
Safari 3.1+ Chrome 3.0+
Internet Explorer 9.0+
Firefox 21, 24 (disabled by default in 24, depends on system codec)
MP4 Supported Mobile Browsers
Android Browser 3.0+
Safari (iOS) 3.1+
Firefox (Android) 17.0+
Internet Explorer (Windows Phone) 9.0+
WebM Supported Desktop Browsers
WebM Supported Mobile Browsers
Android Browser 2.3+
Ogg Supported Desktop Browsers
Ogg Supported Mobile Browsers
- Android Browser 2.3+
Part 3 How to Embed Video Using HTML5
Inserting video onto a web page is not relatively easy, because browsers did not have a uniform standard for defining embedded media files. Therefore, if you are not a developer, I'd like to recommend you an alternative way. You can host the HTML5 video on free services like YouTube and Vimeo. Then, all you really need to care about is inserting the embed code onto your page and you are good to go.
Step 1. Find an efficient HTML 5 video converter to help you make a video in an appropriate format. (I have recommended one in Part 1).
Step 2. Go to YouTube Upload video page and follow the instructions to upload your MP4/OGG/WebM video.
Step 3. When you open your uploaded video in YouTube, click the Share button. A share panel will open displaying some more buttons. Now click on the Embed button, it will generate the HTML code to directly embed the video into the web pages. Just copy and paste that code into your HTML document where you want to display the video and you're all set.
Part 4 What is the Difference: HTML5 Video Vs Flash?
On performance: In terms of performance and usability, HTML5 loads faster and consumes less power than Flash content.
On platform dependence: Flash Player is platform independent, which means that Flash content will look the same, whether you're viewing it from your computer or mobile phone. In contrary, HTML5 elements are not pre-made in exact form, so they will look and behave differently when accessed from different browsers. This means web designers have to create different versions of their websites.
On development: Developing flash content is easier and faster. HTML5 is a fairly new technology, so it has limited capabilities at this point. Although developers will adopt the new platform, it would still be a long road ahead.
On ease of installation: Adobe Flash Player is an external plugin that you would need to install to your browser to view Flash content.HTML 5 doesn't require an external plugin, but you would have to use a browser that supports h.264 video codec and WebM format to play content made using HTML 5.
I hope this introductory guide can answer the most common and most-concerned questions about HTML5. In 2016, user interface and experience are more important now than ever. We can see many websites implement HTML5 video in the background. You can do the same thing, but please always use Video Converter Ultimate to prepare your videos to HTML5 supported format first.