Not quite sure how this works

Q&A about the latest versions
sportsnapper
Posts: 73
Joined: Tue Jun 22, 2010 10:28 pm

Hi,

I'd like to try to use this to embed a vimeo video - but it just won't work for me. I though it was my implementation in the skin, but it's the Vimeo application code. If I replace the vimeo url with Hopki's thunderbirds Utube clip, then it pops up immediately.

Vimeo has two ways of embedding it's video - the new version supports HTML5, the old version flash only. i've pasted both version for my particular video below.

Code: Select all

 Vimeo embed code

Old code

<object width="400" height="300"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=15469985&server=vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=00ADEF&fullscreen=1&autoplay=1&loop=0" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=15469985&server=vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=00ADEF&fullscreen=1&autoplay=1&loop=0" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="300"></embed></object><p><a href="http://vimeo.com/15469985">Constructing the Arena for the British Championships at Rivermead</a> from <a href="http://vimeo.com/user4577942">Gareth Jones</a> on <a href="http://vimeo.com">Vimeo</a>.</p>

New style

<iframe src="http://player.vimeo.com/video/15469985?autoplay=1" width="400" height="300" frameborder="0"></iframe><p><a href="http://vimeo.com/15469985">Constructing the Arena for the British Championships at Rivermead</a> from <a href="http://vimeo.com/user4577942">Gareth Jones</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
Any help appreciated....
User avatar
thomas
Chief Gnome
Posts: 2611
Joined: Fri Sep 01, 2006 3:56 pm
Location: Vienna, Austria
Contact:

You need to use the Vimeo Flash API for your video. You can see and download a working example at Pano2VR 3.0 beta2 video demo tour. If you add a "External SWF" element you need to set the URL to

Code: Select all

http://api.vimeo.com/moogaloop_api.swf?oauth_key=8032df288fcaa045fbc4c7d407ac8aa1&width=640&height=360&fp_version=10&clip_id=15469985
and it should embed your video.
If you like to use different videos with hotspots you can just copy & paste the following code into your skin and you should have a video popup with a vimeo hotspot. You just need the set the URL to the vimeo video ID (the number in a vimeo link, in your case for example 15469985) and the Skin ID to "hs_vimeo".

Code: Select all

<skin>
  <element>
    <id>hs_vimeo</id>
    <x>576</x>
    <y>22</y>
    <alpha>1</alpha>
    <Alpha>1</Alpha>
    <angle>0</angle>
    <scalex>1</scalex>
    <scaley>1</scaley>
    <visible>1</visible>
    <center>4</center>
    <width>5</width>
    <height>5</height>
    <anchor>0</anchor>
    <handcursor>0</handcursor>
    <guihide>0</guihide>
    <guitreeclose>0</guitreeclose>
    <action>
      <source>enter</source>
      <type>show</type>
      <actiontarget>hstext</actiontarget>
    </action>
    <action>
      <source>leave</source>
      <type>hide</type>
      <actiontarget>hstext</actiontarget>
    </action>
    <action>
      <source>enter</source>
      <type>changealpha</type>
      <actionvalue>1</actionvalue>
      <actiontarget>hsimage</actiontarget>
    </action>
    <action>
      <source>leave</source>
      <type>changealpha</type>
      <actionvalue>0.5</actionvalue>
      <actiontarget>hsimage</actiontarget>
    </action>
    <action>
      <source>click</source>
      <type>settext</type>
      <actionvalue>http://api.vimeo.com/moogaloop_api.swf?oauth_key=8032df288fcaa045fbc4c7d407ac8aa1&width=640&height=360&fp_version=10&clip_id=$hu</actionvalue>
      <actionvalue2>$ht</actionvalue2>
      <actiontarget>video</actiontarget>
    </action>
    <action>
      <source>click</source>
      <type>changealpha</type>
      <actionvalue>1</actionvalue>
      <actiontarget>video_popup</actiontarget>
    </action>
    <action>
      <source>click</source>
      <type>changealpha</type>
      <actionvalue>1</actionvalue>
      <actiontarget>video</actiontarget>
    </action>
    <element>
      <id>hsimage</id>
      <x>-21</x>
      <y>-9</y>
      <alpha>0.5</alpha>
      <Alpha>0.5</Alpha>
      <angle>0</angle>
      <scalex>1</scalex>
      <scaley>1</scaley>
      <visible>1</visible>
      <center>4</center>
      <width>40</width>
      <height>20</height>
      <anchor>0</anchor>
      <handcursor>0</handcursor>
      <guihide>0</guihide>
      <guitreeclose>0</guitreeclose>
      <type>image</type>
      <firstframe>0</firstframe>
      <image>iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAIAAABwJOjsAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAABwgAAAcIA
