oleh Mohammed Ismael diProgrammer
The HTML Object Element:
A helper application is a program that can be launched by the browser to "help". Helper applications are also called Plug-Ins.
Helper applications can be used to play audio and video (and much more). Helper applications are launched using the <object> tag.
One advantage of using a helper application to play video and audio, is that you can let some (or all) of the player settings be controlled by the user.
Most helper applications allow manual (or programmed) control over the volume settings and play functions like rewind, pause, stop and play.
The Best Way to Play Videos in HTML?
For the best general way to include videos in HTML, refer to the next chapters.
Playing Wave Audio Using QuickTime
Example
<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="liar.wav">
<param name="controller" value="true">
</object>
Playing MP4 Video Using QuickTime
Example
<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="movie.mp4">
<param name="controller" value="true">
</object>
Playing SWF Videos Using Flash
Example
<object width="400" height="40"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="bookmark.swf">
<embed src="bookmark.swf" width="400" height="40">
</embed>
</object>
Playing WMV Movies Using Windows Media Player
The example below shows the suggested code used to display a Windows Media file.
Example
<object width="100%" height="100%"
type="video/x-ms-asf" url="3d.wmv" data="3d.wmv"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="url" value="3d.wmv">
<param name="filename" value="3d.wmv">
<param name="autostart" value="1">
<param name="uiMode" value="full">
<param name="autosize" value="1">
<param name="playcount" value="1">
<embed type="application/x-mplayer2" src="3d.wmv" width="100%" height="100%" autostart="true" showcontrols="true" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>
</object>
...................................
HTML Audio :
Using The <embed> Element
The <embed> tag defines a container for external (non-HTML) content.
The following code fragment should play an MP3 file embedded in a web page:
Example
<embed height="100" width="100" src="horse.mp3">
Using The <object> Element
The <object tag> tag can also define a container for external (non-HTML) content.
The following code fragment should play an MP3 file embedded in a web page:
Example
<object height="100" width="100" data="horse.mp3"></object>
Using the HTML5 <audio> Element
The HTML5 <audio> tag defines sound, such as music or other audio streams.
The <audio> element works in all modern browsers.
The following example uses the <audio> tag, and specifies one MP3 file (for Internet Explorer, Chrome, and Safari), and one OGG file (for Firefox and Opera). If anything fails it displays a text:
Example
<audio controls="controls">
<source src="horse.mp3" type="audio/mp3">
<source src="horse.ogg" type="audio/ogg">
Your browser does not support this audio format.
</audio>
The Best HTML Solution
The example below uses the HTML5 <audio> element and tries to play the audio either as MP3 or OGG. If it fails, the code "falls back" to try the <embed> element:
Example
<audio controls="controls" height="100" width="100">
<source src="horse.mp3" type="audio/mp3">
<source src="horse.ogg" type="audio/ogg">
<embed height="100" width="100" src="horse.mp3">
</audio>
Yahoo Media Player - An Easy Way to Add Audio to Your Site
The FREE Yahoo Media Player is definitely a favorite: You simply let Yahoo do the job of playing your songs.
It plays MP3 and a lot of other formats. You can add it to your page (or blog) with a single line of code, and easily turn your HTML page into a professional playlist:
Example
<a href="horse.mp3">Play Sound</a>
<script src="http://mediaplayer.yahoo.com/js"></script>
To use it, insert the following JavaScript at the bottom of your web page:
<script src="http://mediaplayer.yahoo.com/js"></script>
Using A Hyperlink
If a web page includes a hyperlink to a media file, most browsers will use a "helper application" to play the file.
The following code fragment displays a link to an MP3 file. If a user clicks on the link, the browser will launch a helper application to play the file:
Example
<a href="horse.mp3">Play the sound</a>
..................................................
HTML Videos:
Playing Videos in HTML
Example
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>
The <embed> Element
The purpose of the <embed> tag is to embed multimedia elements in HTML pages.
The following HTML fragment displays a Flash video embedded in a web page:
Example
<embed src="intro.swf" height="200" width="200">
Using The <object> Element
The purpose of the <object> tag is to embed multimedia elements in HTML pages.
The following HTML fragment displays a Flash video embedded in a web page:
Example
<object data="intro.swf" height="200" width="200">
Using the HTML5 <video> Element
The HTML5 <video> tag defines a video or movie.
The <video> element works in all modern browsers.
The following HTML fragment displays a video in OGG, MP4, or WEBM format:
Example
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>
The Best HTML Solution
The example below uses 4 different video formats. The HTML 5 <video> element tries to play the video either in MP4, OGG, or WEBM format. If this fails, the code "falls back" to try the <object> element. If this also fails, it "falls back" to the <embed> element:
HTML 5 + <object> + <embed>
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>