Following is a simple syntax for embedding video on a web page without any third-party add-ons or embedded codes from other sites.
<video src="simple-video.mp4" width="600" height="350" controls></video>Table of Contents
HTML5 Syntax of Video Element
Here is the full standard syntax of <video> element that embeds a video on a web page.
<video
accesskey="spaced list of accelerator key(s)"
autobuffer="true | false"
autoplay="autoplay"
class="class name(s)"
contenteditable="true | false"
controls="controls"
data-X="user-defined data"
dir="ltr | rtl"
draggable="true | false | auto"
height="pixels"
hidden="hidden"
id="unique alphanumeric identifier"
lang="language code"
loop="loop"
poster="URL of preview/standby image"
spellcheck="true | false"
src="URL of video"
style="style information"
tabindex="number"
title="advisory text"
width="pixels">
</video>Element Specific Attributes of Video Element
Here are some element specific attributes of <video> element which can be used while embedding and playing video on a web page.
autobuffer – It is a Boolean attribute which indicates the browser will begin buffering a video. This attribute can only be used if autoplay is not set.
autoplay – It is another Boolean attribute in-which the browser will play video as soon as it can, allowing no time for further buffering.
controls – There is another Boolean attribute which is set to indicate whether or not the browser should present controls for video, such as playback, pause, volume and seek.
loop – This Boolean attribute indicates the video should loop.
poster – This attribute sets the URL of an image to use in place of the video before it is loaded and playing.
src – This attribute is set to the URL of the video.
How to Embed Video on Web Page
Here is an example code which will embed a video “sample-video.mp4 ” specifying with its width and height along with displaying controls on a video.
<video src="sample-video.mp4" width="600" height="350" controls>
<strong> Your browser do not support HTML5 video</strong>
</video>If you are using XHTML5, the controls attribute on this code shows error. So you have to use the following code for XHTML5 code.
<video src="sample-video.mp4 " width="600" height="350" controls="controls">
<strong> Your browser do not support HTML5 video</strong>
</video>
In the above code, if the browser do not supported HTML5 video alternative text “Your browser do not support HTML5 video” will display.
Making Video Auto Play and Adding Loading Image
In the following example, the autoplay attribute was used to make embedded video playing automatically as soon as it can without allowing no time for further buffering along with poster attribute to use image before video playing.
<video src="sample-video.mp4" width="600" height="350" controls autoplay poster="loading.png">
<strong> Your browser do not support HTML5 video</strong>
</video>Embedding Multiple Videos on a Single Video Player
While embedding videos using HTML5, some of the browsers would not support certain video formats. In order to address the media support problem, you need to add alternative formats to use by including a number of <source> tags. Here is an example code for embedding multiple videos that can play supported formats of videos.
<video width="600" height="350" controls autoplay poster="loading.png">
<source src="html5-sample-video.mp4" type="video/mp4">
<source src="html5-sample-video.ogv" type="video/ogg">
<strong> Your browser do not support HTML5 video</strong>
</video>Read Next: How To Draw Lines And Shapes Using HTML5 Canvas
Comments are closed.