Chapter No. 1 Web Publishing
Inserting Sound and Video into Web page
Popular Sound/Audio formats:
.WAV - developed by
Microsoft and IBM. It is the standard format for Windows.
.AIFF
- (Audio Interchange File Format) developed by Apple for MAC platform
.Ra
- (Real Audio Format) is lower quality audio format (smaller in size)
.MP3 - MP3 (MPEG-1 Audio Layer-3) is a standard technology and format for compressing a sound sequence into a very small file (about one-twelfth the size of the original file) while preserving the original level of sound quality when it is played. MP3 provides near CD quality audio.
.AU
- (Audio) developed by Sun Microsystems for UNIX platform
.MIDI
- (Musical Instrumental Digital Interface) - format used for instrumental
music, very small in size
.RMF - It is a wrapper for audio formats like .wav, .au, .aiff, .mp3 and MIDI. The purpose of the format is to encrypt the data and to store MIDI and sounds together.
.RMF - It is a wrapper for audio formats like .wav, .au, .aiff, .mp3 and MIDI. The purpose of the format is to encrypt the data and to store MIDI and sounds together.
Linking to audio file
We can use <a> tag to link an audio resource on your computer or web.
E.g.
<a href="music/background.mp3">
Click here to play
</a>
Adding sound/audio to web pages
<bgsound>
To add background sound to html pages <bgsound> tag is used.
It is supported by only Internet Explorer
It has no control attribute (play, stop, pause buttons)
e.g.
<bgsound src="music/background.wav" loop=2>
Attributes:
Src -
specify the name of audio file
Loop
- specifies the number of times the file must be played.
E.g. loop="infinite" or loop=-1
loop=2
<embed> tag
It is used to insert audio as well as video both.
It provides console for controlling.
E.g. <embed src="music/quit.mp3" height=100
Width=200>
Attributes of <embed> tag:
Src -
Specifies the name of audio or video file.
Autostart
- specifies whether audio should start on page load. It has two values
true or false.
True value plays music when page is loaded.
False value will play music when user clicks play button.
Hidden -
It is to hide the console. True value hides the console.
Volume -
Sets the volume of music. Values from 1 to 100 can be set. Default is 50.
Width -
specifies the width of the console.
Height -
specifies the height of the console.
Controls -
specifies console size Values - console or small consoles
Value console gives the complete console with play, stop and pause button.
Video formats
.AVI
(Audio Video Interleave) - format developed by Microsoft for Windows platform.
.WMV
(Windows Media video) - developed by Mircosoft
.QT
(Quick Time) - format developed by Apple for MAC platform
.MPG / .MPEG / .MP4 -
formats developed by Moving Picture experts group, popular format on web.
.flv -
developed by Adobe Flash (low quality)
Adding video to the web page
<embed>
tag is used to insert video on the web page.
E.g.
<embed src="videos/sample.mp4" height=480 width=640>
Adding video using <img> tag
<img> tag along with DYNSRC attribute is used to insert video in the web page.
E.g. <img DYNSRC="videos/sample.mp4" height=480 width=640>
Can you put up an example using control attribute of embed tag?
ReplyDeleteThe controls attribute has the following values
DeleteCONTROLS="console"
Specifies the default control panel with a start button, a stop button, a pause button, and a volume lever. Use WIDTH="144" and HEIGHT="60"
CONTROLS="smallconsole"
Specifies a much shorter control panel with a start button, a stop button, and a volume lever. Use WIDTH="144" and HEIGHT="15"
Example:
embed src="sample.video" height=200 width=400 controls="smallconsole"
I have not used tag symbols greater and lesser than signs since it is not allowed to write tag in comments box.
The output will be little different in Google Chrome, Internet Explorer and Mozilla Firefox.
There are other values for controls attribute (not in your syllabus)
CONTROLS="playbutton"
Specifies a much reduced control panel with only a play button. Use WIDTH="35" and HEIGHT="23"
CONTROLS="pausebutton"
Specifies a much reduced control panel with only a pause button. Use WIDTH="35" and HEIGHT="23"
CONTROLS="stopbutton"
Specifies a much reduced control panel with only a stop button. Use WIDTH="35" and HEIGHT="23"
CONTROLS="volumelever"
Specifies a much reduced control panel with only a volume lever. Use WIDTH="74" and HEIGHT="20"
Also I don't know if this will help but in Image tag Dynsrc will always have D as CAPITAL LETTER
ReplyDeleteThe dynsrc attribute is actually depreciated.. It is not supported in the browsers. It was working in old browser of the year 2000.
DeleteHTML is case in-sensitive. You can write tag names and attributes in capital or small letters or combination of both... It will be rendered by the browser.