Simplest Way To Embed And Play Video Using HTML5

HTML5 defines an element <video> to insert and play video within a web page. This element sets its src attribute to a local or remote URL containing a playable movie. You can also display playback controls by including the controls attribute along with defining dimensions of the video.

Following is a simple syntax for embedding video on a web page without any third parity add-ons or embedded codes from other sites.
 <video src="simple-video.mp4" width="600" height="350" controls></video>

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, 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 browser 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 which 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>
Here is a demo of embedded video which shows all the controls, poster image along with auto play feature and multiple sources of video for different formats.


Sample videos are taken from TechSlides

Read Next:How To Draw Lines And Shapes Using HTML5 Canvas

Simplest Way To Embed And Play Video Using HTML5
2017-04-08T09:28:00-07:00
Shuseel Baral
HTML5|Internet & Web Designing|Programming Tutorials|