Dynamic Eventing Without Cue Points

This page demonstrates seting up a bit of script to create our own cue points without using the Viderian interface at all!

Note how to do this we listen for the PROGRESSING event rather than the CUE_POINT_EXECUTED event more commonly used. We also use the values coming out of this to turn the overlay on and off between 2 and 5 seconds, and between 8 and 15.

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
35
36
37
<style>
.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.js?foo" 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>
[raw]
<script type="text/javascript">
VIDERIAN.eventHost.configure([
{
    type:"PROGRESSING",
    callback:hotSpotManager
}
]);
function hotSpotManager(data) {
  if ((data.playheadTime >=2 && data.playheadTime <=5)
     ||(data.playheadTime >=8 && data.playheadTime <=15)) { 
   document.getElementById('hotSpotA').style.display='block';
} else {
    document.getElementById('hotSpotA').style.display='none';
}
}
</script>