1 |
|
---|
2 | var cueIdxOn = -1;
|
---|
3 |
|
---|
4 | function qtinit() {
|
---|
5 |
|
---|
6 | var overlay= document.getElementById('overlay');
|
---|
7 | var video= document.getElementById('video');
|
---|
8 |
|
---|
9 | video.addEventListener('timeupdate', function() {
|
---|
10 |
|
---|
11 | //var trivia_layer_on = $('input[name=PopupTrivia]:checked', '#popForm').val() || "";
|
---|
12 | var trivia_layer_on = $('input[name=PopupTrivia]:checked', '#popList').val() || "";
|
---|
13 | //var trivia_layer_on = $('input:checked', '#popForm').val() || "";
|
---|
14 |
|
---|
15 | console.log("*** trivia_layer_on = " + trivia_layer_on);
|
---|
16 |
|
---|
17 | if (trivia_layer_on != "Popup Trivia") {
|
---|
18 | return;
|
---|
19 | }
|
---|
20 |
|
---|
21 | // Only get to here if asked for the popup trivia layer
|
---|
22 | //console.log("***#### trivia layer on = " + trivia_layer_on);
|
---|
23 |
|
---|
24 | //var popActiveLayersID = getActiveOverlayLayers("name");
|
---|
25 |
|
---|
26 |
|
---|
27 | vidTimeStamp = video.currentTime;
|
---|
28 |
|
---|
29 | //for (var i=0; i<popActiveLayersID.length; i++) {
|
---|
30 | //var track_name = popActiveLayersID[i];
|
---|
31 |
|
---|
32 | var textTrack = document.getElementById('bubbles').track;
|
---|
33 |
|
---|
34 | // for each cue
|
---|
35 | if (cueIdxOn>-1) {
|
---|
36 | // there is a cue presently on
|
---|
37 | // check if need to turn off cue
|
---|
38 | if (textTrack.cues[cueIdxOn].endTime<vidTimeStamp) {
|
---|
39 | // turn off
|
---|
40 | hideBubble();
|
---|
41 | console.log("turn off cue:"+cueIdxOn);
|
---|
42 | cueIdxOn = -1;
|
---|
43 | }
|
---|
44 | }
|
---|
45 |
|
---|
46 | if (cueIdxOn==-1) {
|
---|
47 |
|
---|
48 | for (var cueIdx = 0; cueIdx < textTrack.cues.length; cueIdx++) {
|
---|
49 |
|
---|
50 | if (vidTimeStamp>=textTrack.cues[cueIdx].startTime && vidTimeStamp<textTrack.cues[cueIdx].endTime) {
|
---|
51 | console.log("show cue:"+cueIdx);
|
---|
52 | // turn on
|
---|
53 | showBubble(cueIdx);
|
---|
54 | cueIdxOn = cueIdx;
|
---|
55 | }
|
---|
56 | }
|
---|
57 | }
|
---|
58 | //}
|
---|
59 |
|
---|
60 | }, false);
|
---|
61 |
|
---|
62 | video.addEventListener('loadedmetadata', function () {
|
---|
63 | console.log("loadedmetadata");
|
---|
64 | });
|
---|
65 |
|
---|
66 | }
|
---|
67 |
|
---|
68 | function showBubble(cueIdx) {
|
---|
69 |
|
---|
70 | var iCue = document.getElementById('bubbles').track.cues[cueIdx];
|
---|
71 |
|
---|
72 | // Debug show the track properties and events.
|
---|
73 | /*for (var prop in iCue) {
|
---|
74 | if(iCue.hasOwnProperty(prop)){
|
---|
75 | console.log(prop + " = " + iCue[prop]);
|
---|
76 | }
|
---|
77 | }*/
|
---|
78 |
|
---|
79 | var objBubble = JSON.parse(iCue.text);
|
---|
80 | console.log(objBubble.title);
|
---|
81 |
|
---|
82 | // Create qtip JQuery bubble.
|
---|
83 | $('#overlay').qtip({
|
---|
84 | overwrite: "true",
|
---|
85 | content: {
|
---|
86 | title: objBubble.title,
|
---|
87 | text: objBubble.text,
|
---|
88 | button: 'Close'
|
---|
89 | },
|
---|
90 | style: {
|
---|
91 | tip: {
|
---|
92 | corner: 'bottom left'
|
---|
93 | },
|
---|
94 | widget: true, // Use the jQuery UI widget classes
|
---|
95 | def: false // Remove the default styling (usually a good idea, see below)
|
---|
96 | },
|
---|
97 | show: {
|
---|
98 | effect: function() {
|
---|
99 | $(this).show('slide', 500);
|
---|
100 | }
|
---|
101 | },
|
---|
102 | hide: {
|
---|
103 | effect: function() {
|
---|
104 | $(this).hide('puff', 500);
|
---|
105 | }
|
---|
106 | }
|
---|
107 | });
|
---|
108 |
|
---|
109 | // Position the bubble div.
|
---|
110 | var divBubble = document.getElementById('overlay');
|
---|
111 | divBubble.style.left = objBubble.xpos;
|
---|
112 | divBubble.style.top = objBubble.ypos;
|
---|
113 |
|
---|
114 | // Show the qtip bubble.
|
---|
115 | $('#overlay').qtip().show();
|
---|
116 | }
|
---|
117 |
|
---|
118 | // Hide the qtip bubble.
|
---|
119 | function hideBubble() {
|
---|
120 | console.log("onexit fired");
|
---|
121 | $('#overlay').qtip().hide();
|
---|
122 | }
|
---|
123 |
|
---|
124 | window.addEventListener("load",qtinit);
|
---|