Week 7: Audio and Video

Audio and Video

In the final class until presentations we discussed the audio and video tags in HTML.
When it comes on to audio HTML5 provides a quick and easy way to add audio files to a website by way of the<audio> element. Unlike the <img> element, though, the <audio> element requires both opening and closing tags.

Audio

The HTML <audio> element is used to embed sound content in documents. It may contain several audio sources, represented using the src attribute or the <source> element; the browser will choose the most suitable one.

How do you play an audio file in HTML?

<audio controls>

  <source src="horse.ogg" type="audio/ogg">

  <source src="horse.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>

The controls attribute adds audio controls, like play, pause, and volume. Text between the <audio> and </audio> tags will display in browsers that do not support the <audio> element. Multiple <source> elements can link to different audio files. The browser will use the first recognized format.

Video

Before HTML5, there was no standard for showing videos on a web page.Before HTML5, videos could only be played with a plug-in (like flash).The HTML5 <video> element specifies a standard way to embed a video in a web page.

How do you play an video file in HTML?

<video width="320" height="240" controls>

  <source src="movie.mp4" type="video/mp4">

  <source src="movie.ogg" type="video/ogg">

Your browser does not support the video tag.

</video>

The controls attribute adds video controls, like play, pause, and volume.It is a good idea to always include width and height attributes. If height and width are not set, the browser does not know the size of the video. The effect will be that the page will change (or flicker) while the video loads. Text between the <video> and </video> tags will only display in browsers that do not support the <video> element. Multiple <source> elements can link to different video files. The browser will use the first recognized format.

For More Information on Video and Audio tags click here

This tag is very important one to learn it can add some flare to you website if implemented properly into the  webpage. We should see to try and learn how to implement these tags into our website efficiently.