videohotspots exclude from mobiles
- Hopki
- Gnome
- Posts: 13066
- Joined: Thu Jan 10, 2008 3:16 pm
- Location: Layer de la Haye, Essex UK
- Contact:
Hi, just use the visible logic block
Is Mobile, =, True, Visible: false
Regards,
Hopki
Is Mobile, =, True, Visible: false
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
- Hopki
- Gnome
- Posts: 13066
- Joined: Thu Jan 10, 2008 3:16 pm
- Location: Layer de la Haye, Essex UK
- Contact:
HUmmmm,
Video hotspots, "ht_video" or pinned video?
Regards,
Hopki
Video hotspots, "ht_video" or pinned video?
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
If it looks like this it's a pinned video.how can I tel which is which.
You can use the same detect technique as we discussed in viewtopic.php?f=6&t=12496 but with Android included in the list of devices to detect. As the pinned hotspots don't require specific skin elements all you have to do is to copy the pano.xml, rename it to pano-novideo.xml, remove the 'media' tag from each 'panorama id' and then use the detect code to select it when it detects a mobile device. All mobile devices (within the scope of the detection) will not show the videos, desktops will.is it possible to tag the videohotspots to hide on mobiles?
Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
I have a very strange issue here.
When I remove the media tag from the xml, the videos are removed and it works as expected.
But when I replace the videos with static images, they will not load but instead the videos are loaded (the xml code clearly tags image and directs to a jpg.
I tested this on several devices and can't get my head around what's going wrong here.
After much more testing I come to the conclusion that there must be a mistake in the code to change the XML.
The skins a re switcing, but not so the xml as I have generated two sets of xml and skin files, each with their own html.
One set with the videos and one set with static images instead of the videos. Called from their unique html they work fine, but when I try to use an html the detects the devices, the xml are not changed, only the skins
And what is REALLY odd, when I alter the line <pano.readConfigUrl("pano_iphone.xml");> to go to like pano_something.xml the player complains that he can't find the panorama.xml. So there must be some kind of connection, but whatever I try, the proper files are never loaded.
When I remove the media tag from the xml, the videos are removed and it works as expected.
But when I replace the videos with static images, they will not load but instead the videos are loaded (the xml code clearly tags image and directs to a jpg.
I tested this on several devices and can't get my head around what's going wrong here.
After much more testing I come to the conclusion that there must be a mistake in the code to change the XML.
The skins a re switcing, but not so the xml as I have generated two sets of xml and skin files, each with their own html.
One set with the videos and one set with static images instead of the videos. Called from their unique html they work fine, but when I try to use an html the detects the devices, the xml are not changed, only the skins
And what is REALLY odd, when I alter the line <pano.readConfigUrl("pano_iphone.xml");> to go to like pano_something.xml the player complains that he can't find the panorama.xml. So there must be some kind of connection, but whatever I try, the proper files are never loaded.
Code: Select all
<!-- - - - - - - 8<- - - - - - cut here - - - - - 8<- - - - - - - -->
<script type="text/javascript" src="pano2vr_player.js">
</script>
<script type="text/javascript" src="skin.js">
</script>
<div id="container" style="width:100%;height:100%;overflow:hidden;">
<br>Loading...<br><br>
This content requires HTML5 with CSS3 3D Transforms or WebGL.
</div>
<script type="text/javascript">
// create the panorama player with the container
pano=new pano2vrPlayer("container");
// add the skin object
skin=new pano2vrSkin(pano);
// load the configuration
window.addEventListener("load", function() {
pano.readConfigUrlAsync("pano.xml");
});
</script>
<script type="text/javascript">
var detect = (function detect() {
function isiPhone() {
return navigator.userAgent.match(/iPhone/i) != null;
}
function isiPad() {
return navigator.userAgent.match(/iPad/i) != null;
}
return {
isiPhone: isiPhone(),
isiPad: isiPad()
};
})();
var deferredLoad = (function deferredLoad() {
function javascript(file, cb) {
var scr = document.createElement("script");
scr.setAttribute("type", "text/javascript");
scr.setAttribute("src", file);
scr.onload = cb;
document.head.appendChild(scr);
}
return {
javascript: javascript
};
})();
if (ggHasHtml5Css3D() || ggHasWebGL()) { // check for CSS3 3D transformations and WebGL
var loadPano = (function () {
// create the panorama player with the container
pano=new pano2vrPlayer("container");
// add the skin object
skin=new pano2vrSkin(pano);
// load the configuration
window.addEventListener("load", function() {
pano.readConfigUrlAsync("pano.xml",function() { gyro=new pano2vrGyro(pano,"container"); gyro.disable();});
});
// Deliver the correct skin and images
if (detect.isiPhone) {
pano=new pano2vrPlayer("container");
skin=new pano2vrSkin(pano);
pano.readConfigUrl("pano_iphone.xml");
} else if (detect.isiPad) {
pano=new pano2vrPlayer("container");
skin=new pano2vrSkin(pano);
pano.readConfigUrl("pano.xml");
} else {
pano=new pano2vrPlayer("container");
skin=new pano2vrSkin(pano);
pano.readConfigUrl("pano_iphone.xml");
}
hideUrlBar();
});
if (detect.isiPhone)
deferredLoad.javascript("skin_iphone.js", loadPano);
else if (detect.isiPad)
deferredLoad.javascript("skin_iphone.js", loadPano);
else
deferredLoad.javascript("skin.js", loadPano);
} else {
// no html5 support..
document
.getElementById("container").innerHTML = "Your web browser does not support HTML5.";
}
</script>
<noscript>
<p><b>Please enable Javascript!</b></p>
</noscript>
<!-- - - - - - - 8<- - - - - - cut here - - - - - 8<- - - - - - - -->
Hi J,
Okay so I'm trying to follow along here but I'm a bit confused as to what you actually want to happen and why are you replacing the videos with still images.
Is it because on mobile devices you only want to show the stills while on desktop you want to show the video? Is this the sort of workflow you are hoping to achieve?
Tony
Okay so I'm trying to follow along here but I'm a bit confused as to what you actually want to happen and why are you replacing the videos with still images.
Is it because on mobile devices you only want to show the stills while on desktop you want to show the video? Is this the sort of workflow you are hoping to achieve?
Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Hi J,
Taking a look at the code sample you provided it looks like you have additional code that shouldn't be there. I've created a new sample https://rebrand.ly/p2vr-detect-still that has the following work flow...
iPhone - iPad
1. Browsing to the URL on iPhone or iPad loads the ios.xml and the ios_skin.js
2. The ios.xml has still images in place of the video, the ios_skin.js has a simplex menu without the fullscreen button and the 3 navigation buttons; Home | English | French
3. Selecting the English button loads the 'English' image and selecting French loads the 'French' image. Both images are pinned using the same preferences as the videos
Android - Desktop
1. Browsing to the URL on Android or Desktop loads the pano.xml and the skin.js
2. The pano.xml has the pinned videos, the skin.js has a simplex menu with the fullscreen button and the 3 navigation buttons; Home | English | French
3. Selecting the English button loads the 'English' video and selecting French loads the 'French' video. Both videos are pinned using the same preferences as the images
Both .xml files point to a single tiles folder so all similar nodes use the same images.
Here is a copy of the code from the index.html page of the sample project...
cheers,
Tony
Taking a look at the code sample you provided it looks like you have additional code that shouldn't be there. I've created a new sample https://rebrand.ly/p2vr-detect-still that has the following work flow...
iPhone - iPad
1. Browsing to the URL on iPhone or iPad loads the ios.xml and the ios_skin.js
2. The ios.xml has still images in place of the video, the ios_skin.js has a simplex menu without the fullscreen button and the 3 navigation buttons; Home | English | French
3. Selecting the English button loads the 'English' image and selecting French loads the 'French' image. Both images are pinned using the same preferences as the videos
Android - Desktop
1. Browsing to the URL on Android or Desktop loads the pano.xml and the skin.js
2. The pano.xml has the pinned videos, the skin.js has a simplex menu with the fullscreen button and the 3 navigation buttons; Home | English | French
3. Selecting the English button loads the 'English' video and selecting French loads the 'French' video. Both videos are pinned using the same preferences as the images
Both .xml files point to a single tiles folder so all similar nodes use the same images.
Here is a copy of the code from the index.html page of the sample project...
Code: Select all
<!-- - - - - - - 8<- - - - - - cut here - - - - - 8<- - - - - - - -->
<script type="text/javascript" src="pano2vr_player.js"></script>
<script type="text/javascript" src="pano2vrgyro.js"></script>
<div id="container" style="width:100%;height:100%;overflow:hidden;">
</div>
<script type="text/javascript">
var detect = (function detect() {
function isiPhone() {
return navigator.userAgent.match(/iPhone/i) != null;
}
function isiPad() {
return navigator.userAgent.match(/iPad/i) != null;
}
return {
isiPhone: isiPhone(),
isiPad: isiPad()
};
})();
var deferredLoad = (function deferredLoad() {
function javascript(file, cb) {
var scr = document.createElement("script");
scr.setAttribute("type", "text/javascript");
scr.setAttribute("src", file);
scr.onload = cb;
document.head.appendChild(scr);
}
return {
javascript: javascript
};
})();
if (ggHasHtml5Css3D() || ggHasWebGL()) { // check for CSS3 3D transformations and WebGL
var loadPano = (function () {
// create the panorama player with the container
pano=new pano2vrPlayer("container");
// add the skin object
skin=new pano2vrSkin(pano);
// Deliver the correct skin and images
if (detect.isiPhone) {
pano=new pano2vrPlayer("container");
skin=new pano2vrSkin(pano);
pano.readConfigUrl("ios.xml");
} else if (detect.isiPad) {
pano=new pano2vrPlayer("container");
skin=new pano2vrSkin(pano);
pano.readConfigUrl("ios.xml");
} else {
pano=new pano2vrPlayer("container");
skin=new pano2vrSkin(pano);
pano.readConfigUrl("pano.xml");
}
hideUrlBar();
});
if (detect.isiPhone)
deferredLoad.javascript("ios_skin.js", loadPano);
else if (detect.isiPad)
deferredLoad.javascript("ios_skin.js", loadPano);
else
deferredLoad.javascript("skin.js", loadPano);
} else {
// no html5 support..
document
.getElementById("container").innerHTML = "Your web browser does not support HTML5.";
}
</script>
<noscript>
<p><b>Please enable Javascript!</b></p>
</noscript>
<!-- - - - - - - 8<- - - - - - cut here - - - - - 8<- - - - - - - -->
Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Thanl you so much Tony, donating your time at that time of the year is highly appreciated.
We're getting closer now, but to make it a bit more complicated I also need to detect Android phones.
As your code sample now seems to be working also for me, I maybe can get my head around to also add an Android user agent.
Let me explain why it is so many options:
Skin is clear. At the moment it's only used to hide the FS button from i-Devices.
Different pano.xml is used to hide pinned videos on certain devices as th client wants them to run after the node has loaded.
Which means a node with two or more pinned videos will crash any smartphone. Hence the idea to show only static images on screens on smartphones.
As the pinned videos seem to work on ipad (further testing needed) I want to exclude these only on iphone and android while they remain on ipad and others.
*/some time later/*
PUH, GOT iT.
Santa, I'm coming!
And thanks again, Tony, I owe you quite a couple of beers.
We're getting closer now, but to make it a bit more complicated I also need to detect Android phones.
As your code sample now seems to be working also for me, I maybe can get my head around to also add an Android user agent.
Let me explain why it is so many options:
Skin is clear. At the moment it's only used to hide the FS button from i-Devices.
Different pano.xml is used to hide pinned videos on certain devices as th client wants them to run after the node has loaded.
Which means a node with two or more pinned videos will crash any smartphone. Hence the idea to show only static images on screens on smartphones.
As the pinned videos seem to work on ipad (further testing needed) I want to exclude these only on iphone and android while they remain on ipad and others.
*/some time later/*
PUH, GOT iT.
Santa, I'm coming!
And thanks again, Tony, I owe you quite a couple of beers.
Great news!PUH, GOT iT. Santa, I'm coming!
Anytime mate, glad I could help.And thanks again, Tony, I owe you quite a couple of beers.
Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Well, to be honest, my life would have been less painful if the code in the sample you had given me initially would have been correct
It changes the skin but led to the problem with not working change of the xml.
As you mentioned earlier it contains a few lines that don't belong there. I even could narrow it down to the culprit, but as I have no idea about java script I wasn't able to fix it myself. Luckily I received your correction in time
But maybe you want to fix the source also for other if they stumble upon it from the other thread.
https://s3-ap-southeast-2.amazonaws.com ... ndex3.html
It changes the skin but led to the problem with not working change of the xml.
As you mentioned earlier it contains a few lines that don't belong there. I even could narrow it down to the culprit, but as I have no idea about java script I wasn't able to fix it myself. Luckily I received your correction in time
But maybe you want to fix the source also for other if they stumble upon it from the other thread.
https://s3-ap-southeast-2.amazonaws.com ... ndex3.html
Every successful person travels a painful journey. Suffering is an integral and essential part of any real pursuit of successWell, to be honest, my life would have been less painful if the code in the sample you had given me initially would have been correct
Glad it worked for you, wasn't aware you were under a deadlineAs you mentioned earlier it contains a few lines that don't belong there. I even could narrow it down to the culprit, but as I have no idea about java script I wasn't able to fix it myself. Luckily I received your correction in time
The code example in the other thread viewtopic.php?f=6&t=12496 works perfectly for that project, there is nothing wrong with the code if you use the same .xml structure. It's only when you use the default pano.xml do you need to change it. That said I have updated the project to avoid confusion.But maybe you want to fix the source also for other if they stumble upon it from the other thread.
https://s3-ap-southeast-2.amazonaws.com ... index.html
Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/