HTML Media

Introduction of HTML Media tags

In this html media section we will learn all about <video> and <audio> tags like:

  • How to use Audio & Video tags?
  • What are their attributes?
  • And how we can decorate them according to our need?

With the revolution of technology, html becomes more advance and more interactive. The revolution of media in html increases the beauty and experience of web designing. We can create interactive and beautiful web page using HTML Media. There are several things in media like video, music, sound, animation and much more things.

Multimedia on the web is sound, music, videos, movies, and animations.

What is Multimedia

Multimedia comes in many different formats for examples: images, music, sound, videos, records, films, animations.

Web pages often contain multimedia elements of different types and formats.

Browser Support

Audio, video, and animation have been handled differently by the major browsers. Different formats have been supported, and some formats require extra helper programs (plug-ins) to work.

Multimedia Formats

The most common way to discover the type of a file, is to look at the file extension.

Multimedia files have formats and different extensions like: .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

Modern Media on the Web

HTML5 introduced two new elements that include playback functionality for supported media formats. These two new elements are audio and video.

HTML5 <audio>

The audio element can be used to add audio content to a web page. Files embedded in this way are played by the audio playback engine built into all HTML5 compliant browsers.

Audio Attributes -

Attributes Descriptions
src Defines the URL where the audio content is hosted.
type Defines the file format
controls must be specified or no visual element will appear to control playback of the content.
autoplay If this attribute is used, the audio will begin to play as soon as enough has been downloaded to begin playback.
loop When this attribute is present the audio file will automatically start over once it has played through.
muted If you want audio content to be muted when initially loaded, use this attribute.
preload This element can be used with the value none, metadata, or auto to tell the browser how much of the audio file to preload.

HTML5 <video>

The video element follows the same basic syntax as the audio element. All we need to do is use the src element to identify the video URL and add the controls attribute so that our website visitors can control video playback. We're also going to use the width and height attributes to set the size of the video player, but this is optional.

Video Attributes -

Attributes Descriptions
autoplay If this attribute is used, the video will begin to play as soon as enough of the video has been downloaded to begin playback.
loop When this attribute is present the video will automatically start over once it has finished playing.
muted If you want the audio content of the video to be muted use this attribute.
preload This element can be used with the value none, metadata, or auto to tell the browser how much of the video file to preload. Note that if autoplay is applied to a video element it will override the preload attribute.
poster Use this attribute to select an image to display as the poster for the video until playback begins.

Example of video tag

Formats and Support Problem

As we are talking about video and audio, these two media comes in many formats, so it’s might possible that some old browser may not support some formats. Now days maximum newly browsers support almost all media formats but it may they may not support some.

Policy

GDATAMART.COM is optimized for learning & job information; The users try to improve your knowledge and practical experience through this site but we cannot warrant full correctness of all content... Learn More → | Sitemap →

© 2020 GDATAMART | All Rights Reserved