Scribd
Upload
240 views15 pages

Html5 Audio

The document discusses HTML5 audio capabilities. It introduces the <audio> element for embedding audio in web pages. The <audio> element supports controls, multiple file formats via <source> tags, and a DOM API for controlling playback through JavaScript. The document also covers using <video> and <embed> tags for embedding video files from YouTube or other sources.

Uploaded by

aarthi100
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
240 views15 pages

Html5 Audio

The document discusses HTML5 audio capabilities. It introduces the <audio> element for embedding audio in web pages. The <audio> element supports controls, multiple file formats via <source> tags, and a DOM API for controlling playback through JavaScript. The document also covers using <video> and <embed> tags for embedding video files from YouTube or other sources.

Uploaded by

aarthi100
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 15

HTML5 Audio

Audio on the Web


Before HTML5, there was no standard for
playing audio files on a web page.
Before HTML5, audio files could only be
played with a plug-in (like flash).
The HTML5 <audio> element specifies a
standard way to embed audio in a web
page.

The HTML <audio> Element


To play an audio file in HTML, use
the <audio> element:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

HTML Audio - How It Works


The controls attribute adds audio
controls, like play, pause, and volume.
Text between the <audio> and </audio>
tags will display in browsers that do not
support the <audio> element.
Multiple <source> elements can link to
different audio files. The browser will use
the first recognized format.

HTML Audio - Methods, Properties, and Events


HTML5 defines DOM methods, properties, and
events for the <audio> element.
This allows you to load, play, and pause audios,
as well as setting duration and volume.
There are also DOM events that can notify you
when an audio begins to play, is paused, etc.
For a full DOM reference, go to our HTML5
Audio/Video DOM Reference.

Inserting HTML codes for video


A video file can be inserted in a html page
in two ways. The first way would be
using the <embed/> tag. This tag does not
need an ending/finishing tag. It works,
mostly, the same as a tag for an photo
works.
<embed src="example.mpeg"
autostart="false" HEIGHT=60
WIDTH=144/>

Supported extensions for the embed tag


These are:
.swf - made by Macromedia Flash
.wmv - Microsoft Windows Media Video

.mov - Quick Time Movie, belongs to Apple


.mpeg - created by Moving Pictures Expert
Group.
The most used are .mpeg and .swf, because of
the compact format.

Attributes of the embed tag


autostart - establishes whether the file will run
automatically after the page is loaded. Can have
the true or false value
hidden - establishes whether the buttons are hidden or
not. Can have the true or false value.
volume - can have any value from 0 to 100
loop - establishes whether the file will be replayed after
it is finished. Can have the true or false value.
playcount - this establishes how many times the file will
be replayed. For example playcount="2" means it will be
replayed two times and after it will stop.

Inserting a You Tube video


You can do that very easy, because You Tube has on
every page the needed HTML code.
<! -- Here will start the You Tube code --><object
width="425" height="344"><param name="movie"
value="http://www.youtube.com/
v/UAq8qHNWMNw&hl=en&fs=1">
</param><param name="allowFullScreen"
value="true">
</param> <embed src="http://www.youtube.com/
v/UAq8qHNWMNw&hl=en&fs=1" type="application/xshockwave-flash" allowfullscreen="true"
width="425" height="344"></embed></object><! -Here will end the You Tube code -->

HTML <video> controls Attribute


Example
A <video> element with browser default controls:
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Examples of title attribute use that are USEFUL:

Labelling frame or iframe elements:


<frame title="navigation">

Providing a programmatically associated


label for a control in situations where a
visible text label would be redundant:
<input type="text" title="search"> <input
type="submit" value="search">

Inserting Images in Your Documents


<img>
Function:
Inserts an image into a document

Attributes:

ALIGN
ALT
BORDER
CLASSON
CONTROLS
DIR
DYNSRC
HEIGHT
HSPACE
ID
ISMAP

ONDBLCLICK
ONERROR
ONKEYDOWN
KEYPRESS
ONKEYUP
ONLOAD
ONMOUSEDOWN
ONMOUSEMOVE
ONMOUSEOUT
ONMOUSEOVER
ONMOUSEUP

LANG
LONGDESC
LOOP
LOWSRC
NAME
ONABORT
ONCLICK

SRC
START
STYLE
TITLE
USEMAP
VSPACE
WIDTH

End tag:
None in HTML; </img> or <img ... /> with
XHTML

Contains:
Nothing

Used in:
text

You might also like