Programming Tutorials

Simplest Way To Embed And Play Video Using HTML5

Pinterest LinkedIn Tumblr

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. Here you will learn the simplest way to embed and play video using HTML5 along wit displaying 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-party 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, 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

Author

Shuseel Baral is a web programmer and the founder of InfoTechSite has over 8 years of experience in software development, internet, SEO, blogging and marketing digital products and services is passionate about exceeding your expectations.

Comments are closed.