Bookmark and Share

Usage of video tag with HTML 5

HTML 5 has introduced the latest video tag that supports all kinds of video streams on a webpage. This tag is used to embed video inside any particular HTML web page. The video tag of HTML 5 has been incorporated by most of the web browsers. It as well has got a hold up from the most important websites for example YouTube

The tag of the Hypertext Markup Language allows you to make use of various video streams for example movie clips, ads, and so forth sin your web page so that the users who visit your website can listen to music & as well as watch the video clips.

As we know that the tags used in HTML will consist of one or more attributes. The web designers generally make use of attributes along with the tag so that they can provide the web browser with more specific information as to how a particular tag should behave or appear on the web page. Each & every tag of HTML can be associated with 3 different types of attributes namely Event Handler Content Attributes, Element Specific Attributes & Global Attributes.

tag of the HTML language uses various attributes that indicate how any particular video on the web page should appear. Few of the most commonly used attributes with the tag are Loop, Preload, AutoLoad and so forth. If any particular web browser displays the text which is enclosed between the start & end of video tag then it means that the web browser you are using does not support the tag and such text which is displayed is referred to as Fallback Content.

One can include text between the beginning & closing of the tag. The intention of having content enclosed between the tags is to make sure that the users of old web browsers which do not support tag can try their hand on various video plugins and as well help the users by providing information how they can access videos with their old browsers.
Above all, this content is not anticipated to address ease of access. The motto of most of the web designers is to help the deaf, dumb, blind people & all other people who have some kind of physical disability by providing them a substitute for these video streams or by incorporating various user-friendliness options for example imposing sign language, providing subtitle tracks for the videos or giving captions and so forth.

The below example demonstrates the usage of tag on an HTML page and as well gives an overview on what is Fallback Content:

If the video VideoTest.mp4 plays successfully that means that your web browser is compatible with the tag but if the result of opening this Web Page is the text enclosed between the paragraph tag i.e.then it means that your web browser does not support the tag.

Lets us have a look at the different types of attributes which can be used with the tag:

Element Specific Attributes:

  • Loop: The Loop attribute when used along with the tag will play the video over & over again as soon as it finishes.
  • Preload: This attribute indicates whether the video embedded within the webpage should be loaded along with the web page or not. There are 3 different vales this attribute can hold:
    • None: If the Preload attribute value is set to none then it denotes that the video should not be loaded when the webpage loads.
    • Auto: If the Preload attribute value is set to auto then it denotes that the complete video should be loaded when the webpage loads.
    • Metadata: If the Preload attribute value is set to metadata then it denotes that only the Meta data associated with the video should be loaded & not the complete video.
  • Auto play: This attribute will play the video as soon the web page is loaded & the video has loaded & is ready to be played.

Event Handler Attributes:
As the name indicates that this attribute comes into action only when a particular event occurs. These attributes trigger a script which is embedded in the HTML page whenever an event takes place. Few of the most commonly used Event Handler Attributes along with the tag are:

  • onClick: The script embedded within the HTML page will be triggered when the user clicks on an object.
  • ondbClick: The script embedded within the HTML page will be triggered when the user clicks two times on the same object.
  • onPause: The script embedded within the HTML page will be triggered when the user stops any media resource.
  • onPlay: The script embedded within the HTML page will be triggered when the user starts playing media resource.

Global Attributes:
As the name indicates Global which means that these kinds of attributes are a standard for all the HTML 5 tags & not only the tag. The most commonly used Global Attributes are spell check, dir, access key, tab index, title, id and so forth. Let us discuss about few of the Global Attributes & their usage:

  • Spellcheck: This attribute indicates if spelling & grammar check should be included for a particular element. The values which this attribute can hold are true, false or just an empty string.
  • Dir: This attribute defines in which direction your text should be aligned. The possible values this attribute can take are rtl or ltr.
  • Title: This attributes gives additional information about any particular element on the web page.
  • Accesskey: This attribute will create the specified key as a shortcut for accessing the element.
  • Contenteditable: This attribute indicates that the content is editable or not. When used with video tag it signifies if the video can be edited or not.

Learn more here: HTML5 Video
Example: HTML5 Video Demo

Related Posts

  • Fluid Responsive HTML/CSS In this modern era of technology, having a website to promote your business operations is a must. If you are into a business where you cannot accept anything below average then it is time for you t...
  • Superb HTML5 and CSS3 demos CSS and HTML is one probably the best bridge between web designers. You should see this examples! Advanced transitions - Animatable, One property, two values, endless possiblities http://le...
  • HTML5 Boilerplate front-end template Whether one likes it or not, the demand for HTML 5 is ever booming in the web development industry nowadays. However cross compatibility issues are common among the web developers and they have bee...
  • Weights And Styles With The @font-face If people are on your website, they’re probably either skimming quickly, looking for something, or they’ve found what they’re looking for and want to read it as easily as possible. Either way, keep...

Leave a Reply

Current day month ye@r *