HTML AUDIOS AND VIDEOS

 

HTML  AUDIOS:


  • To embed audios in HTML we have to use the <audio> element with its src attribute or the <source> child element with its src and type attributes for each.
  • The <source> element will be explained further below.
  • You can specify a text inside the <audio> element that will be shown as a fallback in browsers that don't support embedding audios.
  • A Warning! Embedding audios on your web pages when not necessary will annoy visitors esp. if they automatically play.

HTML Audios Attributes

  • autoplay: if specified, the embedded audio will automatically begin to play as soon as it can do so.
  • controls: if specified, the embedded audio will have controls provided by the browser 
  • loop: if specified, the embedded audio will play over and over again in an endless loop.
  • muted: if specified, the embedded audio will be muted.

The autoplay, controls, loop and muted. attributes are Boolean attributes they do not need a value. They just need to be present at the start tag.

Attribute Controls:

<! DOCTYPE html> 

<html> 

        <head>

            <title> Controls </title>

        </head>

        <body>

                <audio src="audio.mp3" controls> 

                </audio>

        <body>

<html>

Attribute Autoplay:

<! DOCTYPE html> 

<html> 

        <head>

            <title> Autoplay </title>

        </head>

        <body>

                <audio src="audio.mp3" autoplay> 

                </audio>

        <body>

<html>

Attribute loop:

<! DOCTYPE html> 

<html> 

        <head>

            <title> audio loop </title>

        </head>

        <body>

                <audio src="audio.mp3" loop> 

                </audio>       

        <body>

<html>

Attribute muted:

<! DOCTYPE html> 

<html> 

        <head>

            <title> muted </title>

        </head>

        <body>

                <audio src="audio.mp3" muted> 

                </audio>

        <body>

<html>

Using The <source> Element

Some browser do not support all audio formats. The solution is to provide multiple files using <source> elements. 

Here is an example:\

<! DOCTYPE html> 

<html> 

        <head>

            <title> source element</title>

        </head>

         <body>

            <!-- this time we don't need the src attribute 

            <audio controls>

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

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

            </audio>

        <body>

<html>


HTML VIDEOS:


  • To embed videos in HTML we have to use the <videos> element with its src attribute or the <source> child element with its src and type attributes for each.
  • The <source> element will be explained further below.
  • You can specify a text inside the <video> element that will be shown as a fallback in browsers that don't support embedding audios.
  • A Warning! Embedding videos on your web pages when not necessary will annoy visitors esp. if they automatically play.

HTML Videos Attributes

  • autoplay: if specified, the embedded audio will automatically begin to play as soon as it can do so.
  • controls: if specified, the embedded audio will have controls provided by the browser 
  • loop: if specified, the embedded audio will play over and over again in an endless loop.
  • muted: if specified, the embedded audio will be muted.
  • src: specifies a file path that points to the audio file.
  • height: specifies the height of the embedded videos displaly area in pixels.
  • width: specifies the width of the embedded  videos display area in pixels.
  • poster: specifies a file path that points to an image file

The autoplay, controls, loop and muted. attributes are Boolean attributes they do not need a value. They just need to be present at the start tag.

Attribute Controls:

<! DOCTYPE html> 

<html> 

        <head>

            <title> Controls </title>

        </head>

        <body>

                <video src="video.mp4" controls> 

                </video>

        <body>

<html>

Attribute Autoplay:

<! DOCTYPE html> 

<html> 

        <head>

            <title> Autoplay </title>

        </head>

        <body>\

                <video src="video.mp4" autoplay> 

                </video>

        <body>

<html>

Attribute loop:

<! DOCTYPE html> 

<html> 

        <head>

            <title> Video loop </title>

        </head>

        <body>

                <video src="video.mp4" loop> 

                </video>

        <body>

<html>

Attribute muted:

<! DOCTYPE html> 

<html> 

        <head>

            <title> muted </title>

        </head>

        <body>

                <video src="video.mp4" mute> 

                </video>

        <body>

<html>

Using The <source> Element

Some browser do not support all audio formats. The solution is to provide multiple files using <source> elements. 

Here is an example:

<! DOCTYPE html> 

<html> 

        <head>

            <title> source element</title>

        </head>

         <body>

            <!-- this time we don't need the src attribute 

            <video controls>

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

                 <source src="video.avi" type="video/avi">

            </video>

        <body>

<html>

Embed video:

<! DOCTYPE html> 

<html> 

        <head>

            <title> embed</title>

        </head>

         <body>

            <embed src="https://www.youtube.com/embed/a1f4k3k3=a5a3ja3">

            </embed>

        <body>

<html>