Broad Network


HTML 5 Video

HTML5 Basics - Part 10

Forward: In this part of the series, we see how to have video played in a web page.

By: Chrysanthus Date Published: 21 Jul 2012

Introduction

This is part 10 of my series, HTML5 Basics. I assume you have read all the different parts of the series before reading this one. In this part of the series, we see how to have video played in a web page.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent, etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Video Files
Like images, video exists in files in the server. In order to have video played in a web page, you have to type the HTML 5 video element into the web page code. Video files also exist in different types. These different types are of different technologies.

Basic Inclusion of Video
Assuming that you know the URL of a video file in the Internet and you have the right to access the file. The basic way to have that file played in your web page is to type the following video element in the code of your web page:

<video src="http://www.URL.com/to/the/file.ext">
</video>

The video element has the src attribute. The value of this attribute is the URL to the video file in a server. The URL ends with the name of the video file and the file extension (ext).

An example of a video file type (technology) for the src attribute is, ogg. The extension for ogg video files is, .ogg. So if you have the ogg file, myvideo.ogg, in the same directory as your web page, the following code will include the video in the web page.

<video src="myvideo.ogg">
</video>

It may be possible that the browser of the user would not support (play) the type of video you have included. In this example, the user’s browser may not support the ogg video type. HTML 5 gives you a convenient way to indicate to the user that his browser does not support the video type (technology). To achieve this you just type the remark in between the start and end tags of the video element, like in,

<video src="myvideo.ogg">
You browser does not support the video technology!
</video>

Video Element Attributes
There is a problem with the above video tags: they are more or less the same thing and they are too basic. The above tags would function, but the video may not play. If you want the video to start playing as the web page and video file are completely downloaded, then you would have to type the autoplay attribute into the start tag as follows:

<video src="myvideo.ogg" autoplay>
You browser does not support the video technology!
</video>

In practice there may be some delay before you see the video.

The autoplay attribute does not take a value. Its presence alone means that there should be auto-play. Its absence means that there should be no auto-play. There are other attributes for the video element. You can have more than one attribute in the start tag for any HTML 5 element, as long as they are relevant. Here is a list of video element attributes and their meanings.

Attribute: Meaning
src: the value is the URL of the video file in a server.
autoplay: there is no value for this attribute. If the name (autoplay) is present, the video will start playing as soon as the web page is downloaded. If absent, the user will have to click the play button (see below), before he sees the video.
loop: this attribute does not have a value. If the name is present the video will keep repeating from the beginning to the end over and over until the user leaves the web page. If absent, the video would play only once.
controls: this attribute does not have a value. If present, the browser provides controls (buttons) such as the play, pause, and volume controls. With such controls the user can decide when and for how long he would play the video.
audio: the value for this attribute is, muted. "muted”  is the only possible value for now. If the attribute and its value are present, the sound of the video would be muted (silenced).
poster: the value for this attribute is a URL. In many cases videos take time to load. While the video is loading, an image (poster) that represents the video can be displayed. The URL, which is the value of this attribute should be that of the poster.

Boolean Attributes
An attribute such as autoplay, which does not take a value and whose effect depends on whether it is present or not, is called a Boolean attribute.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Related Links

Major in Website Design
Web Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT

Comments

Become the Writer's Fan
Send the Writer a Message