Difference between revisions of "Shared Media wrapper"

From Second Life Wiki
Jump to navigation Jump to search
Line 1: Line 1:
A situation that's becoming increasingly common: '''say you want to show a Flash object, like a video, and ''only'' that content on a prim's face via [[Shared Media]]'''.
== About ==


However, if you enter in a normal URL, like http://youtube.com/watch?v=cWLeJ4xziwo , it shows ''everything'' on the page.
A situation that's becoming increasingly common: '''say you want to show a some content, like a Flash video, and ''only'' that content on a prim's face via [[Shared Media]]'''.


You might think, "Maybe I can just directly link to the Flash file?" Shared Media in its current implementation ''doesn't'' officially support direct-linking to FLV/SWF files. (When Torley tested this, it worked on Mac but not Windows.)
However, if you enter in a normal URL, like http://vimeo.com/9656041 , it shows ''everything'' on the page.


What you can do that achieves the same end result is use a ''wrapper''.
You might think, "Maybe I can just directly link to the Flash file?"


Basically, you place the code you want within the wrapper, then paste the whole thing as a [[data URI]] or put it on a webpage by itself.
Alas, Shared Media in its current implementation ''doesn't'' officially support direct-linking to FLV/SWF files. (When Torley tested this, it worked on Mac but not Windows.)
 
What you can do that achieves the same end result is '''use a ''wrapper'''''.
 
Basically:
 
# Place the code you want within the wrapper.
# Convert the code into a '''[[data URI]]''', which is often the quickest way to show it inworld. Or if you'd prefer, insert the code into a webpage and upload it.


== Wrappers ==
== Wrappers ==
Line 37: Line 44:
* Centers the content on the prim. Not always required but there if you ''do'' need it, like if you're including additional text or embedding an object that fills the vertical but not the horizontal space.
* Centers the content on the prim. Not always required but there if you ''do'' need it, like if you're including additional text or embedding an object that fills the vertical but not the horizontal space.


Depending on the source embed code, you may be able to completely replace the stuff between the <code><object></code> tags. For example, this is for a Vimeo video:
Depending on the source embed code, you may be able to completely replace the stuff between the <code><object></code> tags ''but'' make sure <code>width="100%"</code> and <code>height="100%"</code> stay the same if you want the content to fill the prim's face.
 
Many sites have a "share" or "embed" button you can click, then copy the code over. For example, this is for the same Vimeo video used above, with <code>width</code> and <code>height</code> modified from the default "640x480".
 
<pre>
<html>
<head>
  <title>Wrapper</title>
</head>
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" style="overflow:hidden">
  <div align="center">
 
  <object width="100%" height="100%">
  <param name="allowfullscreen" value="true" />
  <param name="allowscriptaccess" value="always" />
  <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=9656041&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=FF0080&amp;fullscreen=1" />
  <embed src="http://vimeo.com/moogaloop.swf?clip_id=9656041&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=FF0080&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="100%" height="100%">
  </embed>
  </object>
  </div>
</body>
</html>
</pre>
 
The resulting data URI looks like this, which you can go ahead and paste into Shared Media for a prim's face:


<code><nowiki>data:text/html;charset=utf-8,<html>%0D%0A <head>%0D%0A  <title>Wrapper<%2Ftitle>%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  <div align%3D"center">%0D%0A%0D%0A  <object width%3D"100%25" height%3D"100%25">%0D%0A  <param name%3D"allowfullscreen" value%3D"true" %2F>%0D%0A  <param name%3D"allowscriptaccess" value%3D"always" %2F>%0D%0A  <param name%3D"movie" value%3D"http%3A%2F%2Fvimeo.com%2Fmoogaloop.swf%3Fclip_id%3D9656041%26server%3Dvimeo.com%26show_title%3D0%26show_byline%3D0%26show_portrait%3D0%26color%3DFF0080%26fullscreen%3D1" %2F>%0D%0A  <embed src%3D"http%3A%2F%2Fvimeo.com%2Fmoogaloop.swf%3Fclip_id%3D9656041%26server%3Dvimeo.com%26show_title%3D0%26show_byline%3D0%26show_portrait%3D0%26color%3DFF0080%26fullscreen%3D1" type%3D"application%2Fx-shockwave-flash" allowfullscreen%3D"true" allowscriptaccess%3D"always" width%3D"100%25" height%3D"100%25">%0D%0A  <%2Fembed>%0D%0A  <%2Fobject>%0D%0A %0D%0A  <%2Fdiv>%0D%0A <%2Fbody>%0D%0A<%2Fhtml>%0D%0A</nowiki></code>


