I need to include a 360 video in a Virtual Tour.
I've included the video scene with the other image scenes in a very basic way and its works perfectly.
Here's an example: http://mauritius360.com/test2/index.html
Now there's a small problem with the play button which i've placed on the left.
When you enter the video scene for the 1st time the button toggles between play and pause correctly.
But when you switch to another scene and come back to the video scene, the button no longer toggles. Even the play-pause icon that's middle of the screen doesn't appear this time.
I know it has something to do with the videointerface.xml but not sure which setting or code. Could you help on this issue please?
Code
<krpano version="1.19" title="Corfu Holiday Trip">
<include url="skin/vtourskin.xml" />
<!-- customize skin settings: maps, gyro, webvr, thumbnails, tooltips, layout, design, ... -->
<skin_settings maps="true"
maps_type="google"
maps_bing_api_key=""
maps_google_api_key=""
maps_zoombuttons="false"
gyro="true"
webvr="true"
webvr_gyro_keeplookingdirection="false"
littleplanetintro="false"
title="true"
thumbs="true"
thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop=""
thumbs_opened="true"
thumbs_text="true"
thumbs_dragging="true"
thumbs_onhoverscrolling="false"
thumbs_scrollbuttons="false"
thumbs_scrollindicator="false"
thumbs_loop="false"
tooltips_buttons="false"
tooltips_thumbs="false"
tooltips_hotspots="false"
tooltips_mapspots="false"
deeplinking="false"
loadscene_flags="MERGE"
loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)"
loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)"
loadscene_blend_next="SLIDEBLEND(0.5, 0, 0.75, linear)"
loadingtext="loading..."
layout_width="100%"
layout_maxwidth="814"
controlbar_width="-24"
controlbar_height="40"
controlbar_offset="20"
controlbar_offset_closed="-40"
controlbar_overlap.no-fractionalscaling="10"
controlbar_overlap.fractionalscaling="0"
design_skin_images="vtourskin.png"
design_bgcolor="0x2D3E50"
design_bgalpha="0.8"
design_bgborder="0"
design_bgroundedge="1"
design_bgshadow="0 4 10 0x000000 0.3"
design_thumbborder_bgborder="3 0xFFFFFF 1.0"
design_thumbborder_padding="2"
design_thumbborder_bgroundedge="0"
design_text_css="color:#FFFFFF; font-family:Arial;"
design_text_shadow="1"
/>
<!--
For an alternative skin design either change the <skin_settings> values
from above or optionally include one of the predefined designs from below.
-->
<!-- <include url="skin/vtourskin_design_flat_light.xml" /> -->
<!-- <include url="skin/vtourskin_design_glass.xml" /> -->
<!-- <include url="skin/vtourskin_design_ultra_light.xml" /> -->
<!-- <include url="skin/vtourskin_design_117.xml" /> -->
<!-- <include url="skin/vtourskin_design_117round.xml" /> -->
<!-- startup action - load the first scene -->
<action name="startup" autorun="onstart">
if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
loadscene(get(startscene), null, MERGE);
if(startactions !== null, startactions() );
</action>
<scene name="scene_achilleion-hof-unten" title="Achilleion - Garden" onstart="" thumburl="panos/achilleion-hof-unten.tiles/thumb.jpg" lat="39.563340" lng="19.904324" heading="0.0">
<view hlookat="-1" vlookat="11" fovtype="MFOV" fov="120" fovmin="70" fovmax="140" limitview="auto" />
<preview url="panos/achilleion-hof-unten.tiles/preview.jpg" />
<image>
<cube url="panos/achilleion-hof-unten.tiles/mobile_%s.jpg" />
</image>
</scene>
<scene name="scene_canaldemure5" title="Canal d´Amour 2" onstart="" thumburl="panos/canaldemure5.tiles/thumb.jpg" lat="39.796233694" lng="19.70181763" heading="0.0">
<view hlookat="-118" vlookat="4" fovtype="MFOV" fov="132" fovmin="70" fovmax="140" limitview="auto" />
<preview url="panos/canaldemure5.tiles/preview.jpg" />
<image>
<cube url="panos/canaldemure5.tiles/mobile_%s.jpg" />
</image>
</scene>
<scene name="videopano" thumburl="videothumb.jpg" title="krpano Panoramic Video Example">
<!-- include the videoplayer interface / skin (with VR support) -->
<include url="skin/videointerface.xml" />
<layer name="skin_btn_playpause" url="skin/vtourskin.png" crop="0|640|64|64" align="topleft" x="5" y="135" scale="0.6" onclick="plugin[video].togglepause();" />
<!-- include the videoplayer plugin -->
<plugin name="video"
url.html5="%SWFPATH%/plugins/videoplayer.js"
url.flash="%SWFPATH%/plugins/videoplayer.swf"
pausedonstart="false"
loop="true"
volume="1.0"
onloaded="add_video_sources();"
/>
<!-- use the videoplayer plugin as panoramic image source -->
<image>
<sphere url="plugin:video" />
</image>
<!-- set the default view -->
<view hlookat="0" vlookat="0" fovtype="DFOV" fov="130" fovmin="75" fovmax="150" distortion="0.0" />
<!-- add the video sources and play the video -->
<action name="add_video_sources">
videointerface_addsource('1024x512', '%CURRENTXML%/video-1024x512.mp4|%CURRENTXML%/video-1024x512.webm|%CURRENTXML%/iphone-audio.m4a', '%CURRENTXML%/video-1024x512-poster.jpg');
videointerface_addsource('1920x960', '%CURRENTXML%/video-1920x960.mp4|%CURRENTXML%/video-1920x960.webm|%CURRENTXML%/iphone-audio.m4a', '%CURRENTXML%/video-1920x960-poster.jpg');
if(device.ios,
<!-- iOS Safari has a very slow 'video-to-webgl-texture' transfer, therefore use a low-res video by default -->
videointerface_play('1024x512');
,
videointerface_play('1920x960');
);
</action>
</scene>
</krpano>