Shared Media and data URIs

From Second Life Wiki
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

About

Data: URIs can be used with Shared Media. If you're not a geek, why should you care?

In short, one possible use is: say you have some content you want to show on a prim face, but you don't want to go through the trouble of creating an HTML file and uploading it to a webserver. (Or, you don't have a server.)

You can use a data: URI tool to convert web content into a long link you can paste into Shared Media. It saves time and trouble.

Here's a simple example:

  1. In your web browser, go to The data: URI kitchen. This is an easy tool to convert HTML into a data: URI.
  2. Insert your HTML between the <body> tags. Change <p></p> to <p>This is a test!</p>
  3. Click the Generate button.
  4. Copy the full data: URI in your web browser's address bar. It should look like this: data:text/html;charset=utf-8,<!DOCTYPE HTML PUBLIC "-%2F%2FW3C%2F%2FDTD HTML 4.0%2F%2FEN">%0D%0A<html lang%3D"en">%0D%0A <head>%0D%0A <title>Test<%2Ftitle>%0D%0A <style type%3D"text%2Fcss">%0D%0A <%2Fstyle>%0D%0A <%2Fhead>%0D%0A <body>%0D%0A <p>This is a test!<%2Fp>%0D%0A <%2Fbody>%0D%0A<%2Fhtml>%0D%0A
  5. Using the steps described in "Adding Shared Media to an object", paste that exact URI into Shared Media on a prim.
  6. The result should look like this:

Data URI with Shared Media.png

Feel free to use more advanced code to gain familiarity.

KBtip2.png Tip: A data: URI can be up to 32 kilobytes. The maximum length of an URI/URL in the Viewer is 1024 bytes, although an URL-shortening service (as described below) can prevent this limit from being reached.

Examples

This shows several lines of styled text:

data:text/html;charset=utf-8,<!DOCTYPE HTML PUBLIC "-%2F%2FW3C%2F%2FDTD HTML 4.0%2F%2FEN">%0D%0A<html lang%3D"en">%0D%0A <head>%0D%0A <title>Test<%2Ftitle>%0D%0A <style type%3D"text%2Fcss">%0D%0A <%2Fstyle>%0D%0A <%2Fhead>%0D%0A <body>%0D%0A <p>This is a test!<%2Fp>%0D%0A%0D%0A<p><strong>But it gets fancier because we're using styled text.<%2Fstrong><%2Fp>%0D%0A%0D%0A<p><em>Feel free to play with HTML snippets and jazz it up.<%2Fem><%2Fp>%0D%0A%0D%0A<h2><font color%3D"%23ff0080"><strong>That's why we call it rich content%2C yeah%3F<%2Fstrong><%2Ffont><%2Fh2>%0D%0A%0D%0A<p><strike>This line has intentionally been struck out.<%2Fstrike><%2Fp>%0D%0A <%2Fbody>%0D%0A<%2Fhtml>%0D%0A

This embeds a Flash video:

data:text/html;charset=utf-8,<!DOCTYPE HTML PUBLIC "-%2F%2FW3C%2F%2FDTD HTML 4.0%2F%2FEN">%0D%0A<html lang%3D"en">%0D%0A <head>%0D%0A <title>Test<%2Ftitle>%0D%0A <style type%3D"text%2Fcss">%0D%0A <%2Fstyle>%0D%0A <%2Fhead>%0D%0A <body>%0D%0A <p><object width%3D"640" height%3D"480"><param name%3D"allowfullscreen" value%3D"true" %2F><param name%3D"allowscriptaccess" value%3D"always" %2F><param name%3D"movie" value%3D"http%3A%2F%2Fvimeo.com%2Fmoogaloop.swf%3Fclip_id%3D9656041%26amp%3Bserver%3Dvimeo.com%26amp%3Bshow_title%3D0%26amp%3Bshow_byline%3D0%26amp%3Bshow_portrait%3D0%26amp%3Bcolor%3DFF0080%26amp%3Bfullscreen%3D1" %2F><embed src%3D"http%3A%2F%2Fvimeo.com%2Fmoogaloop.swf%3Fclip_id%3D9656041%26amp%3Bserver%3Dvimeo.com%26amp%3Bshow_title%3D0%26amp%3Bshow_byline%3D0%26amp%3Bshow_portrait%3D0%26amp%3Bcolor%3DFF0080%26amp%3Bfullscreen%3D1" type%3D"application%2Fx-shockwave-flash" allowfullscreen%3D"true" allowscriptaccess%3D"always" width%3D"640" height%3D"480"><%2Fembed><%2Fobject><%2Fp>%0D%0A <%2Fbody>%0D%0A<%2Fhtml>%0D%0A

This embeds an SVG (scalable vector graphic) of three interlocking, colored circles. Since SVGs are vectors, they can scale smoothly to any size:

http://tinyurl.com/yd5uyfa

This embeds a Flash panorama of a Second Life scene, as explained here:

data:text/html;charset=utf-8,<html lang%3D"en">%0D%0A <head>%0D%0A <title>Test<%2Ftitle>%0D%0A <style type%3D"text%2Fcss">%0D%0A <%2Fstyle>%0D%0A <%2Fhead>%0D%0A <body marginheight%3D"0" marginwidth%3D"0" topmargin%3D"0" leftmargin%3D"0" rightmargin%3D"0" bottommargin%3D"0" style%3D"overflow%3Ahidden">%0D%0A <p align%3D"center"><object width%3D"100%25" height%3D"100%25">%0D%0A<param name%3D"movie" value%3D"http%3A%2F%2Ftorley.s3.amazonaws.com%2Fpanoramas%2FAmbiant-Waters-S.swf">%0D%0A<embed src%3D"http%3A%2F%2Ftorley.s3.amazonaws.com%2Fpanoramas%2FAmbiant-Waters-S.swf" width%3D"100%25" height%3D"100%25" type%3D"application%2Fx-shockwave-flash">%0D%0A<%2Fembed>%0D%0A<%2Fobject><%2Fp>%0D%0A <%2Fbody>%0D%0A<%2Fhtml>

Those data: URIs are so long! Can I shorten them?

Yes, an URL-shortener can make them a lot easier to copy-and-paste, although most popular ones (like bit.ly and snurl.com — no relation to SLurl) have troubles, and reliability is dependent on the specific service. TinyURL appears to work, as shown above.

Can I embed other data types too?

Yes, like images. The Image to data URI convertor can convert small PNG, JPG, or GIF images into a data URI. The resulting code may appear quite lengthy but give it a try.

As shown above, SVGs can work, too.

Can I make pure JavaScript work in a data: URI?

Absolutely.

In fact, data: URI is best for displaying limited (up to 1024 chars), but constantly updated information without having to send a bunch of httprequests and bogging down a server. For example, updating a Media on a Prim speedometer on a .2sec timer interval.

//Copy and Paste the below directly into the homepage URL for a prims media.

data:text/html,<html><head><style>#ADiv{background-color:#EEE;width:100px;height:100px;}</style><script>function doit(){alert('Hi');}</script></head><body bgcolor='#222' onload='doit()'><div id='ADiv'></div></body></html>

What's the difference between a URI and a URL?

This gets fairly technical, but "URL vs. URI vs. URN, in More Concise Terms" has a good explanation.

See also

Retrieved from "https://wiki.secondlife.com/w/index.php?title=Shared_Media_and_data_URIs&oldid=1191683"