HND5ueAAAC8ElEQVRIie3Uu2/TVxQH8O+592dj+AU7seM4xHaTSG0CQqDwTFUeUiRANFCBItGBqhk6dQCJga0DfwTMiIEBgXhIC
AoRjwSChE2U1EXEDgYqGzAEcOzETgr4d8/p4EiAOsAQHgNnutP56J57vpeiB/vwOUp9FvUr/GXBJnbu9aG9nB7+pLCUC2aoD04F
2ppbmN4bJyk+h2VRTd3cwtrX/Wv1xI/umhtnqLaBbC+nh83AcXn+iOrDfPsaZqYo1MKpGCdjKtIm4xlOXEW5SMGo5HM8chmlCWq
IAgAzZ5Nm5BKnh2EcCjTNdo6d40S/jGcpGCG3B8DsADkx4PQfgwjZXu37yVw7IaUCHqd57JZMT1JdSKYmzNBFWG6ZmeJUHCLw2L
pcNPHzcCoAXPVhCjU7fUc4FYflglPhsVuuhma+N2IGT2HeAlpYx9mkFJ9ZO/fgzRt7/ap9LQCZfAG3R2/uBUDza1RHFwBa6Kf6M
Nk+OK8lM6qWrgMRXk7zX1dU22qAAEApc/0kp+JqSadr9x/QFnlsztwxg6fg9rh+3m/17IO2+Ok/VXAWVq3LdGc3QPLsIYQlmwSg
O7dRfRgARdtV+2phA0D/sEOv3AQRAHrjLr1mKyDkbwQpk+iHtnRHl7l5Fsbozb2SGQWgO7oo0ATnFZhB6h0YANUGKbBIShPOhcN
m5AqFv1PLNvDozerVZTyLf8uwXOrbFZJ/DID8jWrxWnmYAkCBsBTG4VSgtBk8Dcvt6j2gQs2SfwKAvAEAnB6GsApGqtxbISGlIm
0mn+OxIfL6rR9/AyCFpwCc/uNQCgDZPnhsvJwBUB1GtTU/SHDmDkCovJKZkmpsNVePce4e2T4AnIpLqWDif8I1T6/v+R8MqOUb+
cHfqKmzNv1SzQ+FWmR6UgWj+vttJhmTfA4iFGmjQBMt8AGgYAQem2pq9aotUi5wYkDKRXP7umpssbb/TqFvzKWjnE0hd58WtVrr
e2aX/0Ny/JHqC/6rv8JzVP8BeR5GfdjU1ywAAAAASUVORK5CYII=</image>
      <quality>90</quality>
      <imageformat>0</imageformat>
    </element>
    <element>
      <id>hstext</id>
      <x>-75</x>
      <y>19</y>
      <alpha>1</alpha>
      <Alpha>1</Alpha>
      <angle>0</angle>
      <scalex>1</scalex>
      <scaley>1</scaley>
      <visible>0</visible>
      <center>4</center>
      <width>150</width>
      <height>20</height>
      <anchor>0</anchor>
      <handcursor>0</handcursor>
      <guihide>0</guihide>
      <guitreeclose>0</guitreeclose>
      <type>text</type>
      <text>$hs</text>
      <textalign>1</textalign>
      <textcolor>#000000</textcolor>
      <backgroundcolor>#cecece</backgroundcolor>
      <backgroundenabled>1</backgroundenabled>
      <bordercolor>#000000</bordercolor>
      <borderwidth>0</borderwidth>
      <textexecute>0</textexecute>
      <autosize>1</autosize>
      <wordwrap>1</wordwrap>
    </element>
    <type>hotspot</type>
  </element>
  <element>
    <id>video_popup</id>
    <x>50</x>
    <y>70</y>
    <alpha>0</alpha>
    <Alpha>0</Alpha>
    <angle>0</angle>
    <scalex>1</scalex>
    <scaley>1</scaley>
    <visible>1</visible>
    <center>4</center>
    <width>34</width>
    <height>32</height>
    <anchor>4</anchor>
    <handcursor>0</handcursor>
    <guihide>0</guihide>
    <guitreeclose>0</guitreeclose>
    <element>
      <id>video_rect</id>
      <x>0</x>
      <y>-6</y>
      <alpha>1</alpha>
      <Alpha>1</Alpha>
      <angle>0</angle>
      <scalex>1</scalex>
      <scaley>1</scaley>
      <visible>1</visible>
      <center>4</center>
      <width>700</width>
      <height>430</height>
      <anchor>0</anchor>
      <handcursor>0</handcursor>
      <guihide>0</guihide>
      <guitreeclose>0</guitreeclose>
      <element>
        <id>video_close</id>
        <x>670</x>
        <y>9</y>
        <alpha>1</alpha>
        <Alpha>1</Alpha>
        <angle>0</angle>
        <scalex>1</scalex>
        <scaley>1</scaley>
        <visible>1</visible>
        <center>4</center>
        <width>22</width>
        <height>22</height>
        <anchor>0</anchor>
        <handcursor>0</handcursor>
        <guihide>0</guihide>
        <guitreeclose>0</guitreeclose>
        <action>
          <source>click</source>
          <type>changealpha</type>
          <actionvalue>0</actionvalue>
          <actiontarget>video_popup</actiontarget>
        </action>
        <action>
          <source>click</source>
          <type>changealpha</type>
          <actionvalue>0</actionvalue>
          <actiontarget>video</actiontarget>
        </action>
        <type>image</type>
        <firstframe>0</firstframe>
        <image>iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAIAAABL1vtsAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAsTAAAL
