Contact for Expert ServicesAdvertise with Ecomspark.

HTML5 VIDEO TAG – How to play video in html5

Earlier there were no html standard tag or way to play video on a webpage. Video could only be played  with like flash.  But html5 introduced a video tag.

HTML Video – Browser Support

Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg:

Browser MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera NO YES YES

 

HTML Video – Media Types

File Format Media Type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

 

HTML Video – Methods, Properties, and Events

HTML5 defines DOM methods, properties, and events for the <video> element.

This allows you to load, play, and pause videos, as well as setting duration and volume.

There are also DOM events that can notify you when a video begins to play, is paused, etc.

WORKING OF VIDEO TAG

Here is the code to play a video file.

<html>
<video width="300" height="190" controls="controls"
src="/magic.webm"/>
 
If you are reading this, it is because your browser does not 
support the HTML5 video tag. 
</video>
</html>

The above will work only in chrome10.0,firefox 4.0,opera 10.5.But will not work in Internet Explorer because it does not support WebM format.

 

IE9 only supports Mpeg4.So we change the code to make it work in all browsers.The modified code is:

<html>
<video height="190" width="300" controls="controls">
<source src="/magic.ogg"  type="video/ogg"/>
<source src="/magic.webm" type="video/webm"/>
<source src="/magic.mp4"  type="video/mp4"/>
 
If you are reading this, it is because your browser does not
support the HTML5 video tag.
</video>
</html>

 

The browser picks one of the three formats available and plays the audio file.Click on the play button and listen to the song.

HTML5 VIDEO:THE CONTROL ATTRIBUTE

The control attribute of HTML5 specifies the browser to display the standard playback controls.There are various attributes in HTML5.

Optional Attributes

New in HTML5.

Attribute Value Description
autoplay autoplay Specifies that the video will start playing as soon as it is ready
controls controls Specifies that video controls should be displayed (such as a play/pause button etc).
height pixels Sets the height of the video player
loop loop Specifies that the video will start over again, every time it is finished
muted muted Specifies that the audio output of the video should be muted
poster URL Specifies an image to be shown while the video is downloading, or until the user hits the play button
preload auto
metadata
none
Specifies if and how the author thinks the video should be loaded when the page loads
src URL Specifies the URL of the video file
width pixels Sets the width of the video player

Add a Comment

Your email address will not be published. Required fields are marked *

Translate »