Guidance portal

World of Guidance and Education

AUDIO AND VIDEO CODE

Some websites' contents require placing multimedia in the webpages e.g. website of songs or movies or lectures. In this chapter we will learn to insert audio and videos in webpages.

Inserting audio is different from insertinG video, therefore this chapter has been broken into two parts.

Audio code:

Two tags are used to insert audio.

  • <embed>
  • <audio>

<embed>

<embed>, the earlier (old) tag, performs the function to insert music file. This tag has been replaced now by <audio> tag. However it is still used because of its compatiblity with older browsers.

<audio>

<audio> is the latest tag for inserting audio files on the webpages. It has advanced features as compared to <embed> and used now a days. The drawback of its usage is incompatbility with older browser.

See the syntax below for inserting audio music. The explanation of each attribute is given in detail below. Firstly code of <audio> is shown followed by <embed>.

     <audio src="/music/your music.mp3" preload="auto" controls>
    <embed
    src="/music/your music.mp3"
    width="300"
    height="90"
    loop="false"
    autostart="false" />
    </audio>

"src"

src defines the path of your audio file. src="your audio file path".

"preload"

Preload allows the designer (programmer) to choose whether the audio starts automatically loading when the page loads or otherwise. If automatically loading is required; the attribute "preload" should be used with word "auto" (as shown in syntax above). Otherwise write nothing and the audio will not load as the page loads.

"controls"

Controls allows the designer (programmer) to choose whether the audio controls (play, pause, stop button) displays or not. If audio controls are required; the attribute "controls" should be used (as shown in syntax above). Otherwise write nothing and the audio controls will not be shown.

"loop"

This defines whether the audio should replays when once finishes or not. HTML provides two options 1) true and 2) false to choose between.

"autostart"

This defines whether the audio shall automatically start playing when it is ready or otherwise. Two options 1) ture and 2) false are provided to choose between. If "autostart" is present, preload will be ignored.

Lets insert the audio code and see how does it look like on the browser. Please note that this code does not lead to real audio (you have to insert your on audio files using this format for desired audio).

    <!doctype html>
    <html>
    <head>

    <title>our first web page</title>
    </head>

    <body><audio src="/music/your music.mp3" preload="auto" controls>
    <embed
    src="/music/your music.mp3"
    width="300"
    height="90"
    loop="false"
    autostart="false" />
    </audio>
    </body>
    </html>

    Browser view

    Audio embed code for html

Video Code:

Video code is not diffrent from audio code, just replace the <audio> tag with video <video>, defines the hight and width of video screen and rest is same.

Please read the syntax carefully. The attributes have already been explained above in audio code.

    <video src="/video/THIS IS THE PLACE FOR YOUR VIDEO" width="400px" height="400px" controls>
    </video>

Lets insert the video code and see how does it look like on the browser. Please note that this code does not lead to real video (you have to insert your on video files using this format for desired video).

    <!doctype html>
    <html>
    <head>

    <title>our first web page</title>
    </head>

    <body>
    <video src="/video/THIS IS THE PLACE FOR YOUR VIDIO" width="400px" height="400px" controls>
    </video>
    </body>
    </html>

    Browser view

    vido embed code for html

comments powered by Disqus