Multimedia
comes in many different formats in web environment. Modern webpages having
pictures, music, sound, videos, records, films, animations, etc.
Multimedia video formats –
The
following formats frequently we are using in the web environment –
·
AVI
(.avi) – Audio Video Interleaved was developed by Microsoft.
·
WMV (.wmv)
–
Windows Media Video was developed by Microsoft.
·
MPEG (.mpg
or .mpeg) – Moving Picture Expert Group.
·
Flash
(.swf or .flv) – It was developed by Micromedia.
·
MP4 (.mp4)
–
MPEG-4 (mp4) is the new format for the internet.
Multimedia Audio Formats –
The
following audio formats commonly used in the web environment –
·
MIDI
(.mid or .midi) – Musical Instrument Digital Interface.
·
MP3 (.mp3)
– MP3
files are actually the sound part of the MPEG file.
·
WAV (.wav)
– WAVE
commonly known as WAV was developed by Microsoft and IBM.
·
WMA (.wma)
– Windows
Media Audio
HTML5 Audio Tag – It is
used to specify audio on an HTML document. It enables audio playback without
plugins. The audio can be controlled with native or customized controls. Audio
files can be pre-fetched or downloaded on demand. It is a paired tag. Ay text
between <audio> and </audio> will be displayed in
browsers that do not support audio.
Attribute
|
Value
|
Description
|
controls
|
controls
|
Specifies
that the audio control should be displayed.
|
autoplay
|
autoplay
|
Specifies
that the audio will start playing.
|
loop
|
loop
|
Specifies
that the audio will start over again.
|
src
|
Path of
audio
|
Specifies
the URL of the audio file.
|
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<audio src="test.mp3" controls="controls"
autoplay="autoplay" loop="loop">OOPS not supported</audio>
</body>
</html>
HTML5 audio tag with JS controls
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<h2 style='color:blue'>HTML5 Audio Tag with JS controls</h2>
<audio src="test.mp3" id="Myaud"></audio>
<div>
<button onclick="document.getElementById('Myaud').play()">PlayAudio</button>
<button onclick="document.getElementById('Myaud').pause()">PauseAudio</button>
<button onclick="document.getElementById('Myaud').volume
+=0.1">ivolume</button>
<button onclick="document.getElementById('Myaud').volume
-=0.1">dvolume</button>
</div>
</body>
</html>
HTML5 VIDEO TAG
It is used
to specify video on an HTML document. It is a paired tag. Any text between the <video> amd </video> tags will be displayed that do not support video.
Attributes
|
Value
|
Description
|
autoplay
|
autoplay
|
Specifies that the video will start
playing.
|
controls
|
controls
|
Specifies that the video controls should be
displayed.
|
src
|
url
|
Specifies the URL of the video file.
|
width
|
pixels
|
Sets the width of the video file.
|
height
|
pixels
|
Sets the height of the video file.
|
loop
|
loop
|
Specifies that the video will start again.
|
muted
|
muted
|
Specifies the audio output of the video
should be muted.
|
poster
|
url
|
Specifies an image to be shown while the
video is downloading or until the user hits the play button.
|
preload
|
auto, metadata, none
|
Specifies it and how author thinks the
video should be loaded when the page loads.
|
HTML5
VIDEO TAG WITH JAVASCRIPT
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<video src="cloud.mp4" id="Myvid"
width="500px" height="500px">
</video>
<div>
<button onclick="document.getElementById('Myvid').play()">Play</button>
<button onclick="document.getElementById('Myvid').pause()">Pause</button>
<button onclick="document.getElementById('Myvid').volume
+=0.1">+</button>
<button onclick="document.getElementById('Myvid').volume
-=0.1">-</button>
</div>
</body>
</html>
No comments:
Post a Comment