Optimizing HTML5 Video Streaming

DaCast is pleased to introduce Tzipora Elias, who is going to share with us key points to optimize HTML5 Video Streaming. 

If you’re new to live streaming, you may be wondering–what’s all the fuss about HTML5 video streaming?

Simply put, HTML5 video streaming enables the manipulation of multimedia content using the <audio> and <video> HTML tags. Using the <video> tag creates a native HTML5 video player, and allows additional options to customize and display the content.

Of course, delivering clean, well-streaming video is more than editing and formatting. The good news is that live streaming video is not out of reach, even for brand new broadcasters! Secure video upload and high-quality content delivery can be done well 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 some of its applications. We’ll also briefly review HTML5 video players. Next, we’ll cover three ways to embed your video content on a website–directly via an HTML5 video tag, by developing your own player, and by using an existing player.

What is HTML5 Video Streaming?

Since the 1990s, we’ve accessed video media content from our internet browsers.  “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. There are three different methods for streaming video:

  • (1) Using a proprietary format streamed from a particular website, only on that site.
HTML5 video streaming

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. They could then provide the player and the video in the webpage itself. However, some formats required a dedicated player (such as Apple QuickTime for .mov formats). Yet, early on, even videos that worked without a dedicated player were not easy to share.

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

When uploading a video to YouTube, viewers can access the content through YouTube’s embedded player. Likewise, viewers can share the video content via a code that YouTube provides. While YouTube is still very popular today, most 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.

  • (3) Using HTML5 video streaming.

With this approach, 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. 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.  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 expands 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?

As described above, HTML5 video streaming provides relatively new streaming solutions for streaming videos directly from a website. Before HTML5, sites relied on embedded flash players to display videos to users. Today, the HTML5 video element has streamlined and improved the streaming process for viewers and broadcasters. Furthermore, HTML5 videos can stream on all types of devices. Some mobile devices, on the other hand, cannot handle flash videos.

HTML5 video streamingOverall, HTML5 video streaming provides a simpler way to use video on webpages. Prior to its publication as a markup language in 2014, videos could only play in a browser with plugins like Flash. By using HTML5, developers don’t need to 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.

In the following sections, let’s discuss the three main ways to embed videos on your website:

  • by using the HTML5 <video> tag directly in your browser;
  • by creating your own player; and
  • by using a ready-made HTML5 player.

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

HTML5 video streamingThe 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 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. It’s best to opt for an existing HTML5 player 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:

  • HTML5 video streamingFormats: Using standard formats allows users to easily play videos. MP4 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. Video has become the most popular form of content consumption. Users spend mere seconds waiting for videos to start playing.
  • Controls to optimize include:
    • Physical size: Setting a maximum physical size provides control over uploads and again lowers lag time. Using a 1280×720 frame size is usually plenty for most videos.
    • Length: Trim videos to the capture the most compelling frames.
    • Quality and Bitrate: adjusting these settings can decrease file size without a significant impact on perceived video quality.
    • Video-codec: Using the default generally normalizes and optimizes the video for web. However, in some cases manually setting the codec can further lower file size.
    • Compression: Always compress video files prior to using them on your site.

Other HTML5 Tags

The <video> tag is not the only tool in your HTML5 toolbox for optimizing videos. Listing the <source> tags along with their corresponding <type> tags in an optimized order can improve your video performance.

For an 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>

A browser will play the first supported format type. 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. Listing the most supported, smallest video first ensures that file plays by default.

  • <width> tag controls the width of the video played.
  • <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.

Developing Your Own HTML5 Player

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.

HTML5 video streamingWithout specifying any code that styles the HTML5 video player, the appearance of the player is quite basic. It 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 the requisite coding knowledge. An existing HTML5 player built by another team is a better option if you lack the technical knowledge.

Using an Existing HTML5 Player

HTML5 video streamingAs 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 player, which offers live video streaming functionality and a customizeable 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.

Do you use another video player for HTML video streaming? Share your thoughts and experience for our readers in the comment section below.

Conclusion

To recap, HTML5 video streaming enhances web pages and engages visitors better than text alone. In order 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. We also highlighted common pros and cons of each of the methods.

So 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 *