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