HTML5 video tag is used to provide video content linkage within your HTML5 webpage. Video tag has "src" attribute it its basic form. Video file itself is not part of the page and it is usually stored on the server or somewhere in the cloud.
Basic form of the HTML5 video tag is:
<video src="videos/VideoFile.mp4"></video>
If we open an HTML5 webpage with this simple form of video tag, we’ll be able to see video displayed just like an image. There will be no controls or other video player artifacts that we normally see when viewing video online. The reason behind this situation is in the lack of additional controls that are used to start, stop, pause and rewind our video embedded in HTML5 webpage.
There are workarounds if you want to start this video file without user interaction. All you have to do is to set autoplay attribute of our HTML5 video tag. Autoplay auto starts our video playing upon video load completion process. The other way to startup video playing is via JavaScript. Please note, this video file will start autoplay as soon as metadata of this file is loaded and browser understands codec required to by this video file.
Example of video autoplay attribute within HTML5 video tag:
<video src="MyVideo.webm"
autoplay></video>
There are other HTML5 video tag attributes useful for playing video in automated fashion. For example, loop attribute makes your video to restart automatically after it is finished. It is not common to allow video to play continuously for indefinite time. In order to set number of times you want to play your video, you can use JavaScript.
Example of video autoplay and loop attributes within video tag:
<video src="MyVideo.webm"
autoplay></video>
Another useful attribute of HTML5 video tag is poster. It is designed to be used to present an image for your video before it starts playing as well as display an image in case your video file became unavailable for a playback.
Example of video autoplay, loop and poster attributes within video tag:
<video src=" MyVideo.webm"
autoplay loop poster="
MyVideoPoster.png"></video>
It is uncommon to set width and height of our video player and HTML5 has two more attributes that do just that. They are width and height attributes of HTML5 video tag. You can set these attributes by providing pixels as size or percent sign.
Example of video autoplay, loop, poster , height and width attributes within video tag:
<video src=" MyVideo.webm"
autoplay loop poster="
MyVideoPoster.png" width="120px" height="240px"></></video>
One of the important and useful HTML5 video tag attributes is a control attribute. It is used to allow user rich user interaction with video via set of controls.
Example of video autoplay, loop, poster , height, width and controls attributes within video tag:
<video src=" MyVideo.webm"
autoplay loop poster="
MyVideoPoster.png" width="120px" height="240px" controls
></></video>
Finally, HTML5 video tag has preload attribute. This attribute is used to notify browser ahead of time what kind of video file we are about to play on the browser. The preload attribute take on several values such as none, metadata, auto.
Example of video autoplay, loop, poster , height, width, controls and preload attributes within video tag:
<video src=" MyVideo.webm"
autoplay loop poster="
MyVideoPoster.png" width="120px" height="240px" controls
preload="none"></></video>
- None attribute is used to limit bandwidth usage
- Metadata attribute is used to play first frame and let browser know about video file content and start progressive download.
- Auto instruct HTML5 compatible browser to star downloading entire file content.
HTML5 video tag is one of the newer tag in the arsenal of HTML and useful because it makes video playing across browsers consistent and universal.