HTML - SPLessons

HTML Media

Chapter 19

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

HTML Media

HTML Media

shape Introduction

This chapter demonstrate about the HTML Media like Image, audio, video files on a web pages. Media files can be edited, manipulated, or browsed by using some related software. Which also known as digital media. Following are the concepts covered.

  • Media Events
  • Audio
  • Video

Media Events

shape Description

In order to handle the media files many media events are embedded in HTML documents by using <audio> and <video> elements. Following are some of the events listed below.

Event Description
aboart The event get into action If media playing is restarted from the beginning.
play The event get into action if play back media start after pause event.
pause The event get into action when media paused.
playing the event get into action when media starts playing,
loadstart The event get into action when media load started.
loadeddata The event get into action when the first frame of the media finished loading.
seeked The event get into action when the seek operation of media completed.
seeking The event get into action when seek operation started.
ratechange. The event get into action when the playback speed changes.
volumechange The event get into action when the volume has been changed.
suspend The event get into action when media loading is suspended.
waiting The event get into action when requested for operation.

Browser Support

shape Description

HTML media supported by all the latest browsers following are the browser versions supported by HTML.

Audio

shape Description

HTML Audio is inserted by audio file in to the web pages. The web page may contain one or more audio files which are inserted using the src element. Following are the types of audio tags.


HTML Audio Types

shape Description

HTML audio have the various types of audio files. Where each type of audio file have its own quality of sound. Following are some types audio files .


HTML Attributes

shape Description

HTML Audio element have different types of attributes to control the functionalities of Audio, following are the some of the attributes.

Attribute Description
autoplay By using the auto play attribute, the audio file will play automatically after the data has been loaded.
autobuffer By using the autobuffer attribute, audio starts buffering automatically.
controals By using the control attribute user can control the audio files.
preload By using the preload attribute the page and audio file get loaded.
src The src attribute defines the url of the audio file.

Example of HTML Audio

shape Description

User can create different audio files using HTML Audio elements. The code below demonstrate creating an audio player by using HTML audio element.

<!DOCTYPE html>
<html>
   <body>
      <audio controls>
         <source src="horse.ogg" type="audio/ogg">
         <source src="horse.mp3" type="audio/mpeg">
      </audio>
</html>

Result
By running the above code in a preferred browser user can get the following out put as shown in below image.


Video

shape Description

The purpose of HTML video is playing the videos without using any plugins on a web pages. In order to add the video file user need to use the <video> tags and src attribute which is used to identify the source of the media. In order to play and pause the media add the control attribute. The snippet code below demonstrate simple form to add the video file.
<video src=”splessons.mp4” width=”200” height=”200” controls>
</video>

Video Attributes

shape Description

In order to control the videos on a web pages, HTML tags have various attributes those are listed below.

Attribute Description
autoplay By using the autoplay attribute the video get played automatically.
autobuffer By using the autobuffer attribute the video get buffered automatically.
controals By using the control attribute video get controlled by providing options like playback, pause/resume, seeking, volume, etc.
height Height attribute is used to adjust height of the video in pixels.
loop By using loop the video automatically seek from the starting after ending.
src src attribute is the video url which can embedded into the web page.
width width attribute is used to adjust the width of the video in pixels.

The snippet code below demonstrates embedding the video file into the web pages by adjusting the video size as shown below.

<!DOCTYPE html>
<html>
  <body>
    <iframe width="420" height="315" src="https://www.youtube.com/embed/TZ1pCAtaCl4" frameborder="0" allowfullscreen>
    </iframe>
  </body>
</html>

Result
By running the above code in the preferred browser will play the video as output as shown in below.

Summary

shape Key Points

  • Sound, music, videos and animations are know as multimedia.
  • Audio files are available in various formats.
  • src is not mandatory for video file.