EwEAmpwYAAAEI0lEQVQ4jYWSa1BUZRzGn/c95yycTWBZFqZCHK1QoJiGUQSK61BOFxvDQQWvo9UADcpFGRRtzMFuH+pTM1qD0Rg
IlGQKqUjOSJGFmgyrC+xwU4MtuS4sLHv27DlvHw4hoE3Px/f5X975Pz+wOXKUfS5daWT/oWmLebi0xOOaXvBO8a/sR0vUgT895c
fM9XV4SC5ru60kX2cKvLk9XXK55lqEMQZgvPQAJcQnIQUMjvJjnW9kRqdvmC2SujoHineHZO0ROCrZBm7UnY0sO+Xr56e5VNtPC
fGJT4GlDT1Wn6y80LMVrRcvaBVyt7V/X05I7l5heBCd7V4GY8z69NbsHWMjI1oBt2+xCeN236RUWNogCFBVjA57r1nLH//ManqS
B3PuzQrKztcND8IxDl6AfYwGBi0ODm4u+/KZdesBUN3ycL6vG6oKLy8wBkLgkdHVGZhX7PfFp3eztwe8W+hlH8W4HZQDAErx2KK
JDosjIFA7J2GMmevrlp0u93lnDzpuQVFACBiDILAlS1VJ4ibGYR8DxwGAqiLs2dHGC+fvj6WWfmQ0GnU63cw5W6pORTTU+uzMQV
cHFA8IBVPBC+B5TDtn9isKVoQPX25o6B9MPPqJ0WgURZFSOjMCwPXT34X+8I3h7VzWeRuqChBAs4jWTyIihy83XLSNpHzwsb+/v
yiKhJAHoWr6/cz3y+prTGkb0W2dR4Wi0uUrbL80XbE7kw+XGgwGvV6v9QPg51YuDQubODlicMtUlpmiPDBUBSDOv/8Sn4sJDg5m
jM32z/uF22IePVjgvzML1nZ10gFKMV+6VbF9NZW2V9MTN29+BJ2u220DBwuf2LYL7WbVMQGOAwMUBQQgVMuIUCKsiuutrR5atyU
hI2PeCFf7Lduhwsczdyh/tKiTDnAcGGOK4hUdR/R66defoSqgFKpKOM47LvFO/ZnBtRnxmzbN0Lk/Pc1Wkh+YttFz/TePfZQxMF
lmkss7NuF+y9WhG9dMa15z93Yxt8RUprrd8r07puSXputru6huSXgEAK4gJFD/1NN0asptbQfHM49HdUtiTLzd3Nos+jtXvsj/V
G9MSpX7elS3BMZU5xSmnQEvJLRWVUZkbgVA/QoO9La2EoHnQ8OUyQll2inGxk90WprgnVK0//WcnKE3t95r+FGMT4aiKJMOzuDP
RUQ2fXUiKCdPluUZwGVZvrZtQ1RCvGTr501Brrt9jU5PypEPfX19tfybv60JOlcdnJDstpj551de/foEV3Q4OilJr9cLgjCTyKT
DcTP3rdVRUY6erksemnzoyFz+ADRVVpjOVS99+ZWmk+W6ovdXJyWJoigIwjwunFNTze8VOxf5xuTsnt0/N/+mqgrHpfOGLbsio6
O1/QvRmpUkSYIg0IfQ0iTLMoDZ/kePWMDv/7r/ABmwMV4h3C2AAAAAAElFTkSuQmCC</image>
        <quality>90</quality>
        <imageformat>0</imageformat>
      </element>
      <type>rectangle</type>
      <bordercolor>#b4b4b4</bordercolor>
      <backgroundcolor>#ffffff</backgroundcolor>
      <borderwidth>3</borderwidth>
      <borderradius>12</borderradius>
      <backgroundenabled>1</backgroundenabled>
    </element>
    <element>
      <id>video</id>
      <x>30</x>
      <y>26</y>
      <alpha>0</alpha>
      <Alpha>0</Alpha>
      <angle>0</angle>
      <scalex>1</scalex>
      <scaley>1</scaley>
      <visible>1</visible>
      <center>4</center>
      <width>640</width>
      <height>385</height>
      <anchor>0</anchor>
      <handcursor>0</handcursor>
      <guihide>0</guihide>
      <guitreeclose>0</guitreeclose>
      <unloadonhide>1</unloadonhide>
      <type>external</type>
    </element>
    <type>container</type>
  </element>
