Adding video to your web pages can be a challenge as videos come in many different formats. The formats include mp4, WebM, ogg, QuickTime, avi, flv, H264, Flash video and more. We may need to convert some of the video formats into formats that can be supported by major browsers. One of the methods is to use the video element. The video element only supports only mp4, WebM and ogg. Besides, some of the browsers may not support the aforementioned video formats.The video element comprises several attributes, they are src, width, height, poster, controls, autoplay, preload, none, auto, and metadata. We shall examine the meaning of the aforementioned attributes.
|src||specifies the source (path)of the video|
|width||specifies the width of the video player|
|height||specifies the height of the video player|
|poster||specifies an image to be displayed while waiting for video to load|
|controls||Enable the browser to provide controls for playback|
|autoplay||specifies that the video starts to play automatically once loaded|
|preload||instructs the browser what to do with the video file when the page loads. It has three values, none , auto and metadata. The value none means the video is not loaded until the user presses the play button. The value auto means the video file is downloaded automatically. The value metadata means the browser just gather the video file information|
|loop||specifies that the video will be replay once ended|
To embed a video file in a web page, use the following HTML structure:
<video width="320" height="240" preload controls loop> <source src="video.mp4"> Your browser does not support the video tag. </video>
You can add more attributes as listed in the table.
<!DOCTYPE html> <html> <head> <title>Embedding Video in HTML</title> </head> <body> <video width="320" height="240" preload controls loop> <source src="slot2.mp4"> Your browser does not support the video tag. </video> </body> </html>
To embed an audio file in your web page, you can use the audio element. The audio element comprises attributes similar to the attributes of the video element. The audio element only supports the mp3 and the ogg format. The preload controls load the audio player control buttons. The autoplay attribute starts playing the audio file when the web page is loaded.
The HTML structure of embedding an audio file is
<audio preload controls autoplay> <source src="audio.mp3"> Your browser does not support the video tag. </audio>
<!DOCTYPE html> <html> <head> <title>Embedding Audio in HTML</title> </head> <body> <audio preload controls > <source src="audio.mp3"> Your browser does not support the audio tag. </audio> </body> </html>