HTML5 Video

There are different ways to play videos on a Web Page.

Embedding Video in HTML Document

Inserting video onto a web page is not relatively easy, because browsers did not have a uniform standard for defining embedded media files.

In this chapter we'll demonstrates some of the many ways of adding videos on web pages, from the latest HTML5 <video> element to the popular YouTube videos.

Using the HTML5 video Element

The newly introduced HTML5 <video> element provides a standard way to embed video in web pages. However, the video element is relatively new, but it works in most of the modern web browsers. The following example simply inserts a video into the HTML5 document, using the browser default set of controls, with one source.

  • <video controls="controls" src="shuttle.mp4">
  •     Your browser does not support the HTML5 Video element.
  • </video>

A video, using the browser default set of controls, with alternative sources.

  • <video controls="controls">
  •     <source src="shuttle.mp4" type="video/mp4">
  •     <source src="shuttle.ogv" type="video/ogg">
  •     Your browser does not support the HTML5 Video element.
  • </video>

Using the object Element

The <object> element is used to embed different kinds of media files into an HTML document. Initially, this element was used to insert ActiveX controls, but according to the specification, an object can be any media object such as video, audio, Java applets, ActiveX, document (HTML, PDF, Word, etc.), Flash animations or even images.

The following code fragment embeds a Flash video into a web page.

  • <object data="blur.swf" width="400px" height="200px"></object>

Only browsers or applications that support Flash will play this video.

 

Warning:The <object> element is not supported widely and very much depends on the type of the object that's being embedded. Other methods could be a better choice in many cases. iPad and iPhone cannot display Flash videos.


Using the embed Element

The <embed> element is used to embed multimedia content into an HTML document.

The following code fragment embeds a Flash video into a web page.

  • <embed src="blur.swf" width="400px" height="200px">
 

Warning:However the <embed> element is very well supported in current browsers and defined as standard in HTML5, but your video might not played due to lack of browser support for Flash or unavailability of plugins.


Embedding the YouTube Videos

This is the easiest and popular way to embed videos files in the web pages. Just upload the video on YouTube and insert HTML code to display that video in your web page.

Here's a live example followed by the explanation of whole process:

Step 1: Upload video

Go to YouTube Upload video page and follow the instructions to upload your video.

Step 2: Creating the HTML Code to embed the video

When you open your uploaded video in YouTube you will see something like this on the bottom of video. Browse and open your uploaded video in YouTube. Now look for the share button, located just below the video as shown in the figure.

Share YouTube Videos

When you click the Share button, a share panel will open displaying some more buttons. Now click on the Embed button, it will generate the HTML code to directly embed the video into the web pages. Just copy and paste that code into your HTML document where you want to display the video and you're all set. By default video embedded inside an iframe.

Share YouTube Videos

You can further customize this embed code such as changing the video size by selecting the customization option given just below the embed-code input box. Here's an example:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  •     <meta charset="UTF-8">
  •     <title>YouTube Video</title>
  • </head>
  • <body>
  •     <iframe width="560" height="315" src="//www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe>
  • </body>
  • </html>
 
Close

Your Feedback:

 

We would love to hear from you! Please say something.