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.