The Complete Guide to HTML5 Video Format for Desktop and Mobile Web

By Scott Cliburn on June 04, 2021

Media consumption continues to skyrocket. Video streaming is more engaging than ever, with potential customers at your fingertips. 

Register Now: Click to Join Our Upcoming Live Event

Surely you want to provide the best video streaming to keep users engaged. To do this, you need to consider how and where your viewers will be consuming your content. In almost all scenarios, HTML5 is your best option when it comes to video streaming. 

But what is HTML5? To better understand how HTML5 can make your life easier, keep reading this handy guide to HTML5 video format! 

What is HTML5? A Brief History

Over the years, HTML has had many iterations. The version most people "grew up" with is HTML 4.01. Throughout the 2000s, CSS and Javascript functionalities revolutionized the HTML world. 

Now, since 2011, we have had HTML5. This adds the ability to include audio and video in a webpage with a single tag. 

HTML - The Gateway Code

In the 90s, developers had access to the very first version of HTML (HyperText Mark-up Language) invented by Tim Berners-Lee. While not a coding paradigm, many techies could start their journeys into digital development with HTML.

HTML5 is holding firm in the modern-day world full of constant change. For a more detailed history, learn more here

Structure 

The structure of HTML has always been one of the more simple options for web design. In fact, it is not even considered a coding language. Instead, it is a markup language

It defines data through tags, such as <video> or <audio>. A web browser can "read" what the HTML describes and display headers, video, and more accordingly. 

Advantages 

Along with the added audio and video capabilities, HTML5 has brought a whole package of new advantages. Just some of the benefits include:

  • Cleaner code with the new version of markup language
  • Improved accessibility through display improvement 
  • Mobile optimization 
  • Cross-browser compatibility 
  • Geolocation - cater content specific to a user based on location

The Evolution of HTML

It's clear that HTML has gone through many iterations over the years. But where did it really come from?  

HTML5 Has Come a Long Way 

Since 1993 with the first rudimentary HTML, capabilities have consistently improved. Early web creation tools such as Dreamweaver, FrontPage, et al. made web design more accessible. Forward to today, where the design tools most are familiar with are WordPress, Squarespace, Shopify, and Wix.  Website creation need not be a source of consternation.

What is a PWA? 

A PWA, or Progressive Web App, is a way to deliver content in an app-like format via the web. Essentially, it ensures a webpage can be viewed on any platform that uses a common browser, especially desktop and mobile. This is achieved through the now core functionalities of HTML, CSS, and  Javascript. 

HTML5 Applications 

HTML5 has far-reaching applications. Due to PWA, it's clearly useful for web apps. But it also has Smart TV app capabilities. 

In particular, it is now possible to use HTML5 in video streaming. Let's look at how that works! 

HTML5 Video Streaming: How it Works

Streaming a video means that a video will begin to play - and keep playing - while the file downloads. There are three options when it comes to streaming video. One is HTML5, and the others are proprietary formats and intermediate players. 

It's essential to know the differences between these other options, so let's go over them quickly. 

Other Video Streaming Options 

The first of these other methods involves using a proprietary format. This method isn't used often in this day and age as browsers have improved their video-playing capabilities. HTML5 does not natively support .mov, .rm, or .wmv files so if you must play this file format, proprietary formats may still be useful.

The second option is an intermediate player. Intermediate players are like YouTube. It's a middle ground where you can upload videos. You can then view these videos through an embedded player specific to the original uploader.

So, to play a YouTube video, you would need a YouTube-specific embedded player. 

While players like YouTube are still trendy, they aren't necessary for playing videos. HTML5 could be a better option for you now that modern-day browsers already have embedded video players. 

HTML5 Video Player

The HTML5 video format player is versatile and native. It allows a scriptwriter to make many adjustments. From autoplay to automatic mute, you can be assured that your video will play as you intend it to. 

zype_video_player

The ability to upload secure and high-quality videos even for those not well-versed in the tech world is revolutionary. There are also some distinct advantages over the other video streaming options. You don't need to worry about third-party branding, dedicated players, or sharing difficulties. 

Perhaps most importantly, you now won't have to worry about requiring Flash. Flash is no longer in development by Adobe, nor is it supported by most browsers as of late 2020, and it's best to avoid it if possible. HTML5 already loads faster and is easier to implement than the Flash plugin was. 

For more about building your digital video infrastructure, we offer a complete guide to building and scaling your digital strategy

HTML5 Video Embed 

Embedding an HTML5 video tag requires only a few lines of code to create a native video player. Simply using a <video> tag will create the video player. To change the video format, simply change the video/mp4 to video/ogg or video/webm.

To give an example of what your code might look like: 

<video width="450" height="300" controls>

<source src="movie.mp4" type="video/mp4">

</video>

You should be aware that the <video></video> tags will be displayed if the browser does not support HTML5 video. However, none of the additional lines of code should show. 

Along with embedded videos, you should consider other factors for how to make your webpage more engaging. Consider adding Embedded Code Sharing

Some of the most important adaptations you can make to your video plays are listed below. 

Width and Height

Setting the width and height is crucial; otherwise, when the page loads, it may flicker. This results in a less than optimal viewing experience.

Controls 

HTML5 allows the script-writer to add functionality through the controls attribute. This includes the added capability for users to pause, play, and adjust the volume of the video. 

Extra Settings

By changing the "controls" tag of the code to "autoplay," your video will play automatically. To make sure it is also automatically muted to avoid user annoyance, simply add "autoplay muted." However, you should be aware that most Chrome-style browsers do not support autoplay. 

Beyond these main features, the following are also settings you can alter to your liking: 

  • Length
  • Quality
  • Bitrate 
  • Compression
  • Manual codec settings 

HTML5 Video Format for Desktop and Mobile Streaming 

The HTML5 video format capabilities include three options to play: MP4, WebM, and Ogg. You should note that the Safari browser does not support Ogg, WebM is supported by only 58% of browsers, and MP4 is disabled by default in Firefox 24. 

Desktop HTML5 Video Format 

Due to the fact that the three options are not always natively supported by every browser, it is a good idea to have a backup. 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. Both options are fairly equally supported in different desktop browsers. 

HTML5 for Mobile

Similar to the situation on a desktop, not one single video format is universally supported. MP4 is the most supported, supporting Android, Safari, Firefox, and Internet Explorer browsers to recent versions.

Beyond browsers, MP4 is also supported on iOS and Android. 

It’s good to note that you don't generally have to worry about having a second different HTML5 video format for mobile. For most modern mobile devices, the same video file you use for the web. 

Beyond MP4, WebM and Ogg are both supported on Android 2.3+ and most modern Android devices. For older devices, you will have to consider 3GP/MPEG4.

What Else Should I Know About Video Streaming? 

Now you understand how HTML5 works and what the best HTML5 video format is. To add to this knowledge, you should consider learning how video streaming can help you in other areas. 

Zype's HTML5 web player provides a fast, high-quality video playback experience for viewers across desktop and mobile web. If you want to learn more about the Zype player, you can do so here.

Harness the power of Zype's video infrastructure