HTML5 and CSS3 Fundamentals – Streaming Video Content

How to Set up Streaming Video Content in HTML5

Now that you’ve learnt all the basic components of HTML5, It’s time to wrap up this discussion by looking at how you can set up streaming video content. You’ll also learn how to add a streaming video in a web page.

First and foremost, it’s important to understand how video content streaming works. Whenever, you’re watching for a video from a web browser, the information comes in smaller chunks. So, when you’re watching these smaller chunks of video, what’s actually happening is that video being displayed has been encoded using multiple bitrates and resolutions that creates the smaller chunks of multiple sizes that you’re watching on your web browser.

This is how your browser is able to display these chunks of information that you watch on your web browser. It’s also important to define the video standards that are accepted in HTML 5. Modern browsers and even mobile browsers support can play videos directly. Note that the video file formats supported in HTML5 are .mp4, .ogv, and .webm. So, if you are considering streaming video content on a web browser, then the only file formats that are supported are .mp4, .ogv, and .webm.

But this doesn’t mean you can’t embed your video into any web browser. You can still convert that video content that you’d like to stream into either of the file formats using “video converter” applications that can easily be downloaded from the internet. If you want to convert your videos, just search these apps on a search engine.

The search engine will display quite a number of them. Download and install the app so that you can convert any video into a file format of your choice.

Preparation of the Video Content

So, how do you prepare a video content to be streamed to a browser? Here’s is what you should do before adding any video content on your HTML page:

  • Convert the video that you would like to add to a web page into a file format that’s easily recognized on most devices and browsers. The most common video file formats that are supported include: the .mp4, the .ogv, and the .webm.
  • If you’re developing your website for people who may have the non-Flash browsers, then it’s important to help the browsers to automatically switch to HTML5 fallback mode when a non-Flash browser is encountered while browsing.
  • You can use a couple of applications that can help you achieve this functionality. One such application is JW Player. Download and install the application.
  • Follow the instructions of the application to help you configure browsers that are likely to switch automatically to HTML5 fallback mode.

Adding the Video Streaming Content to HTML Page

Well, now that you’ve prepared the video that you’d like to add to a webpage, it’s now time to add that video content on an HTML page. Addition of video to a webpage is done by the <VIDEO> element. The basic <VIDEO> element has a couple of attributes that specify other characteristics of video that’s to be streamed to a web browser.

One such attribute is the “src” attribute that specifies the URL where the video to be streamed to a web browser is located.  For instance, the HTML code below illustrates how a video that’s located on C: can be streamed on a webpage:


<VIDEO src="C:\Music.webm" controls>

</VIDEO>

Other attributes of the <VIDEO> element include:

  • Autoplay. The Autoplay attribute is used to notify the browser to begin downloading the video and playing it the moment the webpage is loaded.
  • Preload. It’s used to notify the browser about whether the optimistic downloading of the video the video’s metadata is important.
  • Poster. It’s used to notify the image to be displayed before the video loads on a web browser.
  • Controls. They display the default video controls such as play and pause.
  • Height. It defines the height of the video in pixels when displayed on a web browser.
  • Width. It defines the width of the video in pixels when displayed on a web browser.
  • Loop. It automatically loops the video, when the video has finished playing.

GET YOUR FREE HTML5 & CSS3 EBOOK!

(Visited 421 times, 1 visits today)