HTML 5 Media Tags For Embedding Videos and Audio: Basic HTML

HTML 5 Media Tags For Embedding Videos and Audio: Basic HTML


Video and Audio are one of the best way of sharing information to each other. Nowadays video and audio in websites have been almost compulsory. Before inducing the HTML5, putting video and audio in websites is very hard in practical. But when html5 has been induced, it has been too easy to add in websites and blogs. HTML5 has provided its standard for showing the videos in any web document although some of the browser does not support them.
video and audio html 5 tag

Some browser that support the video element of html5. They are IE(internet explorer) 9+, Chrome, Firefox, Safari and Opera but internet explore 8 and its earlier version do not support it.

Here is a syntax or example of HTML 5 Video Embedding tag:

<!DOCTYPE HTML>
<HTML>

<head>
<title>Video implementation in web document</title>
</head>

<body>
<h1>This is an example of HTML 5 Video Embedding Tag</h1>

<video height="410"  width="530">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
This is not supported.
</video>

</body>
</HTML>

In above example, there you can see the two type of video format: one is .mp4 and another is .ogg. The both shouldnot be written when you want to show your video but one among these two is compulsory. The HTML 5 video embedding tag <video> only support either .mp4 format video or .ogg format video.
But it is very important to include height and width of the video. The included width and height will occur the area when the page is opened. After including video you should also include some text between <video> and </video> tag that will appear if your video does not appear on the webpage.


  • The .mp4 video format is supported by internet explorer but IE does not support ogg file. 
  • Chrome supports both video types .mp4 and .ogg.
  • Safari only supports .mp4 file.
  • And Opera suports only .ogg file.

Except the .mp4 and .ogg video file, the html 5 video embedding tag also supports WebM file but it is less used in the web page.

You can use DOM (Document Object Model) to make your video more user effective and friendly.

Here is an example of Audio Embedding

<!DOCTYPE HTML>
<HTML>

<head>
<title>Video implementation in web document</title>
</head>

<body>
<h1>This is an example of HTML 5 Audio Embedding Tag</h1>

<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audeo/ogg">

This is not supported.
</audio>

</body>
</HTML>

Unlike the video tag, in audio you should not put the attribute height and width of audio tag. You just should apply the <audio></audio> and between them just place the source tag and the type of audio either ogg or mpeg or mp3 file.


  • Internet explorer only supports the mp3 file
  • Chrome support all of the file .mp3, .ogg and also the wav which is less used.
  • Safari support the two .mp3 and wav file.
  • And opera supports .wav and .ogg only.

For better style of your audio looks, you can use the document object model. 

Thank you very much for supporting us. I hope this tutorial help you to put video or audio file into your web page directly without any obstacles and hardness. For more information, comment us.

Reactions

0 Comments :

Post a Comment

Any comment will be appreciated, comment will be published according to our comment policy