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 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
|
1 2 3 4 5 |
<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).
1234567<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).
1<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).
1<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).
123456789<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)
123<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)
12345678910111213<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:
