HTML object and param

Html Course

• Attributes of the object and param

HTML <object> - embedding media

The <object> tag is used for embedding media contents (such as images, Java applets, Flash, movie, audio, or even another HTML file) on a web page.
The object element is partially supported in all major browsers, depend on the object inserted into HTML document.
If the object element is not displayed, the code between the <object> and </object> tags will be executed, so you can add an alternative text or an image.

This element is designed to include any sort of document. It uses the type attribute to indicate the "mime type", and the data attribute to indicate the source of the document (its URI).
If the browser (or one of its plugin) can interpret the embedded object, will download and play /run it, otherwise the nested content of the object is displayed.
Any HTML code can be inserted as an alternative content, for example a link to the document or an image.

  Examples:

Embed a PDF document

<object type="application/pdf" data="dir/html_course.pdf" width="300" height="200">
 <img src="dir/html_course.jpg" alt="HTML course" />
</object>

- Here the browser will show a PDF document if it supports the PDF format, otherwise it will show a JPG image (html_course.jpg).
The "width" and "height" attributes define the visible area of the object. The browser scale the object to these dimensions.
 

Embed an HTML file

<object type="text/html" data="dir/test.html" width="500" height="350">
 alt: <a href="dir/test.html" title="Test">test.html</a>
</object>

- If the browser can't use the object element to include an "text/html" file, will show the link added between the <object> and </object> tags (alt: test.html).

• The object element may also contain a number of param elements to define parameters or values for the object when it displays or plays.
 

Embed a SWF file

- This example includes a Flash game (in SWF format), and uses a <param> tag to define a background color for the area in which the game is displayed (set with the "width" and "height" attributes).
- Internet Explorer sometimes needs a <param> with a src parameter to understand the location.

<object type="application/x-shockwave-flash" data="games/cubilus.swf" width="500" height="250">
 <param name="src" value="html/l/cubilus.swf" />
 <param name="bgcolor" value="#fbfbfe" />
 Your browser not support SWF.
</object>

If the browser supports SWF application, will display the "cubilus" game, otherwise shows the text: "Your browser not support SWF."
Here is the result:  

Embend a WAV file

<object type="audio/x-wav" data="dir/test.wav" width="200" height="20">
 <param name="src" value="dir/test.wav" />
 <param name="autoplay" value="false" />
 <param name="autoStart" value="false" />
 Alt : <a href="dir/test.wav" title="WAV file">test.wav</a>
</object>

- Depending on the object, the major browsers use different codes to load the same object type. QuickTime understand the "autoplay" parameter. Windows media Player and Real Audio understand "autoStart" parameter.
 

Embendding audio MP3

<object type="audio/mpeg" data="audio/test.mp3" width="200" height="20">
 <param name="src" value="audio/test.mp3">
 <param name="autoplay" value="false" />
 <param name="autoStart" value="false" />
 Your system can't play audio/mpeg files.
</object>

 

Embendding MOV files

- For some types, like QuickTime document (MOV files), IE needs a non-standard value to the classid attribute, an identifier to load an associated activeX.
We can nest another object as an alternative content, for the other browsers that use the standard code:

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="480" height="360">
 <param name="src" value="dir/movie.mov">
 <param name="controller" value="true" />
 <param name="autoplay" value="false" />

 <object type="video/quicktime" data="dir/movie.mov" width="480" height="360">
 <param name="controller" value="true" />
 <param name="autoplay" value="false" />
 You do not have QuickTime Player installed.
 </object>
</object>

Attributes of the HTML object tag

The <object> tag supports the following attributes (along with: "id", "class", "style", "title"):

• archive="URLs"   - Specifies a space-separated list of URLs for resources that are related to the object.
• border="pixels"   - Defines a border around the object (Deprecated).
• classid="classid_ID"   - Defines a class ID value as set in the Windows Registry or a URL.
• codebase="URL"   - Defines where to find the code for the object. Used in case if the browser not support it.
• codetype="MIME_type"   - The internet media type of the code referred to by the classid attribute.
• data="URL"   - Specifies the address of the resource.
• declare (declare="declare" in XHTML)   - Declares an object but restrains the browser from downloading and processing until need it.
• height="pixels"   - Defines the height of the object, in pixels.
• hspace="pixels"   - Sets a horizontal space around the object, in pixels (Deprecated).
• name="text"   - Defines the name for an object (to use in scripts).
• standby="message"   - Specifies a message to display while the object is loading.
• type="MIME_type"   - Defines the media type of the resource specified in the "data" attribute.
• usemap="URL"   - Specifies a URL of a image map to be used with the object.
• vspace="pixels"   - Sets a vertical space around the object, in pixels (Deprecated).
• width="pixels"   - Defines the width of the object, in pixels.

Attributes of the param tag

The <param> tag supports the following attributes:

• id="text"   - Specifies a unique "id", it can be referenced from a script, or CSS style sheet.
• name="text"   - Defines the name of the parameter (Required).
• type="MIME_type"   - Specifies the media type of the resource only when the "valuetype" attribute is set to "ref".
• value="value"   - Defines the value of the parameter.
• valuetype="data | ref | object"   - Specifies the type of value:
  • data - indicates that the parameter's value is data (default)
  • ref - indicates that the parameter's value is a URL
  • object - indicates that the value is the URL of another object in the document

First line ...<br>
Other line...

#id {
  letter-spacing: 2px;
}

var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);

echo "Address URL: http://CoursesWeb.net";