Optimizing HTML5 Video Streaming [Updated for 2020]

HTML5 Video Streaming

If you’re new to live 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. The good news for broadcasters today? Live streaming video is no longer out of reach for less tech-savvy users or businesses. Now, broadcasters can successfully upload secure video and deliver high-quality content via some JavaScript, CSS, straightforward code, and a solid understanding of the HTML5 <video> tag.

In this article, we’ll first explain HTML5 video streaming and its key applications. We’ll also briefly review HTML5 video players. Next, we’ll cover three ways to embed your video content on a website. Specifically, these include (1) direct embedding via an HTML5 video tag, (2) developing your own player, and (3) using an existing player.

Let’s get started with some background on the origins of HTML5 video streaming.

What is Video Streaming and how does it work?

video streaming

Since the 1990s, we’ve accessed 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 waiting for the entire file to download locally before viewing. However, there are three distinct methods for streaming video:

  • (1) Using a proprietary format streamed from a particular website, only on 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 webpage 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.

  • (2) Using an intermediate player such as YouTube.

First launched in 2005, the first YouTube video launched in April of that same year. Over the following decade, the company helped to bring streaming video into the 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 as well as the video content.

And though free, YouTube 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.

  • (3) Using HTML5 video streaming.

HTML5 video streamingWith 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 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 devices, on the other hand, cannot handle flash videos.

HTML5 video playerOverall, HTML5 video streaming provides a simpler way to use video on webpages. 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 streaming with an HTML5 Video Player

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, users can modify both HTML5 and HLS to their specifications, and they 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. (Other protocols include RTMP, HDS, MSS, MPEG-Dash.) You can read more about HLS in general, and HLS streaming with an HTML5 video player, in our post on hls streaming protocols.

With that background in mind, 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

HTML5 video streaming from your website involves declaring:

  • a <video> tag,
  • the URL of the video, and
  • any stylistic requirements you might want to cater (for a more appealing video player than the base player).

*Note: 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 automatically playing the video as soon as it’s ready.
  • 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: not every browser supports the HTML5 <video> tag. 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 Dacast’s, if you lack the knowledge to manipulate HTML5 code.

HTML5 Video Tag – Key Optimization Points

Here are a few ways to optimize usage of embedded video using the <video> tag:

  • Formats: 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.
  • Video Size: Rule #1 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. (For more on setting up a low latency HTML5 channel with Dacast, check out this post.)
  • Optimize control settings:
    • Physical size: Sett a 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

1. 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.

For example, look at this 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>

2. 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 older Internet Explorer versions will skip to the MP4 video. List the most-supported and smallest video first to ensure that file plays by default.

  • <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

Next up, another option for embedding video content on your website is via your own HTML5 video player.  First, note that a custom HTML5 video player requires a combination of HTML and CSS coding. It also requires knowledge of the HTML5 Media API.  (This article provides some code examples for creating a custom HTML5 video player with Javascript.)

HTML5 video streamingWithout 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 another team is a better option if you lack the technical know-how.

Let’s take a closer look at that third option for HTML5 video streaming now.

3. Use an Existing HTML5 Player

As explained above, many custom HTML5 players already exist. These players typically include flash functionality. This allows users who can’t do HTML5 video streaming to still access their chosen video.

Here are some viable video players available today:

  • VideoJS is a free open-source HTML5 player that uses Javascript and CSS. More than 400,000 websites across the web use this particular player.
  • Some HTML5 players use VideoJS as their base and add more functionality to the basic player. An example is the Dacast all-device HTML5 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.

Also, note that native HTML5 video doesn’t support RTMP or HDS streaming protocols. So, as mentioned above, if you plan to use a solely HTML5 video player, HLS is the choice for you.

Do you use another video player for HTML video streaming? Share your thoughts and experience for our readers in the comment section below. We love to hear and learn from other broadcasters’ experiences!

Conclusion

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. And we highlighted some common pros and cons of each method.

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.

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!

YES, SIGN ME UP

Thanks for reading, and happy streaming.

By Tzipora Elias.

Leave a Reply

Your email address will not be published. Required fields are marked *