If you’re new to adaptive streaming, you may be wondering: what’s all the fuss about HTML5 video streaming?
Overall, HTML5 video streaming enables the manipulation of multimedia content using <audio> and <video> HTML tags. Using the <video> tag creates a native HTML5 video player, and allows additional options for customizing and displaying video content.
Of course, delivering clean, professional streaming video entails more than editing and formatting.
In this article, we’ll cover HTML5 video streaming and its key applications. Then, we’ll briefly review HTML5 video players and cover three ways to embed your video content on a website. These methods include direct embedding via an HTML5 video tag, developing your own player, and using an existing player.
Let’s get started with some background on the origins of HTML5 video streaming.
Please note that his post has been updated to reflect the most accurate information as of January 2021.
Table of Contents
- What is HTML5 Video Streaming and How Does it Work?
- What is an HTML5 Video Player?
- HLS Protocol for HTML5 Video Streaming
- How to Embed a PLayer for HTML5 Streaming
What is Video Streaming and How Does it Work?
Since the 1990s, we’ve had the ability to access video media content from our internet browsers. As you likely know, streaming a video implies playing the video while the rest of the file downloads in real-time.
This process affords the viewer a steady stream of content, instead of making them wait for the entire file to download locally before viewing.
However, there are three distinct methods for streaming video.
1. Using a Proprietary Format
The first method for video streaming is using a proprietary format streamed from a particular website that is exclusive to that site.
This method refers to, for example, .mov, .rm or .wmv files. When broadcasters first presented videos via the internet, most browsers did not have built-in video players. In most cases, websites could choose the video format with which to work.
From there, they would just provide the player and the video on the web page itself. However, some formats required a dedicated player (such as Apple QuickTime for .mov formats). Yet in those early streaming days, even videos that worked without a dedicated player were not easy to share.
This method is pretty much obsolete, but it is important to mention it since it is part of live streaming history.
2. Using an Intermediate Player
Another method for online streaming is using an intermediate player. YouTube is a perfect example.
YouTube was first launched in 2005, and over the following decade, the company helped make streaming video mainstream.
When users upload a video to YouTube today, viewers access the content through YouTube’s embedded player. Likewise, viewers can share the video content via a code that YouTube provides. Fifteen years later, YouTube is still quite popular.
However, modern browsers now include embedded video players of their own. This means that it’s not always necessary for a website to provide the player.
Although YouTube is free, the platform poses significant challenges for serious broadcasters and businesses. Naming only a few, these drawbacks include third-party branding with your video, loss of ownership of your content, and lack of monetization features.
These limitations pose the need for an alternate solution for broadcasters who want to stream on their own site.
3. Using HTML5 Video Streaming
The last method is HTML5 video streaming. This is the most modern approach and it makes it possible to stream on just about any sort of device.
With this final approach to streaming video, the website hosting the content uses native HTTP to directly stream the media to viewers.
Content tags (e.g., <video> tag) are part of the HTML code. Thus, using the <video> tag creates a native HTML5 video player within your browser. These tags provide direction to the HTTP protocol as to what to do with this content. HTTP displays the text and an audio player plays audio content.
Also, HTML tags have various attributes, or parameters, which provide further detail on how to present the content. For example, with the <img> tag, you can specify the size of the image.
More recently, HTML5 has expanded on the media capabilities of basic HTML. For example, enhancements to the <img> tag and the new <video> tag provide content creators more flexibility and ease in presenting media content.
This flexibility allows broadcasters to deliver media without worrying about which browser a given visitor uses.
What is an HTML5 Video Player?
Until fairly recently, the main method of delivering video via the internet was Adobe’s Flash video technology.
In recent years, however, this protocol has been largely replaced by video delivery protocols like HLS streaming and played in HTML5 video players. Today, Flash is considered an outdated streaming protocol.
As described above, HTML5 video streaming provides more modern streaming solutions for streaming videos directly from a website. Before HTML5, sites relied on embedded flash players to display videos to users.
With the HTML5 video element, the streaming process has been streamlined and improved for viewers and broadcasters alike. Furthermore, HTML5 videos can stream on all types of devices. Many mobile streaming devices, on the other hand, cannot handle flash videos.
Overall, HTML5 video streaming provides a simpler way to use video on web pages. Before its publication as a markup language in 2014, videos could only play in a browser with plugins like Flash. By using HTML5, developers no longer worry about which browser or which extension their visitors use.
Additionally, HTML5 simplifies video delivery by providing support for various attributes, elements, and tags to assist with the structure of your webpage. These support features include article and section and multimedia tags that support adding video and audio formats to your content.
HLS Protocol for HTML5 Video Streaming
In recent years, HLS has become a common protocol for streaming video over HTML5 players.
These technological advancements have been advantageous for both broadcasters and viewers. In particular, broadcasters can modify both HTML5 and HLS to their specifications. Additionally, these protocols are safer, more reliable, and faster than earlier technologies.
If you’re new to the term, HLS is an acronym for HTTP Live Streaming. HLS is a media streaming protocol used to deliver visual and audio media to viewers online.
First launched by Apple in 2009, HLS streaming is now often preferred by broadcasters for its wide support on multiple browsers and devices.
How to Embed a Player for HTML5 Streaming
Now that you understand the history and purpose of HTML5 video players, we’re going to dive into a few approaches to HTML5 streaming.
Yo begin let’s discuss the three main ways to embed videos on your website:
- Use the HTML5 <video> tag directly in your browser;
- Create your own player; and
- Choose a ready-made HTML5 player.
1. Embed a Video with HTML5
When you’re setting up HTML5 video streaming on your website, you must declare the following:
- A <video> tag
- The URL of the video
- Any stylistic requirements you might want to customize (for a more appealing video player than the base player)
*Note: It’s important to note that the <video> tag is a simple piece of code you can add to your webpages.
The standard <video> tag provides the following functionality:
- Specify the width and height of the player
- Display or hide video controls, including play/pause, volume, full-screen toggle and seek slider
- Set a poster image to display while the video is downloading or not playing
- Provide a set of videos in different formats, so that each browser can play a format it supports
- Include closed-caption subtitles or captions in multiple languages
- Tell the browser whether to start downloading the video when the page loads or only when the user presses “Play”
- Control autoplay settings
- Decide whether to play content once or in a loop
- Indicate if you’d like to play the video without sound (muted). For example, automated videos on Facebook display the mute option overlaid on the video
Note: We’d like to point out that although the HTML5 <video> tag is considered the most widely supported video player element, not every version of every browser supports it. If users visit your site using earlier versions than the below browsers, they won’t be able to watch any videos displayed using HTML5:
It’s also important to note that HTML5 video streaming requires technical knowledge and dedicated resources. Therefore, it’s best to opt for an existing HTML5 player, like the one from Dacast, if you lack the knowledge to manipulate HTML5 code.
Optimizing HTML5 Video Tag
There are a few ways to get the most out of the HTML5 <video> tag.
The first thing to pay attention to is your format. Using standard formats allows users to easily play videos. MP4 (MPEG-4) is the most widely-used format. However, Ogg and WebM formats are becoming more widely known.
WebM is now supported by recent versions of Chrome, Firefox, Opera, Safari on OS/X, and Microsoft Internet Explorer 9 and up (requires WebM MF components). With this development, multiple formats mean easier viewing.
A major optimization hack in video delivery is to lower the lag time or latency. Today, video is the most popular form of content consumption. Users spend mere seconds waiting for videos to start playing.
Broadcasters will also want to optimize your control settings. Here’s a quick breakdown of a few common settings to pay attention to:
- Physical size: Set maximum physical size to provide control over uploads and lower lag time. Using a 1280×720 frame size, for example, is usually plenty for most videos.
- Length: Trim videos to capture the most compelling frames.
- Quality and Bitrate: Adjust these settings to decrease file size without a significant impact on perceived video quality.
- Video-Codec: Generally, you can use the default settings to normalize and optimize the video for the web. However, in some cases, you want to manually set the codec to further lower file size.
- Compression: Always compress video files before using them on your site.
Other Key HTML5 Tags
The <video> tag is not the only tool in your HTML5 toolbox for optimizing videos. For example, listing the <source> tags along with their corresponding <type> tags in an optimized order can improve your video performance.
This is demonstrated in this sample code:
<video width=”480” controls> <source scr=”https://myweb.org/webm/video1.webm” type=”video/webm”> <source scr=”https://myweb.org/mp4/video1.mg4” type=”video/mp4”> <source scr=”https://myweb.org/ogg/video1.ogv” type=”video/ogv”> <track kind=”captions” src=”sampleCaption_he.vtt” scrlang=”he”> </video>
Keep in mind that a browser will play the first supported format type. In other words, the first entry in the list is the default. Chrome and Firefox will play the WebM video, while predecessors to Microsoft Edge will skip to the MP4 video.
It is recommended that you list the most-supported and smallest video first to ensure that file plays by default.
Using some additional tags will help you customize your video player. Here are a few options:
- <width> tag controls the width of the video that plays.
- <controls> tag is a Boolean attribute that allows users to access playback controls.
- <track> tag creates a transcript to increase content accessibility.
- <embed> tag creates a container for external media.
Lastly, if you want the video to start automatically, use the <autoplay> video element.
2. Develop Your Own HTML5 Player
Another option for embedding video content on your website is via your own HTML5 video player.
Without specifying any code that styles the HTML5 video player, the appearance of the player is quite basic. It also depends on the browser from which the video plays.
Providing a consistent interface for HTML5 video streaming on your site is also useful for branding purposes and visual presentation.
Again, it’s important to note that HTML5 video streaming is a fairly technical option best suitable for people with requisite coding knowledge. Otherwise, an existing HTML5 player built by a dedicated team is a better option if you lack the technical know-how.
This brings us to the third option for HTML5 video streaming now.
3. Use an Existing HTML5 Player
If you are new to broadcasting, we highly recommend using an existing HTML5 player.
As we mentioned above, many HTML5 players already exist and can be easily customized by broadcasters to best represent their brand. This allows users who don’t have the technical knowledge for HTML5 video streaming to still broadcast their chosen video.
Here are some viable video players available today:
- Some HTML5 players use VideoJS as their base and add more functionality to the basic player. An example is the Dacast all-device video player, which offers functionality to stream live video and a customizable player skin.
- JW Player is a for-pay HTML5 video player that supports 4K video and adaptive bitrate streaming.
- Other solutions include Flow Player, jPlayer, and Mediaelement.js.
Native HTML5 video doesn’t support RTMP app streaming nor HDS protocols. However, JW does support these two protocols. So, as mentioned above, if you plan to use a solely HTML5 video player, HLS is probably the best protocol for you.
We’d also like to point out that some existing HTML5 video players, including the one from Dacast, are built for low latency streaming. Any video you stream with a Dacast video player automatically uses low latency streaming.
To recap, HTML5 video streaming enhances web pages and engages visitors better than text alone. To retain viewers, broadcasters must optimize HTTP live streaming to ensure quick, smooth, and compatible video delivery for viewers. Using HTML5 media tags properly ensures that your content is accessible and keeps visitors coming back.
In this article, we defined HTML5 video streaming and video players. We also discussed different ways to stream live video on your website via embedding. Additionally, we’ve highlighted some common pros and cons of each method.
Not yet streaming with Dacast and ready to give our platform a try? We offer a range of new and advanced features, including China video hosting and monetization options, at affordable prices. Click the button below to sign up for our 30-day free trial (no credit card required). We’ll help you start streaming in a matter of minutes!
After reading, what’s your take on embedding video using HTML5? Still have questions you’d like us to answer, here or in future articles? Let us know in the comments! We love to hear from our readers, and we’ll get back to you as soon as we can. For exclusive offers and regular tips on live streaming, you can also join our LinkedIn group.
Thanks for reading, and happy streaming.