Experiment and see!
Experiment and see!

Revision as of 11:35, 24 March 2010

About

A situation that's becoming increasingly common: say you want to show a some content, like a Flash video, and only that content on a prim's face via Shared Media.

However, if you enter in a normal URL, like http://vimeo.com/9656041 , it shows everything on the page.

You might think, "Maybe I can just directly link to the Flash file?"

Alas, Shared Media in its current implementation doesn't officially support direct-linking to FLV/SWF files. (When Torley tested this, it worked on Mac but not Windows.)

What you can do that achieves the same end result is use a wrapper.

Basically:

  1. Place the code you want within the wrapper.
  2. Convert the code into a data URI, which is often the quickest way to show it inworld. Or if you'd prefer, insert the code into a webpage and upload it.

Wrappers

Here's Torley's 1st pass at a wrapper. Surely it can be optimized and improved upon — if you've adapted it, add your version below! 

<html>
 <head>
  <title>Wrapper</title>
 </head>
 <body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" style="overflow:hidden">
  <div align="center">

   <object width="100%" height="100%">
   <param name="movie" value="http://torley.s3.amazonaws.com/panoramas/Here.swf">
   <embed src="http://torley.s3.amazonaws.com/panoramas/Here.swf" width="100%" height="100%" type="application/x-shockwave-flash">
   </embed>
   </object>
 
  </div>
 </body>
</html>

Replace the two instances of http://torley.s3.amazonaws.com/panoramas/Here.swf with your own URL. What this code does:

  • Removes the white border that would be present by default around the edges of the Flash object.
  • Centers the content on the prim. Not always required but there if you do need it, like if you're including additional text or embedding an object that fills the vertical but not the horizontal space.

Depending on the source embed code, you may be able to completely replace the stuff between the <object> tags but make sure width="100%" and height="100%" stay the same if you want the content to fill the prim's face.

Many sites have a "share" or "embed" button you can click, then copy the code over. For example, this is for the same Vimeo video used above, with width and height modified from the default "640x480". 

<html>
 <head>
  <title>Wrapper</title>
 </head>
 <body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" style="overflow:hidden">
  <div align="center">

   <object width="100%" height="100%">
   <param name="allowfullscreen" value="true" />
   <param name="allowscriptaccess" value="always" />
   <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=9656041&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=FF0080&fullscreen=1" />
   <embed src="http://vimeo.com/moogaloop.swf?clip_id=9656041&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=FF0080&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="100%" height="100%">
   </embed>
   </object>
 
  </div>
 </body>
</html>

The resulting data URI looks like this, which you can go ahead and paste into Shared Media for a prim's face:

data:text/html;charset=utf-8,<html>%0D%0A <head>%0D%0A <title>Wrapper<%2Ftitle>%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 <div align%3D"center">%0D%0A%0D%0A <object width%3D"100%25" height%3D"100%25">%0D%0A <param name%3D"allowfullscreen" value%3D"true" %2F>%0D%0A <param name%3D"allowscriptaccess" value%3D"always" %2F>%0D%0A <param name%3D"movie" value%3D"http%3A%2F%2Fvimeo.com%2Fmoogaloop.swf%3Fclip_id%3D9656041%26server%3Dvimeo.com%26show_title%3D0%26show_byline%3D0%26show_portrait%3D0%26color%3DFF0080%26fullscreen%3D1" %2F>%0D%0A <embed src%3D"http%3A%2F%2Fvimeo.com%2Fmoogaloop.swf%3Fclip_id%3D9656041%26server%3Dvimeo.com%26show_title%3D0%26show_byline%3D0%26show_portrait%3D0%26color%3DFF0080%26fullscreen%3D1" type%3D"application%2Fx-shockwave-flash" allowfullscreen%3D"true" allowscriptaccess%3D"always" width%3D"100%25" height%3D"100%25">%0D%0A <%2Fembed>%0D%0A <%2Fobject>%0D%0A %0D%0A <%2Fdiv>%0D%0A <%2Fbody>%0D%0A<%2Fhtml>%0D%0A

Experiment and see!

See also

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