Named Cue Points, Hotspots-Viderian Scripting Examples

This page demonstrates using those cue points to provide linkable overlays in the player. Cue point hits at 5 seconds so be patient!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.cuePointA {
       position: relative;
       top: -100px;
       left: 100px;  
       color: white;     
       display: none;
       background-color: #ffffff;
       opacity: 0.6;
       margin: 10px;
       margin-left: 20px;
    }   
</style>
<script src="https://player.viderian.com/static/track/viderian.min.js" p="5772008de4b0fc803f2a1d13"></script>

<div class="viderianPlayer" style="position: relative; padding-bottom: 56%; padding-top: 20px; height: 0;">
	<iframe src="https://player.viderian.com/player/5772008de4b0fc803f2a1d13?auto=true" frameborder="0" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
</div>

<div id="hotSpotA" class="cuePointA"><a href="http://www.cueblocks.com/resource/holygrail-of-ecommerce-conversion-rate-optimization-91-point-checklist.php">ECommerce Conversion Rate Optimization!</a></div>

<script type="text/javascript">
VIDERIAN.eventHost.configure([
{
    type:"CUE_POINT_EXECUTED",
    callback:hotSpotManager
}
]);
function hotSpotManager(data) {
  //alert(JSON.stringify(data));
  if (data[0].name == 'TestA') {
    document.getElementById('hotSpotA').style.display='block';
  }
}
</script>