</skin>
MfG, Thomas
sportsnapper
Posts: 73
Joined: Tue Jun 22, 2010 10:28 pm

Thanks Thomas,
Always nice to get an example to play with. I confess I'm not sure I understand this yet but will try to get it working with my application

Gareth
sportsnapper
Posts: 73
Joined: Tue Jun 22, 2010 10:28 pm

OK - I understand now - but still need to make some more changes in my skin to get it working correctly.
The oauth_key, The Consumer Key that is associated with your api application
Can I (or we the community) use the same key, or do I need to get my own? ie is it a pano2VR key or just Thomas's

Finally, I'd seen the example previously (though hadn't spotted the Vimeo part) - and thought I'd downloaded the source files. I couldn't find the Vimeo part in the skin. Now I've noticed that it's v7 of the tour. Any chance you could put the version number in the HTML title rather than just in the zip file name?
sportsnapper
Posts: 73
Joined: Tue Jun 22, 2010 10:28 pm

Sorry, another query.

I've just looked at the park_tour_swf.ggsk and I still don't get the Vimeo hotspot

The Vimeo hotspot template has
Source:mouse click/action:set text/long vimeo string/Target:video

I don't think this is right - as I can't find a target called video in the skin file. I would have expected a loadURL action - but then I'm not realy that good at hotspots at present.

regards

Gareth
User avatar
thomas
Chief Gnome
Posts: 2611
Joined: Fri Sep 01, 2006 3:56 pm
Location: Vienna, Austria
Contact:

sportsnapper wrote:
The oauth_key, The Consumer Key that is associated with your api application
Can I (or we the community) use the same key, or do I need to get my own? ie is it a pano2VR key or just Thomas's
It is a Pano2VR key, so I guess you can use it.
Finally, I'd seen the example previously (though hadn't spotted the Vimeo part) - and thought I'd downloaded the source files. I couldn't find the Vimeo part in the skin. Now I've noticed that it's v7 of the tour. Any chance you could put the version number in the HTML title rather than just in the zip file name?
I will think of a way to do this
I've just looked at the park_tour_swf.ggsk and I still don't get the Vimeo hotspot

The Vimeo hotspot template has
Source:mouse click/action:set text/long vimeo string/Target:video

I don't think this is right - as I can't find a target called video in the skin file. I would have expected a loadURL action - but then I'm not realy that good at hotspots at present.
If you call the "Set Text" action with the target of an "External Image" it will change the source URL of that element (in this case unload the old SWF and load the new SWF).
MfG, Thomas
Post Reply