Post
Ask Question

Audio and Video Tags of HTML5

Audio and Video Tags of HTML5 

 

Video Tag

 
This Tag specifies video, such as a movie clip or the other video streams. Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg.
  1. <video id="myvedio" width="320" height="240" controls="controls" >  
  2.     <source src="abc.mp4" type="video/mp4" />  
  3.     <!-If browser doesn't support this Tag then show this Line->Your browser does not support the video tag.  
  4. </video>  
To change the size and Play/Pause the video, you have to create some buttons in HTML and write some JavaScript / JQuery codes for the activities such as:
  1. // JQuery code in Head Tag after adding JQuery Library on the page  
  2. <script>  
  3.     $(function () {  
  4.         var myVideo = document.getElementById("myvedio");  
  5.         $('#btn_play').click(function () {  
  6.             if (myvedio.paused)  
  7.                 myvedio.play();  
  8.             else  
  9.                 myvedio.pause();  
  10.         });  
  11.         $('#btn_small').click(function () {  
  12.             myVideo.width = 320;  
  13.         });  
  14.         $('#btn_Big').click(function () {  
  15.             myVideo.width = 560;  
  16.         });  
  17.         $('#btn_normal').click(function () {  
  18.             myVideo.width = 420;  
  19.         });  
  20.     });  
  21. </script>undefined</head>  
  1. <input id="btn_play" type="button" value="Play/Pause" />  
  2. <input id="btn_Big" type="button" value="Big" />  
  3. <input id="btn_small" type="button" value="Small" />  
  4. <input id="btn_normal" type="button" value="Normal" /> 
Note:- The <video> tag is supported in Internet Explorer 9+, Firefox, Opera, Chrome, and Safari.
 

Audio Tag

 
This tag defines sound, such as music or other audio streams. Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg
  1. <audio id="myaudio" width="320" height="240" controls>  
  2.     <source src="my.mp3" type="audio/mpeg" />  
  3.     <!-If browser doesn't support this Tag then show this Line->Your browser does not support the audio tag.  
  4. </audio>  
Note - The <audio> tag is supported in Internet Explorer 9+, Firefox, Opera, Chrome, and Safari.