dotMobimobiThinkingmobiForgemobiReadyDeviceAtlasgoMobi
background image

The underestimated object element

jonarne's picture
Posted by jonarne - 17 Jul 2008
Twitter share icon Facebook share icon Google Plus share icon

One of the more powerful elements in XHTML MP (actually a part of XHTML, but extremely powerful and flexible in our mobile world) is the <object> element. Still, it is not used very often. So, I thought I would do some promotion!

The object element has been around from the start of XHTML MP, but historically devices have had poor support. However, this has changed. The support in Netfront is good, same goes for Webkit.

The object element is in theory used for embedding any kind of object into the web page for inline rendering. This includes images, video, audio (background music on the page, brings us back to the early 90's ;) ), Java apps, Flash, text etc. And, the most fascinating; it provides a nice fall-back mechanism by nesting -tags inside each other enabling the device to display the first content type it can handle. For example this code:
<object type="image/png" data="gfx/iama_png.png" id="player" width="200" height="50">
  <object type="image/jpeg" data="gfx/iama_jpeg.jpg" id="player2" width="200" height="50">
    <object type="image/gif" data="gfx/iama_gif.gif" id="player4" width="200" height="50">sorry no support for any images</object>
  </object>
</object>
...will display an SVG image to phones who support that, and a GIF for those that don't. So, what we have is a kind of a client-side device adaptation. I have made a demo of the code above here .

I have made some more demos to illustrate how you can use the object element:
  • How to create fallbacks (demo).
    <object type="image/png" data="gfx/iama_png.png" id="player" width="200" height="50">
      <object type="image/jpeg" data="gfx/iama_jpeg.jpg" id="player2" width="200" height="50">
        <object type="image/gif" data="gfx/iama_gif.gif" id="player4" width="200" height="50">
          sorry no support for any images
        </object>
      </object>
    </object>
    The user-agent starts at the outer most object and keeps nesting deeper until it finds a type it understands.
  • Inline streaming video (demo).
    <object type="video/3gpp" data="rtsp://qt3.streamzilla.jet-stream.nl/jet-stream/demostreams/goldfish_3GPv5_40K.3gp" id="player" width="176" height="148" autoplay="true">Sorry, no stream for you...</object>
    Should display the stream in an inline player in the page. Works well on Netfront >3.4. However, it requires that your mobile operator provides a single APN for both streaming and browsing, or that your phone can handle two open APNs simultaniously.
  • Audio player (demo).
    <object type="audio/midi" data="gfx/flourish.mid" id="player" width="200" height="50" autoplay="true"></object>
    "So 90's" you may think, but have a look at this site. Cool and useful!
  • Launching a midlet from a mobile internet page (demo).
    <object  id="midlet" width="176" height="150" declare="declare" classid="x-oma-application:java-ams">
        <param name="AMS-Filename" value="/gfx/test.jad"/>
        <param name="MIDlet-Name" value="test"/>
        <param name="MIDlet-version" value="2.0"/>
        <param name="MIDlet-Vendor" value="jonarne"/>
        <param name="AMS-Startup" value="auto"/>
        <!--Java MIDlets are not supported. <a href="/gfx/test.jad">
    Download here</a> -->
    </object>
    <a href="#midlet">Start Java application</a>
    Will not display the midlet inline as a good old applet, but this is a smart way of distributing and controlling java apps.
  • Flash lite (demo)
    <object type="application/x-shockwave-flash" data="gfx/iama_flash.swf" id="player" width="200" height="50">
      <object type="image/gif" data="gfx/iama_gif.gif" id="player2" width="200" height="50">sorry no support for flash or gif</object>
    </object>
    Fall backs to a GIF.
  • Here's a way of listing all properties of the object.(demo)
    <object type="image/gif" data="gfx/iama_gif.gif" id="player" width="200" height="50"></object>
    <script type="text/javascript">
        function a(){
        var e ='d';
        var testObj=document.getElementById('player');
        for (var key in testObj) {
          var newp = document.createElement('p');
          var text = document.createTextNode(key+' '+testObj[key]);
          newp.appendChild(text);
          document.getElementById('prop').appendChild(newp);
        }
      }
    </script>
    Requires javascript support in your browser. In theory you can manipulate most of these properties runtime. Many cool mobile ajax apps maybe...?

That's the promotion :) A list of the stuff I have been playing with. (Test it on your mobile)

A bit more background information:

Posted by jonarne - 17 Jul 2008

jonarne's picture

John Arne has seen the mobile world both from the inside of a Telco and outside as a content provider. Currently he works as Head of Product Development in Mobiletech AS which he also co founded.

twitter
linkedin

Posted by Jo Rabin 5 years ago

I advocate EXTREME CAUTION when using the object element and if using it it's really important to use the type attribute (which is not mandatory) to let the browser know in advance what type of content is behind the object. Various tests we have carried out in the course of the W3C mobileOK work show that even in the presence of this attribute some browsers download content they can't handle. So in your example above, demonstrating 3gp video, you could be causing your users to download a massive file which they can't use. No doubt this is a browser bug but there is a massive down side to getting it wrong, so avoid it.

My suggestion is to handle the device variation server side. Using DeviceAtlas, determine what the device supports and conditionally serve your page to suit. It's simple to do and is the classic use case for DeviceAtlas. Here is an illustration of quite how simple from Image Adaptation with Device Atlas.

<?php
include('imageAdaptation.php');
$i='imgc/eye.jpg'; // This is the main image that you want to see in your mobile screen
$imgurl=convertImage($i); // $imgurl will hold the path of the converted image that is suitable for your mobile
?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Test the API</title></head>
<body>
<img src="<?php echo $imgurl;?>" />
</body>
</html>

It's tempting to say NEVER use the object element, but if you must then treat it with real caution.

One more thing - the ultimate fall-back for objects (and for images in the alt attribute) should be something that is displayable as text and says what the intention of the object or image that was not displayed was. Saying "sorry no support for any images" doesn't help people who have deliberately turned images off either because they are using a Braille reader or because they want to speed up mobile access. Better would be something like "Jo Rabin turning red at the thought of use of the object element being promoted".

Jo

Posted by jonarne 5 years ago

Thank you for an appropriate comment.
We don't want anyone turning red... :)
Of course I agree that one should not do client side device adaptation by default as my example with images may indicate. The examples above are merely for illustration.
However, I believe that it is important for developers to know the object element and how to use it. I believe that if the conditions are right, sensible use of can lift the user experience of a mobile internet service from good to excellent.
But of course, caution is the word!

Posted by awoywood 4 years ago

Hi, which phones support this tag? Is there any info about its support in device atlas?

Posted by ruadhan 4 years ago

Device Atlas doesn't go into detail on specific tags supported by each phone. But, it will tell you if a particular markup language is supported by a phone and so if a phone supports a markup specification with a particular tag, then it should support that tag too.

However, as Jo pointed out in a comment above, you should be VERY careful if you use this tag.

Ruadhan O'Donoghue
Editor, mobiForge

Posted by passionlab 2 years ago

Many colorguards also compete independently federal resume writers