Integrating Audio and Video

6–7 MINS READ

Learning Objectives

  1. Using HTML5 <video> and </video> tag pairs within a web page.
  2. Adding video controls and Saving video files.
  3. Streaming versus downloaded video and supporting older browsers.
  4. Using HTML5 <audio> and </audio> tag pairs.
  5. Adding audio controls and Saving audio files.
  6. Making audio files work with older browsers.

HTML <div></div> Element

  • The <div> tag defines a division or a section in an HTML document.
  • The <div> tag is used as a container for HTML elements which is then styled with CSS or manipulated with JavaScript.
  • The <div> tag is easily styled by using the class or id attribute.
  • Any sort of content can be put inside the <div> tag.
  • By default, browsers always place a line break before and after the <div> element.

HTML <span></span> Element

  • The <span> tag is an inline container used to mark up a part of a text, or a part of a document.
  • The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute.
  • The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element.

HTML <div></div> and <span></span> pairs

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>DIV Tag</title>
  <style type="text/css">
    div {
      font-family: Verdana;
      text-align: justify;
    }
    span {
      font-style: italic;
      color: red;
    }
  </style>
</head>
<body>
  <div>
    <p>
      The <span>div Tag</span> defines a division or a section in an HTML document. 
      The div tag is used as a container in HTML elements - which is then styled 
      with CSS or manipulated with JavaScript.
    </p>
    <p>
      The div tag is easily styled by using the class or id attribute. Any sort of 
      content can be put inside the div tag!
    </p>
    <p>
      Note: By default, browsers always place a line break before and after the div 
      element.
    </p>
  </div>
</body>

HTML Multimedia

  • Multimedia comes in many different formats. It can be almost anything you can hear or see, like images, music, sound, videos, records, films, animations, and more.
  • Web pages often contain multimedia elements of different types and formats.

HTML Video

  • The HTML <video> and </video> element is used to show a video on a web page.
  • The <source> and </source> element allows you to specify alternative video files from which the browser may choose. Using this element the browser will use the first recognized format.
  • The controls attribute adds video controls, like play, pause, and volume.

HTML Video tag pair

<body>
  <video style="width: 320px; height: 240px;" controls>
    <source src="cocomelon.mp4" type="video/mp4">
    Cocomelon Intro
  </video>
</body>

Common HTML Video formats

FormatFile ExtensionDescription
MPEG.mpgDeveloped by the Moving Pictures Expert Group. The first popular video format on the web.
OGG.oggTheora Ogg. Developed by the Xiph.org Foundation.
WEBM.webmDeveloped by Mozilla, Opera, Adobe, and Google.
MP4.mp4Commonly used in video cameras and TV hardware. Supported by all browsers and recommended by YouTube.

autoplay attribute

  • The autoplay attribute is used to specify that the video should start playing when a web page is loaded.
<body>
  <video style="width: 320px; height: 240px;" autoplay>
    <source src="cocomelon.mp4" type="video/mp4">
    Cocomelon Intro
  </video>
</body>

muted attribute

  • The muted attribute on a media element mutes the audio or video player. With the use of muted attributes, the video can be played, but without a sound.
<body>
  <video style="width: 320px; height: 240px;" autoplay muted>
    <source src="cocomelon.mp4" type="video/mp4">
    Cocomelon Intro
  </video>
</body>

poster attribute

  • The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button. If this is not included, the first frame of the video will be used instead.
<body>
  <video style="width: 340px; height: 240px;" controls poster="media/cocomelon.jpg">
    <source src="media/cocomelon.mp4" type="video/mp4">
    <source src="media/cocomelon.ogg" type="video/ogg">
  </video>
</body>

HTML Audio tag pairs

  • The HTML <audio> and </audio> elements are used to play audio on a web page.
  • The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.
<body>
  <audio controls>
    <source src="pasilyo.mp3" type="audio/mp3">
    Pasilyo Intro
  <audio>
</body>

loop attribute

  • The loop attribute will make the audio file play over and over again.
<body>
  <audio controls autoplay loop>
    <source src="pasilyo.mp3" type="audio/mp3">
    Pasilyo by Sun Kissed
  </audio>
</body>

Common HTML Audio formats

FormatFile ExtensionDescription
WAV.wavDeveloped by IBM and Microsoft. Plays well on Windows, Macintosh, and Linux operating systems.
OGG.oggDeveloped by the Xiph.org Foundaion.
MP3.mp3MP3 files are actually the sound part of MPEG files. MP3 is the most popular format for music players. Combines good compression (small files) with high quality.
MP4.mp4MP4 is a video format, but can also be used for audio.

Summary Table

ElementsDefinition
<div>Defines a block-level division or section in an HTML document.
<span>Defines an inline section of text within an HTML document.
<video>element is used to show a video on a web page.
<source>An element allows you to specify alternative video files from which the browser may choose.
<audio>Use to play audio on a web page.
AttributesDefinition
controlsAdds video controls like play, pause, and volume.
autoplayUse to specify that the video should start playing when a web page is loaded.
mutedMutes the audio or video by default.
posterDisplays an image while the video is downloading or until the user hits play button.
loopWill make the audio file play over and over again.

Credits

This webpage was created based on lessons provided by Rose Anne G. Cochanco as part of Web Development subject.