MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to Add and Play Videos in HTML

This article will cover the Video tag available in HTML 5. I will demonstrate the functionality by giving some examples of playing videos from Youtube, Video File and Using DOM properties.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

Introduction:

This tutorial will deal with playing video on web pages using standard HTML. Tutorial will cover different kinds of method for displaying video on page. This tutorial will give you a basic understanding of the video tag and also show various examples of different integrations with other HTML5 features.

One of the most researched topic in HTML5 features is the video tag. Video tag is much more than simply an option to flash in the media. Compared to other ubiquitous HTML tags video tags recently joined the league but its capabilities and support across browsers have increased at an amazing speed.

Let us see how developers add videos: video files, including YouTube videos, are embedded into an HTML document using the tag. The src attribute defines what video file to embed into the page. The <embed> tag does not require a closing tag

Listed example will describe a simple example of embedding a video on page. For this we have taken a particular height and width to show the video. attribute control adds video controls, like play, pause, and volume adjusting seek bar.

Listing 1: Script to Adding Simple Video File on Page

<!DOCTYPE html>
<html>
<head>
<title>HTML Video Tag Example</title>
</head>
<body>
<video width="320" height="240" controls="controls" autoplay="autoplay">
<source src="Yes Bank Advertisment.mp4" type="video/mp4">
<object data="" width="320" height="240">
<embed width="320" height="240" src="Yes Bank Advertisment.mp4">
</object>
</video>
</body>
</html>

This figure is output of embeding simple video on page in HTML

Figure 1: This figure is output of embeding simple video on page in HTML.

Here we saw that the control attribute adds video controls, like play, pause, and volume adjusting seek bar. Also it can be seen that the video is being played in particular region on page, reason is we have included width and height attributes for playing the video. If height and width are set, the space required for the video is reserved when the page is loaded. However, without these attributes, browser will adjust itself or will display to full page.

There was no standard procedure to play video on web pages. Most videos today are shown through flash or various plug-in. However, different browsers may have different plug-ins. Without any standardized method it becomes difficult to provide different plug-ins for different browsers. As a remedy to this, HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element. This <video> element is supported by all major browsers such as Internet explorer, Google Chrome, Safari, Opera etc.

The <video> element was proposed by Opera Software in February 2007 Opera also released a preview build that was showcased the same day, and a manifest that called for video to become a first-class citizen of the web.

Playing YouTube Video on page:

YouTube videos can be included in HTML document as such Google offers the code to do so right on the same page as the video itself. There are few parameters that are included in the code offered by YouTube which helps to customize the embedded video object. Furthermore, if you go deep into the code, you will be able to identify the <embed> element and see the src attribute pointing to the URL of the media file.

You can also embed HTML video code into your web page using the <object> tag. To cater for browsers that don't support the <object> tag, you can nest the <embed> tag inside the <object> tag.

Listed example will cover a demonstration of adding YouTube video.

Listing 2: Playing YouTube Video on Page

<!DOCTYPE html>
<html>
<head>
<title>HTML Video Tag Example</title>
</head>
<body>

<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/tIBxavsiHzM" />
<embed src="http://www.youtube.com/v/tIBxavsiHzM" type="application/x-shockwave-flash" width="425" height="350" />
</object>
</body>
</html>
Above figure is example of demonstration of adding YouTube video on page

Figure 2: Above figure is example of demonstration of adding YouTube video on page.

The above script is supported by IE 7.

DOM for <video> Tag:

This section will cover the document object model method, properties and event for <video> element. There are various methods, properties, and events available which allows you to manipulate <video> and elements using JavaScript.

This provides developers with various display attributes (videoWidth, videoHeight), controls (Boolean): poster (URL), src (string) :), playback attribute (currentTime (float):,startTime(float):, duration (float), paused (float), ended (float), autoplay (float)) .

First in script you can see we have taken initially control attribute to add video control like play/pause volume and seek bar. Second, we have taken three functions for adjusting, size large screen, small screen and normal screen.

Listing 3: DOM properties and Methods

<!DOCTYPE html>
<html>
<head>
<title>HTML Video Tag Example</title>
</head>
<body>
<br>
<video id="custom_video_play" width="400" controls="controls">>
<source src="Yes Bank Advertisment.mp4" type="video/mp4"><source src="mov_bbb.flv" type="video/flv"> Browser Not Supporting
</video>
</div>
<script>
var myVideo=document.getElementById("custom_video_play"); 
function makeBig()
{ 
myVideo.width=650; 
} 
function makeSmall()
{ 
myVideo.width=350; 
} 

function makeNormal()
{ 
myVideo.width=450; 
} 
</script>
<div style="text-align:left">
<button onclick="makeBig()">Adjust: Large Screen</button>
<button onclick="makeSmall()">Adjust: Small Screen</button>
<button onclick="makeNormal()">Adjust: Normal Screen</button>
<p></p>
</body>
</html>
Above figure is an output of simple script; explaining DOM method and properties of <video> element in which you can see the three buttons for adjusting screen sizes and video control like play/pause, seek bar, volume control

Figure 3: Above figure is an output of simple script; explaining DOM method and properties of <video> element in which you can see the three buttons for adjusting screen sizes and video control like play/pause, seek bar, volume control.

Supported Video Format:

Which video formats browsers should support, the current HTML5 draft specification does not state. There are three video formats that work natively in some browsers. Unfortunately, no format works in all browsers, so you need to do at least two if you want meaningful HTML5 video support. MP4 video plays natively in Safari, Chrome, and IE9 (Vista/Windows 7). Recommendation: Minimally, MP4 + either WebM or Ogg, or maybe both.

Conclusion:

Tutorial covered how a video is embedded on a web page using <video> element and object definition and things regarding video format supporting browser version. Tutorial has also explained the document object model properties event for <video> element. Area of adding Video on page by HTML is very broad; although, tutorial covered basics of adding videos. Hope it will be very helpful to you. If you have any query please comment at mrbool site.



I am Software Developer from India. I hold B.Tech. in Computer Science & Engineering. I am having 2+ years experience of developing Web applications and Websites using HTML, JavaScript, CSS, C#.NET etc..

What did you think of this post?
Services
Know how to keep MrBool Online
SUPPORT US
SUPPORT US
With your help, we can keep providing free content and helping you to be a better professional
support us
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login