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 videos 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 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 September 2020.

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

What is Video Streaming and How Does it Work?

Video Streaming Solutions
Video streaming allows users to watch video over the internet.

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?

HTML5 video player
HTML5 video players have revolutionized the way we stream video.

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.

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

hls protocol
HLS streaming protocol has helped shape the world of 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. 

Other older protocols include RTMP, HDS, MSS, and 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.

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

embed video html5 tag
You can use the HTML5 video tag to customize different aspects of your video stream.

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:

HTML5 <video> tag browser support
The most recent versions of Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, and the Android Browser support HTML5 video streaming.

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

html5 video player
With the right training and team, you can develop your own HTML5 player.

Another option for embedding video content on your website is via your own HTML5 video player. 

Please note that building a custom HTML5 video player requires a combination of HTML and CSS coding. It also requires knowledge of the HTML5 Media API.  

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

HTML5 Video Player
Dacast’s HTML5 Video Player with white label features provides an out of the box platform for HTML5 live streaming and user experience customization.

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:

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

Conclusion

HTML5 video stream
The Video HTML5 script tag is used to embed a client-side script in JS (JavaScript).

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!

GET STARTED FOR FREE

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.

4 thoughts on “Optimizing HTML5 Video Streaming [Updated for 2020]

  1. Arthur Kim says:

    HI this is Jinseo Kim who in charge of online sales team on Hyundai Livart which is the famous furniture company in Korea, I would like to see the demo video of your program.

    I have some question whether it can be possible to add on our new website or not.
    (for advertisement purpose)

    • Harmonie Duhamel says:

      Hi Jinseo Kim, Thank you for your message. My colleague Gary will contact you shortly. Here is his direct contact if needed gary.dhillon@dacast.com
      Let us know if there is anything else we can help you with. Have a great day! Best,

    • Harmonie Duhamel says:

      Hi Dheeraj, I hope you are great. You should have received an email from my colleague Zac.
      If you did not receive his email, here are the answers to your questions:
      Is it possible to stream video directly from the S3 bucket without using a content delivery network server?
      -No, you cannot stream from our S3 without our CDN; we suggest using our embed codes/iframe URLs.
      Do we have any codec for video recording across all the browsers?
      -We suggest producing .mp4 files to upload to Dacast as this will prevent any possible uploading/transcoding issues.
      Let us know if you have any questions.
      Have a great day!

Leave a Reply

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