HTML Tutorial - HTML object

The object element achieves the same result as the embed element.

It has local attributes:data, type, height, width, usemap, name, form.

object element can also have Zero or more param elements.

The form attribute is new in HTML5.

The archive, classid, code, codebase, codetype, declare, standby, align, hspace, vspace, and border attributes are obsolete.

The following code shows how you can use the object element to embed the same YouTube video.

<!DOCTYPE HTML>
<html>
<body>
  <object width="560" height="349"
    data="http://www.youtube.com/v/qzA60hHca9s"
    type="application/x-shockwave-flash">
    <param name="allowFullScreen" value="true" />
  </object>
</body><!--from  w w  w  . j  a  v a2 s.  co  m-->
</html>

Click to view the demo

Note

The data attribute provides the location for the content. The type, width, and height attributes have the same meaning as for the embed element.

You can define the parameters that will be passed to the plugin using the param element.

You use one param element for each parameter you need to define.

param element use attribute name and value to define parameters.

Fallback Content

With the object element you can include content that will be displayed if the content you specify is not available.

<!DOCTYPE HTML>
<html>
<body>
  <object width="560" height="349" data="http://java2s.com/myimaginaryfile">
    <param name="allowFullScreen" value="true" />
    <b>Sorry!</b> We can't display this content
  </object>
</body>
</html>

Click to view the demo

The code above used the data attribute to refer to a file that doesn't exist.

The browser will display the content inside the object element instead. The param elements are ignored.

image object

You can use the object element to embed images.

<!DOCTYPE HTML>
<html>
<body>
  <object data="http://www.java2s.com/style/download.png" type="image/png"> </object>
</body>
</html>

Click to view the demo

Image Maps

You can use the object element to create client-side image maps. The usemap attribute can be used to associate a map element with an object element.

<!DOCTYPE HTML>
<html>
<body>
  <map name="mymap">
    <area href="a.html" shape="rect" coords="3,5,68,62"
      alt="A" />
    <area href="b.html" shape="rect" coords="70,5,130,62" alt="B" />
    <area href="c.html" shape="default" alt="default" />
  </map><!-- w w  w.  ja  v a 2  s . co m-->

  <object data="http://www.java2s.com/style/download.png" type="image/png" usemap="#mymap">
  </object>
</body>
</html>

Click to view the demo

At the time of this writing, Google Chrome and Apple Safari do not support this feature.

HTML embed

The object and embed elements both extend the capabilities of browsers by adding support for plugins that browser didn't support directly.

The embed Element has Local Attributes:src, type, height, width.

Example

The following code shows the embed element in use.

<!DOCTYPE HTML>
<html>
<body>
  <embed src="http://www.youtube.com/v/qzA60hHca9s"
    type="application/x-shockwave-flash" 
    width="560" 
    height="349"
    allowfullscreen="true" />
</body><!--from  ww  w  .  j av  a2 s.  c  o  m-->
</html>

Click to view the demo

The src attribute specifies the location of the content.

The type attribute specifies the MIME type of the content.

The width and height attributes determine the size of the embedded content.

Any other attributes are parameters for the plugin or the content.

allowfullscreen allows the YouTube video player to play video in full-screen.