Audio and Video Tags of HTML5

Inbuilt tags in HTML5 for the Audio and Video.

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.

<video id="myvedio" width="320" height="240" controls="controls" >
    <source src="abc.mp4" type="video/mp4" />
    <!-If browser doesn't support this Tag then show this Line->Your browser does not support the video tag.
</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:

// JQuery code in Head Tag after adding JQuery Library on the page
<script>
    $(function () {
        var myVideo = document.getElementById("myvedio");
        $('#btn_play').click(function () {
            if (myvedio.paused)
                myvedio.play();
            else
                myvedio.pause();
        });
        $('#btn_small').click(function () {
            myVideo.width = 320;
        });
        $('#btn_Big').click(function () {
            myVideo.width = 560;
        });
        $('#btn_normal').click(function () {
            myVideo.width = 420;
        });
    });
</script>undefined</head>

<input id="btn_play" type="button" value="Play/Pause" />
<input id="btn_Big" type="button" value="Big" />
<input id="btn_small" type="button" value="Small" />
<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

<audio id="myaudio" width="320" height="240" controls>
    <source src="my.mp3" type="audio/mpeg" />
    <!-If browser doesn't support this Tag then show this Line->Your browser does not support the audio tag.
</audio>

Note - The <audio> tag is supported in Internet Explorer 9+, Firefox, Opera, Chrome, and Safari.