Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
36d94d81 by Dan Rempel
Options

EY update to jc and Katie's feedback. Still double the weight of spec (file size)

1 parent 40676886
Expand all
Inline Side-by-side
Showing 60 changed files with 2225 additions and 1661 deletions
...@@ -22,73 +22,80 @@ ...@@ -22,73 +22,80 @@
22 </script> 22 </script>
23 --> 23 -->
24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script> 24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
25 <link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
26 <script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
25 <script type="text/javascript"> 27 <script type="text/javascript">
28
29 /**
30 * This section uses videojs with eyeBuild, tracking plays, clicks, etc.
31 **/
26 window.onload = function() { 32 window.onload = function() {
27 eyeBuild.initialize(); 33 eyeBuild.initialize();
28 window.isVideoClick = false; 34 window.isVideoClick = false;
29 35
30 var videoPlays = 0; 36 //var video = document.getElementsByTagName("video")[0];
31 var v0 = false; 37 var myVideoJsPlayer = videojs('video');
32 var v25 = false; 38 var video = document.querySelector("#video video");
33 var v50 = false;
34 var v75 = false;
35
36 var video = document.getElementById("video");
37 var videoControls = document.getElementById("video-controls");
38 var playButton = document.getElementById("play-pause"); 39 var playButton = document.getElementById("play-pause");
39 playButton.addEventListener("click", function(e) { 40 var txt = document.getElementById("txt");
40 if (video.paused == true) { 41
41 play(); 42 videojs(video, {}, function(){
43
44 var videoPlays = 0;
45 var v0 = false;
46 var v25 = false;
47 var v50 = false;
48 var v75 = false;
49
50 video.addEventListener("play", function(e) {
42 eyeBuild.doIAT(0); 51 eyeBuild.doIAT(0);
43 } else { 52 videoPlays++;
44 pause(); 53 playButton.setAttribute("class", "play");
54 txt.setAttribute("class", "play");
55 });
56 video.addEventListener("pause", function(e) {
45 eyeBuild.doIAT(1); 57 eyeBuild.doIAT(1);
46 } 58 playButton.setAttribute("class", "pause");
47 }); 59 txt.setAttribute("class", "pause");
48 var play = function(){ 60 });
49 video.play(); 61 video.addEventListener("ended", function(e) {
50 videoPlays++; 62 video.currentTime = 0;
51 playButton.setAttribute("class", "pause"); 63 playButton.setAttribute("class", "pause");
52 videoControls.setAttribute("class", "play"); 64 v0 = false;
53 document.getElementById("txt").setAttribute("class", "play"); 65 v25 = false;
54 } 66 v50 = false;
55 var pause = function(){ 67 v75 = false;
56 video.pause(); 68 eyeBuild.doIAT(9);
57 playButton.setAttribute("class", "play"); 69 });
58 } 70
59 video.addEventListener('ended', function(e){ 71 // track video plays
60 video.currentTime = 0; 72 video.addEventListener('timeupdate', function(e){
61 pause(); 73 var pct = video.currentTime / video.duration *100;
62 videoControls.setAttribute("class", "start"); 74 if (pct > 75 && !v75){
63 playButton.setAttribute("class", "play"); 75 v75 = true;
64 v0 = false; 76 eyeBuild.doIAT(8);
65 v25 = false; 77 }else if (pct > 50 && !v50){
66 v50 = false; 78 v50 = true;
67 v75 = false; 79 eyeBuild.doIAT(7);
68 eyeBuild.doIAT(9); 80 }else if (pct > 25 && !v25){
69 }, false); 81 v25 = true;
70 82 eyeBuild.doIAT(6);
71 // track video plays 83 }else if (pct > 0 && !v0){
72 video.addEventListener('timeupdate', function(e){ 84 v0 = true;
73 var pct = video.currentTime / video.duration *100; 85 eyeBuild.doIAT(5);
74 if (pct > 75 && !v75){ 86 if(videoPlays>1){
75 v75 = true; 87 eyeBuild.doIAT(10);
76 eyeBuild.doIAT(8); 88 }
77 }else if (pct > 50 && !v50){
78 v50 = true;
79 eyeBuild.doIAT(7);
80 }else if (pct > 25 && !v25){
81 v25 = true;
82 eyeBuild.doIAT(6);
83 }else if (pct > 0 && !v0){
84 v0 = true;
85 eyeBuild.doIAT(5);
86 if(videoPlays>1){
87 eyeBuild.doIAT(10);
88 } 89 }
89 } 90 }, false);
90 }, false); 91
92 playButton.addEventListener('click', function(e){
93 myVideoJsPlayer.play();
94 }, false);
95
96 });
91 97
98
92 /* 99 /*
93 var closeButton = document.getElementById("close"); 100 var closeButton = document.getElementById("close");
94 closeButton.addEventListener("click", function(e) { 101 closeButton.addEventListener("click", function(e) {
...@@ -143,37 +150,34 @@ ...@@ -143,37 +150,34 @@
143 */ 150 */
144 } 151 }
145 152
146 #video, #video-controls{ 153 #video, #play-pause{
147 position: absolute; 154 position: absolute;
148 width: 930px; 155 width: 930px;
149 height: 523px; 156 height: 523px;
150 left:34px; 157 left:34px;
151 top:34px; 158 top:34px;
159 border:none;
152 } 160 }
153 #video-controls.start{ 161 #play-pause{
154 background: url(assets/img/poster1.jpg) no-repeat center center;
155 }
156 #video-controls.play {
157 background: none;
158 z-index: 11;
159 }
160 #video-controls button{
161 width: 100%;
162 height: 100%;
163 background: url(assets/img/play.svg) no-repeat center center;
164 border: none;
165 cursor: pointer; 162 cursor: pointer;
163 background: url(assets/img/play.svg) no-repeat center center;
166 } 164 }
167 #video-controls button.play:hover{ 165 #play-pause.pause:hover{
168 background-size: 60px 60px; 166 background-size: 60px 60px;
169 } 167 }
170 #video-controls button.play{ 168 #play-pause.pause:active{
171 background: url(assets/img/play.svg) no-repeat center center; 169 background-size: 50px 50px;
170 }
171 #play-pause.pause{
172 background-size: 55px 55px; 172 background-size: 55px 55px;
173 display: block;
173 } 174 }
174 #video-controls button.pause{ 175 #play-pause.play{
175 background: none; 176 display: none;
176 } 177 }
178 .vjs-big-play-button{
179 display: none !important;
180 }
177 181
178 #txt { 182 #txt {
179 position: absolute; 183 position: absolute;
...@@ -188,6 +192,9 @@ ...@@ -188,6 +192,9 @@
188 #txt.play { 192 #txt.play {
189 display: none; 193 display: none;
190 } 194 }
195 #txt.pause {
196 display: block;
197 }
191 #overlay { 198 #overlay {
192 position: absolute; 199 position: absolute;
193 width: 941px; 200 width: 941px;
...@@ -200,18 +207,16 @@ ...@@ -200,18 +207,16 @@
200 207
201 <body> 208 <body>
202 <div id="border"> 209 <div id="border">
203 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"> 210 <a id="click-tag" href="javascript:eyeBuild.doClick(0);">
204 <img id="txt" class="pause" src="assets/img/slice.svg" alt="txt"> 211 <img id="txt" style="pause" src="assets/img/slice.svg" alt="txt">
205 <video id="video" width="" height="">
206 <source src="assets/vid.mp4" type="video/mp4">
207 Your browser doesn't support HTML5 video.
208 </video>
209 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
210 <img id="overlay" src="assets/img/overlay.png" alt="txt"> 212 <img id="overlay" src="assets/img/overlay.png" alt="txt">
211 </a> 213 </a>
212 <div id="video-controls" class="start"> 214 <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="assets/img/poster1.jpg" data-setup='{"example_option":true}'>
213 <button type="button" id="play-pause" class="play"></button> 215 <source src="../vidA.mp4" type="video/mp4" />
214 </div> 216 <!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
217 <!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
218 </video>
219 <button id="play-pause" class="pause"></button>
215 </div> 220 </div>
216 221
217 <!-- jQuery--> 222 <!-- jQuery-->
......
...@@ -22,73 +22,80 @@ ...@@ -22,73 +22,80 @@
22 </script> 22 </script>
23 --> 23 -->
24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script> 24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
25 <link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
26 <script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
25 <script type="text/javascript"> 27 <script type="text/javascript">
28
29 /**
30 * This section uses videojs with eyeBuild, tracking plays, clicks, etc.
31 **/
26 window.onload = function() { 32 window.onload = function() {
27 eyeBuild.initialize(); 33 eyeBuild.initialize();
28 window.isVideoClick = false; 34 window.isVideoClick = false;
29 35
30 var videoPlays = 0; 36 //var video = document.getElementsByTagName("video")[0];
31 var v0 = false; 37 var myVideoJsPlayer = videojs('video');
32 var v25 = false; 38 var video = document.querySelector("#video video");
33 var v50 = false;
34 var v75 = false;
35
36 var video = document.getElementById("video");
37 var videoControls = document.getElementById("video-controls");
38 var playButton = document.getElementById("play-pause"); 39 var playButton = document.getElementById("play-pause");
39 playButton.addEventListener("click", function(e) { 40 var txt = document.getElementById("txt");
40 if (video.paused == true) { 41
41 play(); 42 videojs(video, {}, function(){
43
44 var videoPlays = 0;
45 var v0 = false;
46 var v25 = false;
47 var v50 = false;
48 var v75 = false;
49
50 video.addEventListener("play", function(e) {
42 eyeBuild.doIAT(0); 51 eyeBuild.doIAT(0);
43 } else { 52 videoPlays++;
44 pause(); 53 playButton.setAttribute("class", "play");
54 txt.setAttribute("class", "play");
55 });
56 video.addEventListener("pause", function(e) {
45 eyeBuild.doIAT(1); 57 eyeBuild.doIAT(1);
46 } 58 playButton.setAttribute("class", "pause");
47 }); 59 txt.setAttribute("class", "pause");
48 var play = function(){ 60 });
49 video.play(); 61 video.addEventListener("ended", function(e) {
50 videoPlays++; 62 video.currentTime = 0;
51 playButton.setAttribute("class", "pause"); 63 playButton.setAttribute("class", "pause");
52 videoControls.setAttribute("class", "play"); 64 v0 = false;
53 document.getElementById("txt").setAttribute("class", "play"); 65 v25 = false;
54 } 66 v50 = false;
55 var pause = function(){ 67 v75 = false;
56 video.pause(); 68 eyeBuild.doIAT(9);
57 playButton.setAttribute("class", "play"); 69 });
58 } 70
59 video.addEventListener('ended', function(e){ 71 // track video plays
60 video.currentTime = 0; 72 video.addEventListener('timeupdate', function(e){
61 pause(); 73 var pct = video.currentTime / video.duration *100;
62 videoControls.setAttribute("class", "start"); 74 if (pct > 75 && !v75){
63 playButton.setAttribute("class", "play"); 75 v75 = true;
64 v0 = false; 76 eyeBuild.doIAT(8);
65 v25 = false; 77 }else if (pct > 50 && !v50){
66 v50 = false; 78 v50 = true;
67 v75 = false; 79 eyeBuild.doIAT(7);
68 eyeBuild.doIAT(9); 80 }else if (pct > 25 && !v25){
69 }, false); 81 v25 = true;
70 82 eyeBuild.doIAT(6);
71 // track video plays 83 }else if (pct > 0 && !v0){
72 video.addEventListener('timeupdate', function(e){ 84 v0 = true;
73 var pct = video.currentTime / video.duration *100; 85 eyeBuild.doIAT(5);
74 if (pct > 75 && !v75){ 86 if(videoPlays>1){
75 v75 = true; 87 eyeBuild.doIAT(10);
76 eyeBuild.doIAT(8); 88 }
77 }else if (pct > 50 && !v50){
78 v50 = true;
79 eyeBuild.doIAT(7);
80 }else if (pct > 25 && !v25){
81 v25 = true;
82 eyeBuild.doIAT(6);
83 }else if (pct > 0 && !v0){
84 v0 = true;
85 eyeBuild.doIAT(5);
86 if(videoPlays>1){
87 eyeBuild.doIAT(10);
88 } 89 }
89 } 90 }, false);
90 }, false); 91
92 playButton.addEventListener('click', function(e){
93 myVideoJsPlayer.play();
94 }, false);
95
96 });
91 97
98
92 /* 99 /*
93 var closeButton = document.getElementById("close"); 100 var closeButton = document.getElementById("close");
94 closeButton.addEventListener("click", function(e) { 101 closeButton.addEventListener("click", function(e) {
...@@ -143,37 +150,34 @@ ...@@ -143,37 +150,34 @@
143 */ 150 */
144 } 151 }
145 152
146 #video, #video-controls{ 153 #video, #play-pause{
147 position: absolute; 154 position: absolute;
148 width: 930px; 155 width: 930px;
149 height: 523px; 156 height: 523px;
150 left:34px; 157 left:34px;
151 top:34px; 158 top:34px;
159 border:none;
152 } 160 }
153 #video-controls.start{ 161 #play-pause{
154 background: url(assets/img/poster2.jpg) no-repeat center center;
155 }
156 #video-controls.play {
157 background: none;
158 z-index: 11;
159 }
160 #video-controls button{
161 width: 100%;
162 height: 100%;
163 background: url(assets/img/play.svg) no-repeat center center;
164 border: none;
165 cursor: pointer; 162 cursor: pointer;
163 background: url(assets/img/play.svg) no-repeat center center;
166 } 164 }
167 #video-controls button.play:hover{ 165 #play-pause.pause:hover{
168 background-size: 60px 60px; 166 background-size: 60px 60px;
169 } 167 }
170 #video-controls button.play{ 168 #play-pause.pause:active{
171 background: url(assets/img/play.svg) no-repeat center center; 169 background-size: 50px 50px;
170 }
171 #play-pause.pause{
172 background-size: 55px 55px; 172 background-size: 55px 55px;
173 display: block;
173 } 174 }
174 #video-controls button.pause{ 175 #play-pause.play{
175 background: none; 176 display: none;
176 } 177 }
178 .vjs-big-play-button{
179 display: none !important;
180 }
177 181
178 #txt { 182 #txt {
179 position: absolute; 183 position: absolute;
...@@ -188,6 +192,9 @@ ...@@ -188,6 +192,9 @@
188 #txt.play { 192 #txt.play {
189 display: none; 193 display: none;
190 } 194 }
195 #txt.pause {
196 display: block;
197 }
191 #overlay { 198 #overlay {
192 position: absolute; 199 position: absolute;
193 width: 941px; 200 width: 941px;
...@@ -200,18 +207,16 @@ ...@@ -200,18 +207,16 @@
200 207
201 <body> 208 <body>
202 <div id="border"> 209 <div id="border">
203 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"> 210 <a id="click-tag" href="javascript:eyeBuild.doClick(0);">
204 <img id="txt" class="pause" src="assets/img/slice.svg" alt="txt"> 211 <img id="txt" style="pause" src="assets/img/slice.svg" alt="txt">
205 <video id="video" width="" height="">
206 <source src="assets/vid.mp4" type="video/mp4">
207 Your browser doesn't support HTML5 video.
208 </video>
209 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
210 <img id="overlay" src="assets/img/overlay.png" alt="txt"> 212 <img id="overlay" src="assets/img/overlay.png" alt="txt">
211 </a> 213 </a>
212 <div id="video-controls" class="start"> 214 <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="assets/img/poster2.jpg" data-setup='{"example_option":true}'>
213 <button type="button" id="play-pause" class="play"></button> 215 <source src="../vidA.mp4" type="video/mp4" />
214 </div> 216 <!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
217 <!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
218 </video>
219 <button id="play-pause" class="pause"></button>
215 </div> 220 </div>
216 221
217 <!-- jQuery--> 222 <!-- jQuery-->
......
...@@ -22,73 +22,80 @@ ...@@ -22,73 +22,80 @@
22 </script> 22 </script>
23 --> 23 -->
24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script> 24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
25 <link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
26 <script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
25 <script type="text/javascript"> 27 <script type="text/javascript">
28
29 /**
30 * This section uses videojs with eyeBuild, tracking plays, clicks, etc.
31 **/
26 window.onload = function() { 32 window.onload = function() {
27 eyeBuild.initialize(); 33 eyeBuild.initialize();
28 window.isVideoClick = false; 34 window.isVideoClick = false;
29 35
30 var videoPlays = 0; 36 //var video = document.getElementsByTagName("video")[0];
31 var v0 = false; 37 var myVideoJsPlayer = videojs('video');
32 var v25 = false; 38 var video = document.querySelector("#video video");
33 var v50 = false;
34 var v75 = false;
35
36 var video = document.getElementById("video");
37 var videoControls = document.getElementById("video-controls");
38 var playButton = document.getElementById("play-pause"); 39 var playButton = document.getElementById("play-pause");
39 playButton.addEventListener("click", function(e) { 40 var txt = document.getElementById("txt");
40 if (video.paused == true) { 41
41 play(); 42 videojs(video, {}, function(){
43
44 var videoPlays = 0;
45 var v0 = false;
46 var v25 = false;
47 var v50 = false;
48 var v75 = false;
49
50 video.addEventListener("play", function(e) {
42 eyeBuild.doIAT(0); 51 eyeBuild.doIAT(0);
43 } else { 52 videoPlays++;
44 pause(); 53 playButton.setAttribute("class", "play");
54 txt.setAttribute("class", "play");
55 });
56 video.addEventListener("pause", function(e) {
45 eyeBuild.doIAT(1); 57 eyeBuild.doIAT(1);
46 } 58 playButton.setAttribute("class", "pause");
47 }); 59 txt.setAttribute("class", "pause");
48 var play = function(){ 60 });
49 video.play(); 61 video.addEventListener("ended", function(e) {
50 videoPlays++; 62 video.currentTime = 0;
51 playButton.setAttribute("class", "pause"); 63 playButton.setAttribute("class", "pause");
52 videoControls.setAttribute("class", "play"); 64 v0 = false;
53 document.getElementById("txt").setAttribute("class", "play"); 65 v25 = false;
54 } 66 v50 = false;
55 var pause = function(){ 67 v75 = false;
56 video.pause(); 68 eyeBuild.doIAT(9);
57 playButton.setAttribute("class", "play"); 69 });
58 } 70
59 video.addEventListener('ended', function(e){ 71 // track video plays
60 video.currentTime = 0; 72 video.addEventListener('timeupdate', function(e){
61 pause(); 73 var pct = video.currentTime / video.duration *100;
62 videoControls.setAttribute("class", "start"); 74 if (pct > 75 && !v75){
63 playButton.setAttribute("class", "play"); 75 v75 = true;
64 v0 = false; 76 eyeBuild.doIAT(8);
65 v25 = false; 77 }else if (pct > 50 && !v50){
66 v50 = false; 78 v50 = true;
67 v75 = false; 79 eyeBuild.doIAT(7);
68 eyeBuild.doIAT(9); 80 }else if (pct > 25 && !v25){
69 }, false); 81 v25 = true;
70 82 eyeBuild.doIAT(6);
71 // track video plays 83 }else if (pct > 0 && !v0){
72 video.addEventListener('timeupdate', function(e){ 84 v0 = true;
73 var pct = video.currentTime / video.duration *100; 85 eyeBuild.doIAT(5);
74 if (pct > 75 && !v75){ 86 if(videoPlays>1){
75 v75 = true; 87 eyeBuild.doIAT(10);
76 eyeBuild.doIAT(8); 88 }
77 }else if (pct > 50 && !v50){
78 v50 = true;
79 eyeBuild.doIAT(7);
80 }else if (pct > 25 && !v25){
81 v25 = true;
82 eyeBuild.doIAT(6);
83 }else if (pct > 0 && !v0){
84 v0 = true;
85 eyeBuild.doIAT(5);
86 if(videoPlays>1){
87 eyeBuild.doIAT(10);
88 } 89 }
89 } 90 }, false);
90 }, false); 91
92 playButton.addEventListener('click', function(e){
93 myVideoJsPlayer.play();
94 }, false);
95
96 });
91 97
98
92 /* 99 /*
93 var closeButton = document.getElementById("close"); 100 var closeButton = document.getElementById("close");
94 closeButton.addEventListener("click", function(e) { 101 closeButton.addEventListener("click", function(e) {
...@@ -143,37 +150,34 @@ ...@@ -143,37 +150,34 @@
143 */ 150 */
144 } 151 }
145 152
146 #video, #video-controls{ 153 #video, #play-pause{
147 position: absolute; 154 position: absolute;
148 width: 930px; 155 width: 930px;
149 height: 523px; 156 height: 523px;
150 left:34px; 157 left:34px;
151 top:34px; 158 top:34px;
159 border:none;
152 } 160 }
153 #video-controls.start{ 161 #play-pause{
154 background: url(assets/img/poster2.jpg) no-repeat center center;
155 }
156 #video-controls.play {
157 background: none;
158 z-index: 11;
159 }
160 #video-controls button{
161 width: 100%;
162 height: 100%;
163 background: url(assets/img/play.svg) no-repeat center center;
164 border: none;
165 cursor: pointer; 162 cursor: pointer;
163 background: url(assets/img/play.svg) no-repeat center center;
166 } 164 }
167 #video-controls button.play:hover{ 165 #play-pause.pause:hover{
168 background-size: 60px 60px; 166 background-size: 60px 60px;
169 } 167 }
170 #video-controls button.play{ 168 #play-pause.pause:active{
171 background: url(assets/img/play.svg) no-repeat center center; 169 background-size: 50px 50px;
170 }
171 #play-pause.pause{
172 background-size: 55px 55px; 172 background-size: 55px 55px;
173 display: block;
173 } 174 }
174 #video-controls button.pause{ 175 #play-pause.play{
175 background: none; 176 display: none;
176 } 177 }
178 .vjs-big-play-button{
179 display: none !important;
180 }
177 181
178 #txt { 182 #txt {
179 position: absolute; 183 position: absolute;
...@@ -188,6 +192,9 @@ ...@@ -188,6 +192,9 @@
188 #txt.play { 192 #txt.play {
189 display: none; 193 display: none;
190 } 194 }
195 #txt.pause {
196 display: block;
197 }
191 #overlay { 198 #overlay {
192 position: absolute; 199 position: absolute;
193 width: 941px; 200 width: 941px;
...@@ -200,18 +207,16 @@ ...@@ -200,18 +207,16 @@
200 207
201 <body> 208 <body>
202 <div id="border"> 209 <div id="border">
203 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"> 210 <a id="click-tag" href="javascript:eyeBuild.doClick(0);">
204 <img id="txt" class="pause" src="assets/img/slice.svg" alt="txt"> 211 <img id="txt" style="pause" src="assets/img/slice.svg" alt="txt">
205 <video id="video" width="" height="">
206 <source src="assets/vid.mp4" type="video/mp4">
207 Your browser doesn't support HTML5 video.
208 </video>
209 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
210 <img id="overlay" src="assets/img/overlay.png" alt="txt"> 212 <img id="overlay" src="assets/img/overlay.png" alt="txt">
211 </a> 213 </a>
212 <div id="video-controls" class="start"> 214 <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="assets/img/poster3.jpg" data-setup='{"example_option":true}'>
213 <button type="button" id="play-pause" class="play"></button> 215 <source src="../vidC.mp4" type="video/mp4" />
214 </div> 216 <!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
217 <!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
218 </video>
219 <button id="play-pause" class="pause"></button>
215 </div> 220 </div>
216 221
217 <!-- jQuery--> 222 <!-- jQuery-->
......
...@@ -22,73 +22,80 @@ ...@@ -22,73 +22,80 @@
22 </script> 22 </script>
23 --> 23 -->
24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script> 24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
25 <link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
26 <script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
25 <script type="text/javascript"> 27 <script type="text/javascript">
28
29 /**
30 * This section uses videojs with eyeBuild, tracking plays, clicks, etc.
31 **/
26 window.onload = function() { 32 window.onload = function() {
27 eyeBuild.initialize(); 33 eyeBuild.initialize();
28 window.isVideoClick = false; 34 window.isVideoClick = false;
29 35
30 var videoPlays = 0; 36 //var video = document.getElementsByTagName("video")[0];
31 var v0 = false; 37 var myVideoJsPlayer = videojs('video');
32 var v25 = false; 38 var video = document.querySelector("#video video");
33 var v50 = false;
34 var v75 = false;
35
36 var video = document.getElementById("video");
37 var videoControls = document.getElementById("video-controls");
38 var playButton = document.getElementById("play-pause"); 39 var playButton = document.getElementById("play-pause");
39 playButton.addEventListener("click", function(e) { 40 var txt = document.getElementById("txt");
40 if (video.paused == true) { 41
41 play(); 42 videojs(video, {}, function(){
43
44 var videoPlays = 0;
45 var v0 = false;
46 var v25 = false;
47 var v50 = false;
48 var v75 = false;
49
50 video.addEventListener("play", function(e) {
42 eyeBuild.doIAT(0); 51 eyeBuild.doIAT(0);
43 } else { 52 videoPlays++;
44 pause(); 53 playButton.setAttribute("class", "play");
54 txt.setAttribute("class", "play");
55 });
56 video.addEventListener("pause", function(e) {
45 eyeBuild.doIAT(1); 57 eyeBuild.doIAT(1);
46 } 58 playButton.setAttribute("class", "pause");
47 }); 59 txt.setAttribute("class", "pause");
48 var play = function(){ 60 });
49 video.play(); 61 video.addEventListener("ended", function(e) {
50 videoPlays++; 62 video.currentTime = 0;
51 playButton.setAttribute("class", "pause"); 63 playButton.setAttribute("class", "pause");
52 videoControls.setAttribute("class", "play"); 64 v0 = false;
53 document.getElementById("txt").setAttribute("class", "play"); 65 v25 = false;
54 } 66 v50 = false;
55 var pause = function(){ 67 v75 = false;
56 video.pause(); 68 eyeBuild.doIAT(9);
57 playButton.setAttribute("class", "play"); 69 });
58 } 70
59 video.addEventListener('ended', function(e){ 71 // track video plays
60 video.currentTime = 0; 72 video.addEventListener('timeupdate', function(e){
61 pause(); 73 var pct = video.currentTime / video.duration *100;
62 videoControls.setAttribute("class", "start"); 74 if (pct > 75 && !v75){
63 playButton.setAttribute("class", "play"); 75 v75 = true;
64 v0 = false; 76 eyeBuild.doIAT(8);
65 v25 = false; 77 }else if (pct > 50 && !v50){
66 v50 = false; 78 v50 = true;
67 v75 = false; 79 eyeBuild.doIAT(7);
68 eyeBuild.doIAT(9); 80 }else if (pct > 25 && !v25){
69 }, false); 81 v25 = true;
70 82 eyeBuild.doIAT(6);
71 // track video plays 83 }else if (pct > 0 && !v0){
72 video.addEventListener('timeupdate', function(e){ 84 v0 = true;
73 var pct = video.currentTime / video.duration *100; 85 eyeBuild.doIAT(5);
74 if (pct > 75 && !v75){ 86 if(videoPlays>1){
75 v75 = true; 87 eyeBuild.doIAT(10);
76 eyeBuild.doIAT(8); 88 }
77 }else if (pct > 50 && !v50){
78 v50 = true;
79 eyeBuild.doIAT(7);
80 }else if (pct > 25 && !v25){
81 v25 = true;
82 eyeBuild.doIAT(6);
83 }else if (pct > 0 && !v0){
84 v0 = true;
85 eyeBuild.doIAT(5);
86 if(videoPlays>1){
87 eyeBuild.doIAT(10);
88 } 89 }
89 } 90 }, false);
90 }, false); 91
92 playButton.addEventListener('click', function(e){
93 myVideoJsPlayer.play();
94 }, false);
95
96 });
91 97
98
92 /* 99 /*
93 var closeButton = document.getElementById("close"); 100 var closeButton = document.getElementById("close");
94 closeButton.addEventListener("click", function(e) { 101 closeButton.addEventListener("click", function(e) {
...@@ -143,37 +150,34 @@ ...@@ -143,37 +150,34 @@
143 */ 150 */
144 } 151 }
145 152
146 #video, #video-controls{ 153 #video, #play-pause{
147 position: absolute; 154 position: absolute;
148 width: 952px; 155 width: 952px;
149 height: 536px; 156 height: 536px;
150 left:36px; 157 left:36px;
151 top:61px; 158 top:61px;
159 border:none;
152 } 160 }
153 #video-controls.start{ 161 #play-pause{
154 background: url(assets/img/poster1.jpg) no-repeat center center;
155 }
156 #video-controls.play {
157 background: none;
158 z-index: 11;
159 }
160 #video-controls button{
161 width: 100%;
162 height: 100%;
163 background: url(assets/img/play.svg) no-repeat center center;
164 border: none;
165 cursor: pointer; 162 cursor: pointer;
163 background: url(assets/img/play.svg) no-repeat center center;
166 } 164 }
167 #video-controls button.play:hover{ 165 #play-pause.pause:hover{
168 background-size: 60px 60px; 166 background-size: 60px 60px;
169 } 167 }
170 #video-controls button.play{ 168 #play-pause.pause:active{
171 background: url(assets/img/play.svg) no-repeat center center; 169 background-size: 50px 50px;
170 }
171 #play-pause.pause{
172 background-size: 55px 55px; 172 background-size: 55px 55px;
173 display: block;
173 } 174 }
174 #video-controls button.pause{ 175 #play-pause.play{
175 background: none; 176 display: none;
176 } 177 }
178 .vjs-big-play-button{
179 display: none !important;
180 }
177 181
178 #txt { 182 #txt {
179 position: absolute; 183 position: absolute;
...@@ -188,6 +192,9 @@ ...@@ -188,6 +192,9 @@
188 #txt.play { 192 #txt.play {
189 display: none; 193 display: none;
190 } 194 }
195 #txt.pause {
196 display: block;
197 }
191 #overlay { 198 #overlay {
192 position: absolute; 199 position: absolute;
193 width: 964px; 200 width: 964px;
...@@ -200,18 +207,16 @@ ...@@ -200,18 +207,16 @@
200 207
201 <body> 208 <body>
202 <div id="border"> 209 <div id="border">
203 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"> 210 <a id="click-tag" href="javascript:eyeBuild.doClick(0);">
204 <img id="txt" class="pause" src="assets/img/slice.svg" alt="txt"> 211 <img id="txt" style="pause" src="assets/img/slice.svg" alt="txt">
205 <video id="video" width="" height="">
206 <source src="assets/vid.mp4" type="video/mp4">
207 Your browser doesn't support HTML5 video.
208 </video>
209 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
210 <img id="overlay" src="assets/img/overlay.png" alt="txt"> 212 <img id="overlay" src="assets/img/overlay.png" alt="txt">
211 </a> 213 </a>
212 <div id="video-controls" class="start"> 214 <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="assets/img/poster1.jpg" data-setup='{"example_option":true}'>
213 <button type="button" id="play-pause" class="play"></button> 215 <source src="../vidA.mp4" type="video/mp4" />
214 </div> 216 <!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
217 <!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
218 </video>
219 <button id="play-pause" class="pause"></button>
215 </div> 220 </div>
216 221
217 <!-- jQuery--> 222 <!-- jQuery-->
......
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5 <title>HTML5 Ad</title>
6 <!--
7 <script type="text/javascript">
8
9 // IAB source: modified to allow link testing
10 var clickTag = "http://thecommonwell.ca/wave";
11 function getParameterByName(name)
12 {
13 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
14 if (match == null || match == ""){
15 return clickTag;
16 } else{
17 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
18 }
19 }
20 clickTag = getParameterByName('clickTag');
21
22 </script>
23 -->
24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
25 <link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
26 <script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
27 <script type="text/javascript">
28
29 /**
30 * This section uses videojs with eyeBuild, tracking plays, clicks, etc.
31 **/
32 window.onload = function() {
33 eyeBuild.initialize();
34 window.isVideoClick = false;
35
36 //var video = document.getElementsByTagName("video")[0];
37 var myVideoJsPlayer = videojs('video');
38 var video = document.querySelector("#video video");
39 var playButton = document.getElementById("play-pause");
40 var txt = document.getElementById("txt");
41
42 videojs(video, {}, function(){
43
44 var videoPlays = 0;
45 var v0 = false;
46 var v25 = false;
47 var v50 = false;
48 var v75 = false;
49
50 video.addEventListener("play", function(e) {
51 eyeBuild.doIAT(0);
52 videoPlays++;
53 playButton.setAttribute("class", "play");
54 txt.setAttribute("class", "play");
55 });
56 video.addEventListener("pause", function(e) {
57 eyeBuild.doIAT(1);
58 playButton.setAttribute("class", "pause");
59 txt.setAttribute("class", "pause");
60 });
61 video.addEventListener("ended", function(e) {
62 video.currentTime = 0;
63 playButton.setAttribute("class", "pause");
64 v0 = false;
65 v25 = false;
66 v50 = false;
67 v75 = false;
68 eyeBuild.doIAT(9);
69 });
70
71 // track video plays
72 video.addEventListener('timeupdate', function(e){
73 var pct = video.currentTime / video.duration *100;
74 if (pct > 75 && !v75){
75 v75 = true;
76 eyeBuild.doIAT(8);
77 }else if (pct > 50 && !v50){
78 v50 = true;
79 eyeBuild.doIAT(7);
80 }else if (pct > 25 && !v25){
81 v25 = true;
82 eyeBuild.doIAT(6);
83 }else if (pct > 0 && !v0){
84 v0 = true;
85 eyeBuild.doIAT(5);
86 if(videoPlays>1){
87 eyeBuild.doIAT(10);
88 }
89 }
90 }, false);
91
92 playButton.addEventListener('click', function(e){
93 myVideoJsPlayer.play();
94 }, false);
95
96 });
97
98
99 /*
100 var closeButton = document.getElementById("close");
101 closeButton.addEventListener("click", function(e) {
102 eyeBuild.doClose();
103 });
104 */
105
106
107 }
108 </script>
109
110
111 <style>
112
113 body{
114 margin: 0;
115 padding: 0;
116 width: 1024px;
117 height: 768px;
118 line-height: 1.2;
119 font-size: 27px;
120 letter-spacing: .4;
121 color: #CD040B;
122 /* font-family: "Neue Haas Grotesk", Arial, sans-serif; */
123 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
124 font-style: normal;
125 }
126
127 a{
128 text-decoration: none;
129 color: inherit;
130 }
131 #click-tag{
132 display: block;
133 position: absolute;
134 width: 100%;
135 height: 100%;
136 }
137
138 #border{
139 position: relative;
140 width: 1024px;
141 height: 768px;
142 border: 1px solid #55565A;
143 overflow: hidden;
144 cursor: pointer;
145 box-sizing: border-box;
146 background-color: black;
147 /*
148 background: url(assets/img/back1.jpg) no-repeat #000;
149 background-size: 1000px 700px;
150 */
151 }
152
153 #video, #play-pause{
154 position: absolute;
155 width: 952px;
156 height: 536px;
157 left:36px;
158 top:61px;
159 border:none;
160 }
161 #play-pause{
162 cursor: pointer;
163 background: url(assets/img/play.svg) no-repeat center center;
164 }
165 #play-pause.pause:hover{
166 background-size: 60px 60px;
167 }
168 #play-pause.pause:active{
169 background-size: 50px 50px;
170 }
171 #play-pause.pause{
172 background-size: 55px 55px;
173 display: block;
174 }
175 #play-pause.play{
176 display: none;
177 }
178 .vjs-big-play-button{
179 display: none !important;
180 }
181
182 #txt {
183 position: absolute;
184 width: 321px;
185 height: 270px;
186 left: 58px;
187 bottom:416px;
188 z-index: 10;
189 opacity: 0;
190 transform-origin: bottom;
191 }
192 #txt.play {
193 display: none;
194 }
195 #txt.pause {
196 display: block;
197 }
198 #overlay {
199 position: absolute;
200 width: 964px;
201 height: 81px;
202 left: 36px;
203 bottom:34px;
204 }
205 </style>
206 </head>
207
208 <body>
209 <div id="border">
210 <a id="click-tag" href="javascript:eyeBuild.doClick(0);">
211 <img id="txt" style="pause" src="assets/img/slice.svg" alt="txt">
212 <img id="overlay" src="assets/img/overlay.png" alt="txt">
213 </a>
214 <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="assets/img/poster2.jpg" data-setup='{"example_option":true}'>
215 <source src="../vidA.mp4" type="video/mp4" />
216 <!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
217 <!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
218 </video>
219 <button id="play-pause" class="pause"></button>
220 </div>
221
222 <!-- jQuery-->
223 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
224
225 <!-- GREENSOCK-->
226 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
227 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
228 <script>
229
230 function stage1(){
231 var tl = new TimelineMax({repeat:0, repeatDelay:2});
232
233 tl.fromTo("#txt", .3, {opacity:0, scaleY:.01, ease:Power1.easeIn, delay:.5 }, {opacity:1, scaleY:1, ease:Power1.easeIn, delay:.5 });
234
235 console.log( "time: " + tl.totalDuration() );
236 }
237
238 //---------------------
239 $(document).ready(function(){
240 stage1();
241 });
242
243
244
245 </script>
246
247 </body>
248
249 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5 <title>HTML5 Ad</title>
6 <!--
7 <script type="text/javascript">
8
9 // IAB source: modified to allow link testing
10 var clickTag = "http://thecommonwell.ca/wave";
11 function getParameterByName(name)
12 {
13 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
14 if (match == null || match == ""){
15 return clickTag;
16 } else{
17 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
18 }
19 }
20 clickTag = getParameterByName('clickTag');
21
22 </script>
23 -->
24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
25 <link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
26 <script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
27 <script type="text/javascript">
28
29 /**
30 * This section uses videojs with eyeBuild, tracking plays, clicks, etc.
31 **/
32 window.onload = function() {
33 eyeBuild.initialize();
34 window.isVideoClick = false;
35
36 //var video = document.getElementsByTagName("video")[0];
37 var myVideoJsPlayer = videojs('video');
38 var video = document.querySelector("#video video");
39 var playButton = document.getElementById("play-pause");
40 var txt = document.getElementById("txt");
41
42 videojs(video, {}, function(){
43
44 var videoPlays = 0;
45 var v0 = false;
46 var v25 = false;
47 var v50 = false;
48 var v75 = false;
49
50 video.addEventListener("play", function(e) {
51 eyeBuild.doIAT(0);
52 videoPlays++;
53 playButton.setAttribute("class", "play");
54 txt.setAttribute("class", "play");
55 });
56 video.addEventListener("pause", function(e) {
57 eyeBuild.doIAT(1);
58 playButton.setAttribute("class", "pause");
59 txt.setAttribute("class", "pause");
60 });
61 video.addEventListener("ended", function(e) {
62 video.currentTime = 0;
63 playButton.setAttribute("class", "pause");
64 v0 = false;
65 v25 = false;
66 v50 = false;
67 v75 = false;
68 eyeBuild.doIAT(9);
69 });
70
71 // track video plays
72 video.addEventListener('timeupdate', function(e){
73 var pct = video.currentTime / video.duration *100;
74 if (pct > 75 && !v75){
75 v75 = true;
76 eyeBuild.doIAT(8);
77 }else if (pct > 50 && !v50){
78 v50 = true;
79 eyeBuild.doIAT(7);
80 }else if (pct > 25 && !v25){
81 v25 = true;
82 eyeBuild.doIAT(6);
83 }else if (pct > 0 && !v0){
84 v0 = true;
85 eyeBuild.doIAT(5);
86 if(videoPlays>1){
87 eyeBuild.doIAT(10);
88 }
89 }
90 }, false);
91
92 playButton.addEventListener('click', function(e){
93 myVideoJsPlayer.play();
94 }, false);
95
96 });
97
98
99 /*
100 var closeButton = document.getElementById("close");
101 closeButton.addEventListener("click", function(e) {
102 eyeBuild.doClose();
103 });
104 */
105
106
107 }
108 </script>
109
110
111 <style>
112
113 body{
114 margin: 0;
115 padding: 0;
116 width: 1024px;
117 height: 768px;
118 line-height: 1.2;
119 font-size: 27px;
120 letter-spacing: .4;
121 color: #CD040B;
122 /* font-family: "Neue Haas Grotesk", Arial, sans-serif; */
123 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
124 font-style: normal;
125 }
126
127 a{
128 text-decoration: none;
129 color: inherit;
130 }
131 #click-tag{
132 display: block;
133 position: absolute;
134 width: 100%;
135 height: 100%;
136 }
137
138 #border{
139 position: relative;
140 width: 1024px;
141 height: 768px;
142 border: 1px solid #55565A;
143 overflow: hidden;
144 cursor: pointer;
145 box-sizing: border-box;
146 background-color: black;
147 /*
148 background: url(assets/img/back1.jpg) no-repeat #000;
149 background-size: 1000px 700px;
150 */
151 }
152
153 #video, #play-pause{
154 position: absolute;
155 width: 952px;
156 height: 536px;
157 left:36px;
158 top:61px;
159 border:none;
160 }
161 #play-pause{
162 cursor: pointer;
163 background: url(assets/img/play.svg) no-repeat center center;
164 }
165 #play-pause.pause:hover{
166 background-size: 60px 60px;
167 }
168 #play-pause.pause:active{
169 background-size: 50px 50px;
170 }
171 #play-pause.pause{
172 background-size: 55px 55px;
173 display: block;
174 }
175 #play-pause.play{
176 display: none;
177 }
178 .vjs-big-play-button{
179 display: none !important;
180 }
181
182 #txt {
183 position: absolute;
184 width: 321px;
185 height: 270px;
186 left: 58px;
187 bottom:416px;
188 z-index: 10;
189 opacity: 0;
190 transform-origin: bottom;
191 }
192 #txt.play {
193 display: none;
194 }
195 #txt.pause {
196 display: block;
197 }
198 #overlay {
199 position: absolute;
200 width: 964px;
201 height: 81px;
202 left: 36px;
203 bottom:34px;
204 }
205 </style>
206 </head>
207
208 <body>
209 <div id="border">
210 <a id="click-tag" href="javascript:eyeBuild.doClick(0);">
211 <img id="txt" style="pause" src="assets/img/slice.svg" alt="txt">
212 <img id="overlay" src="assets/img/overlay.png" alt="txt">
213 </a>
214 <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="assets/img/poster3.jpg" data-setup='{"example_option":true}'>
215 <source src="../vidC.mp4" type="video/mp4" />
216 <!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
217 <!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
218 </video>
219 <button id="play-pause" class="pause"></button>
220 </div>
221
222 <!-- jQuery-->
223 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
224
225 <!-- GREENSOCK-->
226 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
227 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
228 <script>
229
230 function stage1(){
231 var tl = new TimelineMax({repeat:0, repeatDelay:2});
232
233 tl.fromTo("#txt", .3, {opacity:0, scaleY:.01, ease:Power1.easeIn, delay:.5 }, {opacity:1, scaleY:1, ease:Power1.easeIn, delay:.5 });
234
235 console.log( "time: " + tl.totalDuration() );
236 }
237
238 //---------------------
239 $(document).ready(function(){
240 stage1();
241 });
242
243
244
245 </script>
246
247 </body>
248
249 </html>
...\ No newline at end of file ...\ No newline at end of file
...@@ -22,72 +22,77 @@ ...@@ -22,72 +22,77 @@
22 </script> 22 </script>
23 --> 23 -->
24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script> 24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
25 <link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
26 <script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
25 <script type="text/javascript"> 27 <script type="text/javascript">
28
29 /**
30 * This section uses videojs with eyeBuild, tracking plays, clicks, etc.
31 **/
26 window.onload = function() { 32 window.onload = function() {
27 eyeBuild.initialize(); 33 eyeBuild.initialize();
28 window.isVideoClick = false; 34 window.isVideoClick = false;
29 35
30 var videoPlays = 0; 36 //var video = document.getElementsByTagName("video")[0];
31 var v0 = false; 37 var myVideoJsPlayer = videojs('video');
32 var v25 = false; 38 var video = document.querySelector("#video video");
33 var v50 = false;
34 var v75 = false;
35
36 var video = document.getElementById("video");
37 var videoControls = document.getElementById("video-controls");
38 var playButton = document.getElementById("play-pause"); 39 var playButton = document.getElementById("play-pause");
39 playButton.addEventListener("click", function(e) { 40
40 if (video.paused == true) { 41 videojs(video, {}, function(){
41 play(); 42
43 var videoPlays = 0;
44 var v0 = false;
45 var v25 = false;
46 var v50 = false;
47 var v75 = false;
48
49 video.addEventListener("play", function(e) {
42 eyeBuild.doIAT(0); 50 eyeBuild.doIAT(0);
43 } else { 51 videoPlays++;
44 pause(); 52 playButton.setAttribute("class", "play");
53 });
54 video.addEventListener("pause", function(e) {
45 eyeBuild.doIAT(1); 55 eyeBuild.doIAT(1);
46 } 56 playButton.setAttribute("class", "pause");
47 }); 57 });
48 var play = function(){ 58 video.addEventListener("ended", function(e) {
49 video.play(); 59 video.currentTime = 0;
50 videoPlays++; 60 playButton.setAttribute("class", "pause");
51 playButton.setAttribute("class", "pause"); 61 v0 = false;
52 videoControls.setAttribute("class", "play"); 62 v25 = false;
53 } 63 v50 = false;
54 var pause = function(){ 64 v75 = false;
55 video.pause(); 65 eyeBuild.doIAT(9);
56 playButton.setAttribute("class", "play"); 66 });
57 } 67
58 video.addEventListener('ended', function(e){ 68 // track video plays
59 video.currentTime = 0; 69 video.addEventListener('timeupdate', function(e){
60 pause(); 70 var pct = video.currentTime / video.duration *100;
61 videoControls.setAttribute("class", "start"); 71 if (pct > 75 && !v75){
62 playButton.setAttribute("class", "play"); 72 v75 = true;
63 v0 = false; 73 eyeBuild.doIAT(8);
64 v25 = false; 74 }else if (pct > 50 && !v50){
65 v50 = false; 75 v50 = true;
66 v75 = false; 76 eyeBuild.doIAT(7);
67 eyeBuild.doIAT(9); 77 }else if (pct > 25 && !v25){
68 }, false); 78 v25 = true;
69 79 eyeBuild.doIAT(6);
70 // track video plays 80 }else if (pct > 0 && !v0){
71 video.addEventListener('timeupdate', function(e){ 81 v0 = true;
72 var pct = video.currentTime / video.duration *100; 82 eyeBuild.doIAT(5);
73 if (pct > 75 && !v75){ 83 if(videoPlays>1){
74 v75 = true; 84 eyeBuild.doIAT(10);
75 eyeBuild.doIAT(8); 85 }
76 }else if (pct > 50 && !v50){
77 v50 = true;
78 eyeBuild.doIAT(7);
79 }else if (pct > 25 && !v25){
80 v25 = true;
81 eyeBuild.doIAT(6);
82 }else if (pct > 0 && !v0){
83 v0 = true;
84 eyeBuild.doIAT(5);
85 if(videoPlays>1){
86 eyeBuild.doIAT(10);
87 } 86 }
88 } 87 }, false);
89 }, false); 88
89 playButton.addEventListener('click', function(e){
90 myVideoJsPlayer.play();
91 }, false);
92
93 });
90 94
95
91 /* 96 /*
92 var closeButton = document.getElementById("close"); 97 var closeButton = document.getElementById("close");
93 closeButton.addEventListener("click", function(e) { 98 closeButton.addEventListener("click", function(e) {
...@@ -99,7 +104,6 @@ ...@@ -99,7 +104,6 @@
99 } 104 }
100 </script> 105 </script>
101 106
102
103 <style> 107 <style>
104 108
105 body{ 109 body{
...@@ -140,36 +144,35 @@ ...@@ -140,36 +144,35 @@
140 background-size: 300px 450px; 144 background-size: 300px 450px;
141 } 145 }
142 146
143 #video, #video-controls{ 147 #video, #play-pause{
144 position: absolute; 148 position: absolute;
145 width: 271px; 149 width: 271px;
146 height: 153px; 150 height: 153px;
147 left:14px; 151 left:14px;
148 top:178px; 152 top:178px;
153 border:none;
149 } 154 }
150 #video-controls.start{ 155 #play-pause{
151 background: url(assets/img/poster1.jpg) no-repeat center center;
152 }
153 #video-controls.play {
154 background: none;
155 }
156 #video-controls button{
157 width: 100%;
158 height: 100%;
159 background: url(assets/img/play.svg) no-repeat center center;
160 border: none;
161 cursor: pointer; 156 cursor: pointer;
157 background: url(assets/img/play.svg) no-repeat center center;
162 } 158 }
163 #video-controls button.play:hover{ 159 #play-pause.pause:hover{
164 background-size: 60px 60px; 160 background-size: 60px 60px;
165 } 161 }
166 #video-controls button.play{ 162 #play-pause.pause:active{
167 background: url(assets/img/play.svg) no-repeat center center; 163 background-size: 50px 50px;
164 }
165 #play-pause.pause{
168 background-size: 55px 55px; 166 background-size: 55px 55px;
167 display: block;
169 } 168 }
170 #video-controls button.pause{ 169 #play-pause.play{
171 background: none; 170 display: none;
172 } 171 }
172 .vjs-big-play-button{
173 display: none !important;
174 }
175
173 176
174 #txt { 177 #txt {
175 position: absolute; 178 position: absolute;
...@@ -181,23 +184,24 @@ ...@@ -181,23 +184,24 @@
181 opacity: 0; 184 opacity: 0;
182 transform-origin: bottom; 185 transform-origin: bottom;
183 } 186 }
187
188
189
184 </style> 190 </style>
191
185 </head> 192 </head>
186 193
187 <body> 194 <body>
188 <div id="border"> 195 <div id="border">
189 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"> 196 <a id="click-tag" href="javascript:eyeBuild.doClick(0);">
190 <img id="txt" src="assets/img/slice.svg" alt="txt"> 197 <img id="txt" src="assets/img/slice.svg" alt="txt">
191 <video id="video" width="" height="">
192 <source src="assets/vid.mp4" type="video/mp4">
193 Your browser doesn't support HTML5 video.
194 </video>
195 <img id="txt" src="assets/img/overlay.png" style="border-style:none">
196 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
197 </a> 198 </a>
198 <div id="video-controls" class="start"> 199 <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="assets/img/poster1.jpg" data-setup='{"example_option":true}'>
199 <button type="button" id="play-pause" class="play"></button> 200 <source src="../vidA.mp4" type="video/mp4" />
200 </div> 201 <!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
202 <!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
203 </video>
204 <button id="play-pause" class="pause"></button>
201 </div> 205 </div>
202 206
203 <!-- jQuery--> 207 <!-- jQuery-->
......
...@@ -22,72 +22,77 @@ ...@@ -22,72 +22,77 @@
22 </script> 22 </script>
23 --> 23 -->
24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script> 24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
25 <link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
26 <script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
25 <script type="text/javascript"> 27 <script type="text/javascript">
28
29 /**
30 * This section uses videojs with eyeBuild, tracking plays, clicks, etc.
31 **/
26 window.onload = function() { 32 window.onload = function() {
27 eyeBuild.initialize(); 33 eyeBuild.initialize();
28 window.isVideoClick = false; 34 window.isVideoClick = false;
29 35
30 var videoPlays = 0; 36 //var video = document.getElementsByTagName("video")[0];
31 var v0 = false; 37 var myVideoJsPlayer = videojs('video');
32 var v25 = false; 38 var video = document.querySelector("#video video");
33 var v50 = false;
34 var v75 = false;
35
36 var video = document.getElementById("video");
37 var videoControls = document.getElementById("video-controls");
38 var playButton = document.getElementById("play-pause"); 39 var playButton = document.getElementById("play-pause");
39 playButton.addEventListener("click", function(e) { 40
40 if (video.paused == true) { 41 videojs(video, {}, function(){
41 play(); 42
43 var videoPlays = 0;
44 var v0 = false;
45 var v25 = false;
46 var v50 = false;
47 var v75 = false;
48
49 video.addEventListener("play", function(e) {
42 eyeBuild.doIAT(0); 50 eyeBuild.doIAT(0);
43 } else { 51 videoPlays++;
44 pause(); 52 playButton.setAttribute("class", "play");
53 });
54 video.addEventListener("pause", function(e) {
45 eyeBuild.doIAT(1); 55 eyeBuild.doIAT(1);
46 } 56 playButton.setAttribute("class", "pause");
47 }); 57 });
48 var play = function(){ 58 video.addEventListener("ended", function(e) {
49 video.play(); 59 video.currentTime = 0;
50 videoPlays++; 60 playButton.setAttribute("class", "pause");
51 playButton.setAttribute("class", "pause"); 61 v0 = false;
52 videoControls.setAttribute("class", "play"); 62 v25 = false;
53 } 63 v50 = false;
54 var pause = function(){ 64 v75 = false;
55 video.pause(); 65 eyeBuild.doIAT(9);
56 playButton.setAttribute("class", "play"); 66 });
57 } 67
58 video.addEventListener('ended', function(e){ 68 // track video plays
59 video.currentTime = 0; 69 video.addEventListener('timeupdate', function(e){
60 pause(); 70 var pct = video.currentTime / video.duration *100;
61 videoControls.setAttribute("class", "start"); 71 if (pct > 75 && !v75){
62 playButton.setAttribute("class", "play"); 72 v75 = true;
63 v0 = false; 73 eyeBuild.doIAT(8);
64 v25 = false; 74 }else if (pct > 50 && !v50){
65 v50 = false; 75 v50 = true;
66 v75 = false; 76 eyeBuild.doIAT(7);
67 eyeBuild.doIAT(9); 77 }else if (pct > 25 && !v25){
68 }, false); 78 v25 = true;
69 79 eyeBuild.doIAT(6);
70 // track video plays 80 }else if (pct > 0 && !v0){
71 video.addEventListener('timeupdate', function(e){ 81 v0 = true;
72 var pct = video.currentTime / video.duration *100; 82 eyeBuild.doIAT(5);
73 if (pct > 75 && !v75){ 83 if(videoPlays>1){
74 v75 = true; 84 eyeBuild.doIAT(10);
75 eyeBuild.doIAT(8); 85 }
76 }else if (pct > 50 && !v50){
77 v50 = true;
78 eyeBuild.doIAT(7);
79 }else if (pct > 25 && !v25){
80 v25 = true;
81 eyeBuild.doIAT(6);
82 }else if (pct > 0 && !v0){
83 v0 = true;
84 eyeBuild.doIAT(5);
85 if(videoPlays>1){
86 eyeBuild.doIAT(10);
87 } 86 }
88 } 87 }, false);
89 }, false); 88
89 playButton.addEventListener('click', function(e){
90 myVideoJsPlayer.play();
91 }, false);
92
93 });
90 94
95
91 /* 96 /*
92 var closeButton = document.getElementById("close"); 97 var closeButton = document.getElementById("close");
93 closeButton.addEventListener("click", function(e) { 98 closeButton.addEventListener("click", function(e) {
...@@ -99,7 +104,6 @@ ...@@ -99,7 +104,6 @@
99 } 104 }
100 </script> 105 </script>
101 106
102
103 <style> 107 <style>
104 108
105 body{ 109 body{
...@@ -140,36 +144,35 @@ ...@@ -140,36 +144,35 @@
140 background-size: 300px 450px; 144 background-size: 300px 450px;
141 } 145 }
142 146
143 #video, #video-controls{ 147 #video, #play-pause{
144 position: absolute; 148 position: absolute;
145 width: 271px; 149 width: 271px;
146 height: 153px; 150 height: 153px;
147 left:14px; 151 left:14px;
148 top:178px; 152 top:178px;
153 border:none;
149 } 154 }
150 #video-controls.start{ 155 #play-pause{
151 background: url(assets/img/poster2.jpg) no-repeat center center;
152 }
153 #video-controls.play {
154 background: none;
155 }
156 #video-controls button{
157 width: 100%;
158 height: 100%;
159 background: url(assets/img/play.svg) no-repeat center center;
160 border: none;
161 cursor: pointer; 156 cursor: pointer;
157 background: url(assets/img/play.svg) no-repeat center center;
162 } 158 }
163 #video-controls button.play:hover{ 159 #play-pause.pause:hover{
164 background-size: 60px 60px; 160 background-size: 60px 60px;
165 } 161 }
166 #video-controls button.play{ 162 #play-pause.pause:active{
167 background: url(assets/img/play.svg) no-repeat center center; 163 background-size: 50px 50px;
164 }
165 #play-pause.pause{
168 background-size: 55px 55px; 166 background-size: 55px 55px;
167 display: block;
169 } 168 }
170 #video-controls button.pause{ 169 #play-pause.play{
171 background: none; 170 display: none;
172 } 171 }
172 .vjs-big-play-button{
173 display: none !important;
174 }
175
173 176
174 #txt { 177 #txt {
175 position: absolute; 178 position: absolute;
...@@ -181,23 +184,24 @@ ...@@ -181,23 +184,24 @@
181 opacity: 0; 184 opacity: 0;
182 transform-origin: bottom; 185 transform-origin: bottom;
183 } 186 }
187
188
189
184 </style> 190 </style>
191
185 </head> 192 </head>
186 193
187 <body> 194 <body>
188 <div id="border"> 195 <div id="border">
189 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"> 196 <a id="click-tag" href="javascript:eyeBuild.doClick(0);">
190 <img id="txt" src="assets/img/slice.svg" alt="txt"> 197 <img id="txt" src="assets/img/slice.svg" alt="txt">
191 <video id="video" width="" height="">
192 <source src="assets/vid.mp4" type="video/mp4">
193 Your browser doesn't support HTML5 video.
194 </video>
195 <img id="txt" src="assets/img/overlay.png" style="border-style:none">
196 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
197 </a> 198 </a>
198 <div id="video-controls" class="start"> 199 <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="assets/img/poster2.jpg" data-setup='{"example_option":true}'>
199 <button type="button" id="play-pause" class="play"></button> 200 <source src="../vidA.mp4" type="video/mp4" />
200 </div> 201 <!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
202 <!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
203 </video>
204 <button id="play-pause" class="pause"></button>
201 </div> 205 </div>
202 206
203 <!-- jQuery--> 207 <!-- jQuery-->
......
...@@ -22,72 +22,77 @@ ...@@ -22,72 +22,77 @@
22 </script> 22 </script>
23 --> 23 -->
24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script> 24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
25 <link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
26 <script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
25 <script type="text/javascript"> 27 <script type="text/javascript">
28
29 /**
30 * This section uses videojs with eyeBuild, tracking plays, clicks, etc.
31 **/
26 window.onload = function() { 32 window.onload = function() {
27 eyeBuild.initialize(); 33 eyeBuild.initialize();
28 window.isVideoClick = false; 34 window.isVideoClick = false;
29 35
30 var videoPlays = 0; 36 //var video = document.getElementsByTagName("video")[0];
31 var v0 = false; 37 var myVideoJsPlayer = videojs('video');
32 var v25 = false; 38 var video = document.querySelector("#video video");
33 var v50 = false;
34 var v75 = false;
35
36 var video = document.getElementById("video");
37 var videoControls = document.getElementById("video-controls");
38 var playButton = document.getElementById("play-pause"); 39 var playButton = document.getElementById("play-pause");
39 playButton.addEventListener("click", function(e) { 40
40 if (video.paused == true) { 41 videojs(video, {}, function(){
41 play(); 42
43 var videoPlays = 0;
44 var v0 = false;
45 var v25 = false;
46 var v50 = false;
47 var v75 = false;
48
49 video.addEventListener("play", function(e) {
42 eyeBuild.doIAT(0); 50 eyeBuild.doIAT(0);
43 } else { 51 videoPlays++;
44 pause(); 52 playButton.setAttribute("class", "play");
53 });
54 video.addEventListener("pause", function(e) {
45 eyeBuild.doIAT(1); 55 eyeBuild.doIAT(1);
46 } 56 playButton.setAttribute("class", "pause");
47 }); 57 });
48 var play = function(){ 58 video.addEventListener("ended", function(e) {
49 video.play(); 59 video.currentTime = 0;
50 videoPlays++; 60 playButton.setAttribute("class", "pause");
51 playButton.setAttribute("class", "pause"); 61 v0 = false;
52 videoControls.setAttribute("class", "play"); 62 v25 = false;
53 } 63 v50 = false;
54 var pause = function(){ 64 v75 = false;
55 video.pause(); 65 eyeBuild.doIAT(9);
56 playButton.setAttribute("class", "play"); 66 });
57 } 67
58 video.addEventListener('ended', function(e){ 68 // track video plays
59 video.currentTime = 0; 69 video.addEventListener('timeupdate', function(e){
60 pause(); 70 var pct = video.currentTime / video.duration *100;
61 videoControls.setAttribute("class", "start"); 71 if (pct > 75 && !v75){
62 playButton.setAttribute("class", "play"); 72 v75 = true;
63 v0 = false; 73 eyeBuild.doIAT(8);
64 v25 = false; 74 }else if (pct > 50 && !v50){
65 v50 = false; 75 v50 = true;
66 v75 = false; 76 eyeBuild.doIAT(7);
67 eyeBuild.doIAT(9); 77 }else if (pct > 25 && !v25){
68 }, false); 78 v25 = true;
69 79 eyeBuild.doIAT(6);
70 // track video plays 80 }else if (pct > 0 && !v0){
71 video.addEventListener('timeupdate', function(e){ 81 v0 = true;
72 var pct = video.currentTime / video.duration *100; 82 eyeBuild.doIAT(5);
73 if (pct > 75 && !v75){ 83 if(videoPlays>1){
74 v75 = true; 84 eyeBuild.doIAT(10);
75 eyeBuild.doIAT(8); 85 }
76 }else if (pct > 50 && !v50){
77 v50 = true;
78 eyeBuild.doIAT(7);
79 }else if (pct > 25 && !v25){
80 v25 = true;
81 eyeBuild.doIAT(6);
82 }else if (pct > 0 && !v0){
83 v0 = true;
84 eyeBuild.doIAT(5);
85 if(videoPlays>1){
86 eyeBuild.doIAT(10);
87 } 86 }
88 } 87 }, false);
89 }, false); 88
89 playButton.addEventListener('click', function(e){
90 myVideoJsPlayer.play();
91 }, false);
92
93 });
90 94
95
91 /* 96 /*
92 var closeButton = document.getElementById("close"); 97 var closeButton = document.getElementById("close");
93 closeButton.addEventListener("click", function(e) { 98 closeButton.addEventListener("click", function(e) {
...@@ -99,7 +104,6 @@ ...@@ -99,7 +104,6 @@
99 } 104 }
100 </script> 105 </script>
101 106
102
103 <style> 107 <style>
104 108
105 body{ 109 body{
...@@ -140,36 +144,35 @@ ...@@ -140,36 +144,35 @@
140 background-size: 300px 450px; 144 background-size: 300px 450px;
141 } 145 }
142 146
143 #video, #video-controls{ 147 #video, #play-pause{
144 position: absolute; 148 position: absolute;
145 width: 271px; 149 width: 271px;
146 height: 153px; 150 height: 153px;
147 left:14px; 151 left:14px;
148 top:178px; 152 top:178px;
153 border:none;
149 } 154 }
150 #video-controls.start{ 155 #play-pause{
151 background: url(assets/img/poster3.jpg) no-repeat center center;
152 }
153 #video-controls.play {
154 background: none;
155 }
156 #video-controls button{
157 width: 100%;
158 height: 100%;
159 background: url(assets/img/play.svg) no-repeat center center;
160 border: none;
161 cursor: pointer; 156 cursor: pointer;
157 background: url(assets/img/play.svg) no-repeat center center;
162 } 158 }
163 #video-controls button.play:hover{ 159 #play-pause.pause:hover{
164 background-size: 60px 60px; 160 background-size: 60px 60px;
165 } 161 }
166 #video-controls button.play{ 162 #play-pause.pause:active{
167 background: url(assets/img/play.svg) no-repeat center center; 163 background-size: 50px 50px;
164 }
165 #play-pause.pause{
168 background-size: 55px 55px; 166 background-size: 55px 55px;
167 display: block;
169 } 168 }
170 #video-controls button.pause{ 169 #play-pause.play{
171 background: none; 170 display: none;
172 } 171 }
172 .vjs-big-play-button{
173 display: none !important;
174 }
175
173 176
174 #txt { 177 #txt {
175 position: absolute; 178 position: absolute;
...@@ -181,23 +184,24 @@ ...@@ -181,23 +184,24 @@
181 opacity: 0; 184 opacity: 0;
182 transform-origin: bottom; 185 transform-origin: bottom;
183 } 186 }
187
188
189
184 </style> 190 </style>
191
185 </head> 192 </head>
186 193
187 <body> 194 <body>
188 <div id="border"> 195 <div id="border">
189 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"> 196 <a id="click-tag" href="javascript:eyeBuild.doClick(0);">
190 <img id="txt" src="assets/img/slice.svg" alt="txt"> 197 <img id="txt" src="assets/img/slice.svg" alt="txt">
191 <video id="video" width="" height="">
192 <source src="assets/vid.mp4" type="video/mp4">
193 Your browser doesn't support HTML5 video.
194 </video>
195 <img id="txt" src="assets/img/overlay.png" style="border-style:none">
196 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
197 </a> 198 </a>
198 <div id="video-controls" class="start"> 199 <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="assets/img/poster3.jpg" data-setup='{"example_option":true}'>
199 <button type="button" id="play-pause" class="play"></button> 200 <source src="../vidC.mp4" type="video/mp4" />
200 </div> 201 <!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
202 <!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
203 </video>
204 <button id="play-pause" class="pause"></button>
201 </div> 205 </div>
202 206
203 <!-- jQuery--> 207 <!-- jQuery-->
......
1 /*!
2 * VERSION: 1.0.1
3 * DATE: 2016-04-28
4 *
5 * Requires:
6 * GSAP TweenMax
7 * GASP drawSVG Plugin ()
8 * This work is subject to the terms at http://greensock.com/standard-license or for
9 * Club GreenSock members, the software agreement that was issued with your membership.
10 *
11 * @license Copyright (c) 2016, Tenzing Communications Inc. All rights reserved.
12 *
13 * @author: Dan Rempel, dan@gotenzing.com
14
15 * Usage Example:
16 * var myEySvg = initEySvgFrame(10, 196, 193); // frame line weight, width, height
17 * document.getElementById("body").appendChild(myEySvg);
18 * animateEyFrame(2); // delay in seconds
19 * animateGradient(2); // delay in seconds
20 * animateFill(2); // delay in seconds
21 *
22 **/
23
24 var eySvg;var eyStroke;var eyDot1;var eyDot2;var eyDot3;var eyGradient;var eyFill;var tl;var eyStrokeWeight;var eySvgHeight;var eySvgWidth;var eyAngleHeight;var eyDotSpacing;var eyDotDuration=.2;var eyFrameDuration=1;var eyGradientDuration=1;var eyFillDuration=1;var eyColor="#FFD400";var svgNS="http://www.w3.org/2000/svg";var initEySvgFrame=function(a,b,c){tl=new TimelineMax();eyDotSpacing=Math.floor(a*8.5/10);eyStrokeWeight=a;eySvgWidth=b;eySvgHeight=c;var d=10*Math.PI/180;eyAngleHeight=Math.tan(d)*(b-a);var e=document.createElementNS(svgNS,"svg");e.setAttribute("id","ey-frame");e.setAttribute("width",b+"px");e.setAttribute("height",c+"px");e.setAttribute("viewBox","0 0 "+eySvgWidth+" "+eySvgHeight);var f=document.createElementNS(svgNS,"defs");e.appendChild(f);var g=document.createElementNS(svgNS,"linearGradient");g.setAttribute("id","linear-gradient");g.setAttribute("x1","0%");g.setAttribute("x2","0%");g.setAttribute("y1","0%");g.setAttribute("y2","100%");f.appendChild(g);var h;h=createStop({id:"stop-1",offset:"0%",color:"Black",opacity:".7"});g.appendChild(h);h=createStop({id:"stop-2",offset:"100%",color:"Black",opacity:"0"});g.appendChild(h);eyGradient=createShape("ey-gradient","url(#linear-gradient)");e.appendChild(eyGradient);eyDot1=createDot(1);e.appendChild(eyDot1);eyDot2=createDot(2);e.appendChild(eyDot2);eyDot3=createDot(3);e.appendChild(eyDot3);eyStroke=createPath("ey-stroke");eyStroke.setAttribute("d"," M "+((eyStrokeWeight+eyDotSpacing)*3)+" "+(eySvgHeight-a/2)+" H "+(b-a/2)+" V "+a/1.5+" L "+a/2+" "+(eyAngleHeight+a/2)+" V "+(c-a-eyDotSpacing));e.appendChild(eyStroke);eyFill=createShape("ey-gradient",eyColor);e.appendChild(eyFill);return e};var animateEyFrame=function(a){var b=0;tl.fromTo(eyDot1,eyDotDuration,{drawSVG:"0"},{drawSVG:"0 "+(b+=(eyStrokeWeight+eyDotSpacing)),ease:Power1.easeInOut,delay:a});tl.fromTo(eyDot2,eyDotDuration,{drawSVG:"0"},{drawSVG:"0 "+(b+=(eyStrokeWeight+eyDotSpacing)),ease:Power1.easeInOut});tl.fromTo(eyDot3,eyDotDuration,{drawSVG:"0"},{drawSVG:"0 "+(b+=(eyStrokeWeight+eyDotSpacing)),ease:Power1.easeInOut});tl.fromTo(eyStroke,eyFrameDuration,{drawSVG:"0"},{drawSVG:"0 100%",ease:Power1.easeIn})};var animateGradient=function(a){tl.fromTo(eyGradient,.5,{opacity:0},{opacity:1,delay:a})};var animateFill=function(a){tl.fromTo(eyFill,.5,{y:eySvgHeight},{y:0,ease:Power2.easeIn,delay:a})};var createPath=function(a){var b=document.createElementNS(svgNS,"path");b.setAttribute("id",a);b.setAttribute("fill","none");b.setAttribute("stroke",eyColor);b.setAttribute("stroke-width",eyStrokeWeight);b.setAttribute("stroke-miterlimit","10");return b};var createDot=function(a){var b=createPath("ey-dot"+a);b.setAttribute("d"," M "+((eyStrokeWeight+eyDotSpacing)*(a-1))+" "+(eySvgHeight-eyStrokeWeight/2)+" h "+eyStrokeWeight);return b};var createShape=function(a,b){var c=document.createElementNS(svgNS,"path");c.setAttribute("id",a);c.setAttribute("fill",b);c.setAttribute("d"," M 0 "+(eySvgHeight)+" H "+(eySvgWidth)+" V 2 "+" L 0 "+(eyAngleHeight+2)+" Z ");return c};var createStop=function(a){var b=document.createElementNS(svgNS,"stop");b.setAttribute("id",a.id);b.setAttribute("offset",a.offset);b.setAttribute("stop-color",a.color);b.setAttribute("stop-opacity",a.opacity);return b};
...\ No newline at end of file ...\ No newline at end of file
1 /*!
2 * VERSION: 1.0.2
3 * DATE: 2016-05-03
4 *
5 * Requires:
6 * GSAP TweenMax
7 * GASP drawSVG Plugin ()
8 * This work is subject to the terms at http://greensock.com/standard-license or for
9 * Club GreenSock members, the software agreement that was issued with your membership.
10 *
11 * @license Copyright (c) 2016, Tenzing Communications Inc. All rights reserved.
12 *
13 * @author: Dan Rempel, dan@gotenzing.com
14
15 * Usage Example:
16 * var myEySvg = initEySvgFrame(10, 196, 193); // frame line weight, width, height
17 * document.getElementById("body").appendChild(myEySvg);
18 * animateEyFrame(2); // delay in seconds
19 * animateGradient(2); // delay in seconds
20 * animateFill(2); // delay in seconds
21 *
22 **/
23
24 var eySvg;var eyStroke;var eyDot1;var eyDot2;var eyDot3;var eyGradient;var eyFill;var tl;var eyStrokeWeight;var eySvgHeight;var eySvgWidth;var eyAngleHeight;var eyDotSpacing;var eyDotDuration=0.2;var eyFrameDuration=1;var eyGradientDuration=1;var eyFillDuration=1;var eyColor='#FFD400';var svgNS='http://www.w3.org/2000/svg';var initEySvgFrame=function(b,d,f){tl=new TimelineMax(),eyDotSpacing=Math.floor(b*8.5/10),eyStrokeWeight=b,eySvgWidth=d,eySvgHeight=f;var h=10*Math.PI/180;eyAngleHeight=Math.tan(h)*(d-b);var a=document.createElementNS(svgNS,'svg');a.setAttribute('id','ey-frame'),a.setAttribute('width',d+'px'),a.setAttribute('height',f+'px'),a.setAttribute('viewBox','0 0 '+eySvgWidth+' '+eySvgHeight);var g=document.createElementNS(svgNS,'defs');a.appendChild(g);var c=document.createElementNS(svgNS,'linearGradient');c.setAttribute('id','linear-gradient'),c.setAttribute('x1','0%'),c.setAttribute('x2','0%'),c.setAttribute('y1','0%'),c.setAttribute('y2','100%'),g.appendChild(c);var e;return e=createStop({id:'stop-1',offset:'0%',color:'Black',opacity:'.7'}),c.appendChild(e),e=createStop({id:'stop-2',offset:'100%',color:'Black',opacity:'0'}),c.appendChild(e),eyGradient=createShape('ey-gradient','url(#linear-gradient)'),a.appendChild(eyGradient),eyDot1=createDot(1),a.appendChild(eyDot1),eyDot2=createDot(2),a.appendChild(eyDot2),eyDot3=createDot(3),a.appendChild(eyDot3),eyStroke=createPath('ey-stroke'),eyStroke.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*3+' '+(eySvgHeight-b/2)+' H '+(d-b/2)+' V '+b/1.5+' L '+b/2+' '+(eyAngleHeight+b/2)+' V '+(f-b-eyDotSpacing)),a.appendChild(eyStroke),a;};var animateEyFrame=function(b){var a=0;tl.fromTo(eyDot1,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut,delay:b}),tl.fromTo(eyDot2,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.fromTo(eyDot3,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.fromTo(eyStroke,eyFrameDuration,{drawSVG:'0'},{drawSVG:'0 100%',ease:Power1.easeIn});};var animateGradient=function(a){tl.fromTo(eyGradient,0.5,{opacity:0},{opacity:1,delay:a});};var animateFill=function(a){(typeof eyFill==='undefined'||variable===null)&&(eyFill=createShape('ey-gradient',eyColor),eySvg.appendChild(eyFill)),tl.fromTo(eyFill,0.5,{y:eySvgHeight},{y:0,ease:Power2.easeIn,delay:a});};var createPath=function(b){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill','none'),a.setAttribute('stroke',eyColor),a.setAttribute('stroke-width',eyStrokeWeight),a.setAttribute('stroke-miterlimit','10'),a;};var createDot=function(b){var a=createPath('ey-dot'+b);return a.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*(b-1)+' '+(eySvgHeight-eyStrokeWeight/2)+' h '+eyStrokeWeight),a;};var createShape=function(b,c){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill',c),a.setAttribute('d',' M 0 '+eySvgHeight+' H '+eySvgWidth+' V 2 '+' L 0 '+(eyAngleHeight+2)+' Z '),a;};var createStop=function(b){var a=document.createElementNS(svgNS,'stop');return a.setAttribute('id',b.id),a.setAttribute('offset',b.offset),a.setAttribute('stop-color',b.color),a.setAttribute('stop-opacity',b.opacity),a;};
...\ No newline at end of file ...\ No newline at end of file
...@@ -98,7 +98,7 @@ ...@@ -98,7 +98,7 @@
98 width: 112px; 98 width: 112px;
99 } 99 }
100 #txt2{ 100 #txt2{
101 left: 42px; 101 left: 45px;
102 width: 216px; 102 width: 216px;
103 } 103 }
104 #cannon{ 104 #cannon{
...@@ -185,10 +185,10 @@ ...@@ -185,10 +185,10 @@
185 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> --> 185 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
186 <a href="javascript:eyeBuild.doClick(0)" class="cta"> 186 <a href="javascript:eyeBuild.doClick(0)" class="cta">
187 <div id="border"> 187 <div id="border">
188 <img id="logo" src="assets/img/logo.png" alt="logo">
189 <img id="legal" src="assets/img/legal.png" alt="legal">
190 <img id="boy" src="assets/img/boy.png" alt="boy"> 188 <img id="boy" src="assets/img/boy.png" alt="boy">
191 <img id="cannon" src="assets/img/cannon.png" alt="cannon"> 189 <img id="cannon" src="assets/img/cannon.png" alt="cannon">
190 <img id="logo" src="assets/img/logo.png" alt="logo">
191 <img id="legal" src="assets/img/legal.png" alt="legal">
192 <img id="txt1a" src="assets/img/txt1a.png" alt="txt1"> 192 <img id="txt1a" src="assets/img/txt1a.png" alt="txt1">
193 <img id="txt1b" src="assets/img/txt1b.png" alt="txt1"> 193 <img id="txt1b" src="assets/img/txt1b.png" alt="txt1">
194 <div id="box-1"></div> 194 <div id="box-1"></div>
...@@ -224,22 +224,13 @@ ...@@ -224,22 +224,13 @@
224 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation --> 224 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation -->
225 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 225 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
226 <script src="assets/js/DrawSVGPlugin.min.js"></script> 226 <script src="assets/js/DrawSVGPlugin.min.js"></script>
227 <script src="assets/js/ey-frame-svg-1.0.1.min.js"></script> 227 <script src="assets/js/ey-frame-svg-1.0.2.min.js"></script>
228 228
229 <script> 229 <script>
230 230
231 function stage1(){ 231 function stage1(){
232 var tl = new TimelineMax(); /* {repeat:2, repeatDelay:2} */ 232 var tl = new TimelineMax(); /* {repeat:2, repeatDelay:2} */
233 233
234 /*
235 animate boy
236 logo
237 frame w txt
238 dot
239 tags w dots
240 cta
241 hash
242 */
243 var d=.4; 234 var d=.4;
244 235
245 236
...@@ -261,7 +252,7 @@ ...@@ -261,7 +252,7 @@
261 tl.to("#txt1b", d, {opacity:0, ease:Power1.easeInOut, delay:-d }); 252 tl.to("#txt1b", d, {opacity:0, ease:Power1.easeInOut, delay:-d });
262 tl.to("#box-2", d, {opacity:0, ease:Power1.easeInOut, delay:-d }); 253 tl.to("#box-2", d, {opacity:0, ease:Power1.easeInOut, delay:-d });
263 254
264 animateFill(3.3); 255 //animateFill(3.3);
265 tl.to("#txt2", d, {opacity:1, ease:Power1.easeInOut, delay:.5 }); 256 tl.to("#txt2", d, {opacity:1, ease:Power1.easeInOut, delay:.5 });
266 tl.to("#txt2", d, {opacity:0, ease:Power1.easeInOut, delay:4 }); 257 tl.to("#txt2", d, {opacity:0, ease:Power1.easeInOut, delay:4 });
267 258
......
1 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="52" height="52" viewBox="0 0 52 52"><defs><style>.cls-1{isolation:isolate;}.cls-2{opacity:0.5;mix-blend-mode:multiply;}.cls-3{fill:#ffd400;}.cls-4{fill:#231f20;}</style></defs><title>play</title><g class="cls-1"><g id="Layer_2" data-name="Layer 2"><image class="cls-2" width="52" height="52" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAA1CAYAAADh5qNwAAAACXBIWXMAAAsSAAALEgHS3X78AAAEdUlEQVRoQ+2aPWgVWRiGjz9rNBpRN7oQRAiLa7WIFpJVkHQWWVBUbO22keCms42NEExIs82WgYholUpshGDaNAFR2CpFYooFMYVR/Mm+j3kPdzLee8/9SWRnuMLTzXzv+875zncmcw3r6+uhbCQvKCLJC1Lo346tJqWZInlBHfM7c+zaAvI1WwrbaJCs8d3mB7NnG4i1o1Y2cDJgKlA2CCJdYq/oFvvNgRw9LZCvEWt3W68rVELGgDWDNRIohum2gUPiiOgVR8Ux8dMWcsx1e61zyLrox3B1g6UC0Qr7XPSwxfrECdEvfhYnxS/mVBvEGiddt986fdZFHx/4wVfNYLVCxRWiwEHxo4v328Cv4qw4JwbEb+K8uNAG511nwHXPWueUddHHB37wFVesoVCkp3dZ6h4XOh42nuBpiw6KS+J3cUVcFdfE9Ta45jpXXPeSdQasiz4+8IMv/OFzZ91QodJ6PAV6mCXvc8Ez4qIYEjfETfGHuCWGxW3xpxlpgnjPbde55bo3rTNkXfTxgR984Q+f37RgrdaLq0Qvs/SnXfiyxRC/I0bFPTEm7otxMdEC475/zPVGXX/Yepetjw/84Cuu1jctWC0US8oYZerwVOhpWmDIAjzdu2JS/C2mxAPxUDwyj5sg3vPQdaZcd9I6I9ZFHx/4wRf+8InfhkKxtIxTpg+bdTBstMKwhf4S02JGPBXPxKx4buaaIN4z6zpPXXfaOneti/5g2PCDL/zhMxkq7icOPs4JlpopxKbladESkxZ8EjZMzYsF8UK8FK9a4KXvX3C9Odeftt4d6+MDP/jCHz6/7qtGQ9G3nBeMV6YRm5depzVmLIyJf8SiWBLL4nWGlTpkr1v2/Yuut+D6M9YbtT4+8IMv/NUPFSqTj4ONVxVOdqYNfcyYZSqxiel5WmTeBjDzr3gj3prVJoj3vHGdJdedt86UddHHB37whT984nfTBKwXilcWTngORM4P+prpxGam93maizaCuXdiTbw3HxogXrvm+1ddb9H1n1lvzPr4wA++8NdQqPhqlA3FSc/ByDnC2GVKsanZAzxVnjCGMPlRfGqBj77/nestuf6s9e5bHx/4yYfaNNZToRifvMJw4nNAcp4wfplWbG72Aq3Dk8bYZ/GlBT77/jXXW3b959Ybtz4+8IOvpkP1hOqhJkIlFFPrtU3QQjzxaHK9CeI9n1znreu+CpVQE6F6KHy2FWrExTkw50Il1GrYHCoVolawGGo1VELNWW/C+t81FPthK0J9CP+DUCthe0KthE6oTqhOqE6oHJ1QYZtDlfKcKvwbReHf/Ur5ll6qv6dK+Zdvub5ROFi5viZVCVWa7360IF88S/WFNobaG0r2LZ3x2BVK9qtH3Ffl+H0qMyxY0rhaxf4lMdeCPIXS/OYbWzC+MhX/1/kqwXgiLHW3izJ1GKe9oSj/j6JGsN2h6P/jJRcshssGjCFhzzYQa0etGORrmFAnUDJUjYD5oNnA7ZKvuUkz5bHpUE2EbZuUZorkBUUkeUER+Q/WUqTGGZMG2QAAAABJRU5ErkJggg=="/><rect class="cls-3" x="10.6" y="10.3" width="30.27" height="30.27"/><polygon class="cls-4" points="22.85 33.56 22.85 17.31 30.97 25.44 22.85 33.56"/></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file
...@@ -22,72 +22,77 @@ ...@@ -22,72 +22,77 @@
22 </script> 22 </script>
23 --> 23 -->
24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script> 24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
25 <link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
26 <script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
25 <script type="text/javascript"> 27 <script type="text/javascript">
28
29 /**
30 * This section uses videojs with eyeBuild, tracking plays, clicks, etc.
31 **/
26 window.onload = function() { 32 window.onload = function() {
27 eyeBuild.initialize(); 33 eyeBuild.initialize();
28 window.isVideoClick = false; 34 window.isVideoClick = false;
29 35
30 var videoPlays = 0; 36 //var video = document.getElementsByTagName("video")[0];
31 var v0 = false; 37 var myVideoJsPlayer = videojs('video');
32 var v25 = false; 38 var video = document.querySelector("#video video");
33 var v50 = false;
34 var v75 = false;
35
36 var video = document.getElementById("video");
37 var videoControls = document.getElementById("video-controls");
38 var playButton = document.getElementById("play-pause"); 39 var playButton = document.getElementById("play-pause");
39 playButton.addEventListener("click", function(e) { 40
40 if (video.paused == true) { 41 videojs(video, {}, function(){
41 play(); 42
43 var videoPlays = 0;
44 var v0 = false;
45 var v25 = false;
46 var v50 = false;
47 var v75 = false;
48
49 video.addEventListener("play", function(e) {
42 eyeBuild.doIAT(0); 50 eyeBuild.doIAT(0);
43 } else { 51 videoPlays++;
44 pause(); 52 playButton.setAttribute("class", "play");
53 });
54 video.addEventListener("pause", function(e) {
45 eyeBuild.doIAT(1); 55 eyeBuild.doIAT(1);
46 } 56 playButton.setAttribute("class", "pause");
47 }); 57 });
48 var play = function(){ 58 video.addEventListener("ended", function(e) {
49 video.play(); 59 video.currentTime = 0;
50 videoPlays++; 60 playButton.setAttribute("class", "pause");
51 playButton.setAttribute("class", "pause"); 61 v0 = false;
52 videoControls.setAttribute("class", "play"); 62 v25 = false;
53 } 63 v50 = false;
54 var pause = function(){ 64 v75 = false;
55 video.pause(); 65 eyeBuild.doIAT(9);
56 playButton.setAttribute("class", "play"); 66 });
57 } 67
58 video.addEventListener('ended', function(e){ 68 // track video plays
59 video.currentTime = 0; 69 video.addEventListener('timeupdate', function(e){
60 pause(); 70 var pct = video.currentTime / video.duration *100;
61 videoControls.setAttribute("class", "start"); 71 if (pct > 75 && !v75){
62 playButton.setAttribute("class", "play"); 72 v75 = true;
63 v0 = false; 73 eyeBuild.doIAT(8);
64 v25 = false; 74 }else if (pct > 50 && !v50){
65 v50 = false; 75 v50 = true;
66 v75 = false; 76 eyeBuild.doIAT(7);
67 eyeBuild.doIAT(9); 77 }else if (pct > 25 && !v25){
68 }, false); 78 v25 = true;
69 79 eyeBuild.doIAT(6);
70 // track video plays 80 }else if (pct > 0 && !v0){
71 video.addEventListener('timeupdate', function(e){ 81 v0 = true;
72 var pct = video.currentTime / video.duration *100; 82 eyeBuild.doIAT(5);
73 if (pct > 75 && !v75){ 83 if(videoPlays>1){
74 v75 = true; 84 eyeBuild.doIAT(10);
75 eyeBuild.doIAT(8); 85 }
76 }else if (pct > 50 && !v50){
77 v50 = true;
78 eyeBuild.doIAT(7);
79 }else if (pct > 25 && !v25){
80 v25 = true;
81 eyeBuild.doIAT(6);
82 }else if (pct > 0 && !v0){
83 v0 = true;
84 eyeBuild.doIAT(5);
85 if(videoPlays>1){
86 eyeBuild.doIAT(10);
87 } 86 }
88 } 87 }, false);
89 }, false); 88
89 playButton.addEventListener('click', function(e){
90 myVideoJsPlayer.play();
91 }, false);
92
93 });
90 94
95
91 var closeButton = document.getElementById("close"); 96 var closeButton = document.getElementById("close");
92 closeButton.addEventListener("click", function(e) { 97 closeButton.addEventListener("click", function(e) {
93 eyeBuild.doClose(); 98 eyeBuild.doClose();
...@@ -136,36 +141,34 @@ ...@@ -136,36 +141,34 @@
136 box-sizing: border-box; 141 box-sizing: border-box;
137 } 142 }
138 143
139 #video, #video-controls{ 144 #video, #play-pause{
140 position: absolute; 145 position: absolute;
141 width: 570px; 146 width: 570px;
142 height: 320px; 147 height: 320px;
143 left:15px; 148 left:15px;
144 top:110px; 149 top:110px;
150 border:none;
145 } 151 }
146 #video-controls.start{ 152 #play-pause{
147 background: url(assets_exp/img/poster1.jpg) no-repeat center center;
148 }
149 #video-controls.play {
150 background: none;
151 }
152 #video-controls button{
153 width: 100%;
154 height: 100%;
155 background: url(assets_exp/img/play.svg) no-repeat center center;
156 border: none;
157 cursor: pointer; 153 cursor: pointer;
154 background: url(assets_exp/img/play.svg) no-repeat center center;
158 } 155 }
159 #video-controls button.play:hover{ 156 #play-pause.pause:hover{
160 background-size: 60px 60px; 157 background-size: 60px 60px;
161 } 158 }
162 #video-controls button.play{ 159 #play-pause.pause:active{
163 background: url(assets_exp/img/play.svg) no-repeat center center; 160 background-size: 50px 50px;
161 }
162 #play-pause.pause{
164 background-size: 55px 55px; 163 background-size: 55px 55px;
164 display: block;
165 } 165 }
166 #video-controls button.pause{ 166 #play-pause.play{
167 background: none; 167 display: none;
168 } 168 }
169 .vjs-big-play-button{
170 display: none !important;
171 }
169 172
170 #txt{ 173 #txt{
171 position: absolute; 174 position: absolute;
...@@ -175,6 +178,13 @@ ...@@ -175,6 +178,13 @@
175 height:auto; 178 height:auto;
176 opacity: 1; 179 opacity: 1;
177 } 180 }
181 #overlay{
182 position: absolute;
183 width: 570px;
184 height: auto;
185 bottom: 16px;
186 left:15px;
187 }
178 #close{ 188 #close{
179 position: absolute; 189 position: absolute;
180 left:8px; 190 left:8px;
...@@ -190,22 +200,21 @@ ...@@ -190,22 +200,21 @@
190 #close:hover{ 200 #close:hover{
191 background: url(assets_exp/img/close-h.svg) no-repeat center center; 201 background: url(assets_exp/img/close-h.svg) no-repeat center center;
192 } 202 }
203
193 </style> 204 </style>
194 </head> 205 </head>
195 206
196 <body> 207 <body>
197 <div id="border"> 208 <div id="border">
198 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"> 209 <a id="click-tag" href="javascript:eyeBuild.doClick(0)">
199 <video id="video" width="" height=""> 210 <img id="overlay" src="assets_exp/img/overlay.png" alt="overlay" width="" height="">
200 <source src="assets_exp/vid.mp4" type="video/mp4">
201 Your browser doesn't support HTML5 video.
202 </video>
203 <img id="txt" src="assets_exp/img/overlay.png" style="border-style:none">
204 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
205 </a> 211 </a>
206 <div id="video-controls" class="start"> 212 <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="assets_exp/img/poster1.jpg" data-setup='{"example_option":true}'>
207 <button type="button" id="play-pause" class="play"></button> 213 <source src="../vidA.mp4" type="video/mp4" />
208 </div> 214 <!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
215 <!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
216 </video>
217 <button type="button" id="play-pause" class="pause"></button>
209 <button type="button" id="close" class="close"></button> 218 <button type="button" id="close" class="close"></button>
210 </div> 219 </div>
211 220
......
...@@ -22,72 +22,77 @@ ...@@ -22,72 +22,77 @@
22 </script> 22 </script>
23 --> 23 -->
24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script> 24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
25 <link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
26 <script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
25 <script type="text/javascript"> 27 <script type="text/javascript">
28
29 /**
30 * This section uses videojs with eyeBuild, tracking plays, clicks, etc.
31 **/
26 window.onload = function() { 32 window.onload = function() {
27 eyeBuild.initialize(); 33 eyeBuild.initialize();
28 window.isVideoClick = false; 34 window.isVideoClick = false;
29 35
30 var videoPlays = 0; 36 //var video = document.getElementsByTagName("video")[0];
31 var v0 = false; 37 var myVideoJsPlayer = videojs('video');
32 var v25 = false; 38 var video = document.querySelector("#video video");
33 var v50 = false;
34 var v75 = false;
35
36 var video = document.getElementById("video");
37 var videoControls = document.getElementById("video-controls");
38 var playButton = document.getElementById("play-pause"); 39 var playButton = document.getElementById("play-pause");
39 playButton.addEventListener("click", function(e) { 40
40 if (video.paused == true) { 41 videojs(video, {}, function(){
41 play(); 42
43 var videoPlays = 0;
44 var v0 = false;
45 var v25 = false;
46 var v50 = false;
47 var v75 = false;
48
49 video.addEventListener("play", function(e) {
42 eyeBuild.doIAT(0); 50 eyeBuild.doIAT(0);
43 } else { 51 videoPlays++;
44 pause(); 52 playButton.setAttribute("class", "play");
53 });
54 video.addEventListener("pause", function(e) {
45 eyeBuild.doIAT(1); 55 eyeBuild.doIAT(1);
46 } 56 playButton.setAttribute("class", "pause");
47 }); 57 });
48 var play = function(){ 58 video.addEventListener("ended", function(e) {
49 video.play(); 59 video.currentTime = 0;
50 videoPlays++; 60 playButton.setAttribute("class", "pause");
51 playButton.setAttribute("class", "pause"); 61 v0 = false;
52 videoControls.setAttribute("class", "play"); 62 v25 = false;
53 } 63 v50 = false;
54 var pause = function(){ 64 v75 = false;
55 video.pause(); 65 eyeBuild.doIAT(9);
56 playButton.setAttribute("class", "play"); 66 });
57 } 67
58 video.addEventListener('ended', function(e){ 68 // track video plays
59 video.currentTime = 0; 69 video.addEventListener('timeupdate', function(e){
60 pause(); 70 var pct = video.currentTime / video.duration *100;
61 videoControls.setAttribute("class", "start"); 71 if (pct > 75 && !v75){
62 playButton.setAttribute("class", "play"); 72 v75 = true;
63 v0 = false; 73 eyeBuild.doIAT(8);
64 v25 = false; 74 }else if (pct > 50 && !v50){
65 v50 = false; 75 v50 = true;
66 v75 = false; 76 eyeBuild.doIAT(7);
67 eyeBuild.doIAT(9); 77 }else if (pct > 25 && !v25){
68 }, false); 78 v25 = true;
69 79 eyeBuild.doIAT(6);
70 // track video plays 80 }else if (pct > 0 && !v0){
71 video.addEventListener('timeupdate', function(e){ 81 v0 = true;
72 var pct = video.currentTime / video.duration *100; 82 eyeBuild.doIAT(5);
73 if (pct > 75 && !v75){ 83 if(videoPlays>1){
74 v75 = true; 84 eyeBuild.doIAT(10);
75 eyeBuild.doIAT(8); 85 }
76 }else if (pct > 50 && !v50){
77 v50 = true;
78 eyeBuild.doIAT(7);
79 }else if (pct > 25 && !v25){
80 v25 = true;
81 eyeBuild.doIAT(6);
82 }else if (pct > 0 && !v0){
83 v0 = true;
84 eyeBuild.doIAT(5);
85 if(videoPlays>1){
86 eyeBuild.doIAT(10);
87 } 86 }
88 } 87 }, false);
89 }, false); 88
89 playButton.addEventListener('click', function(e){
90 myVideoJsPlayer.play();
91 }, false);
92
93 });
90 94
95
91 var closeButton = document.getElementById("close"); 96 var closeButton = document.getElementById("close");
92 closeButton.addEventListener("click", function(e) { 97 closeButton.addEventListener("click", function(e) {
93 eyeBuild.doClose(); 98 eyeBuild.doClose();
...@@ -136,36 +141,34 @@ ...@@ -136,36 +141,34 @@
136 box-sizing: border-box; 141 box-sizing: border-box;
137 } 142 }
138 143
139 #video, #video-controls{ 144 #video, #play-pause{
140 position: absolute; 145 position: absolute;
141 width: 570px; 146 width: 570px;
142 height: 320px; 147 height: 320px;
143 left:15px; 148 left:15px;
144 top:110px; 149 top:110px;
150 border:none;
145 } 151 }
146 #video-controls.start{ 152 #play-pause{
147 background: url(assets_exp/img/poster2.jpg) no-repeat center center;
148 }
149 #video-controls.play {
150 background: none;
151 }
152 #video-controls button{
153 width: 100%;
154 height: 100%;
155 background: url(assets_exp/img/play.svg) no-repeat center center;
156 border: none;
157 cursor: pointer; 153 cursor: pointer;
154 background: url(assets_exp/img/play.svg) no-repeat center center;
158 } 155 }
159 #video-controls button.play:hover{ 156 #play-pause.pause:hover{
160 background-size: 60px 60px; 157 background-size: 60px 60px;
161 } 158 }
162 #video-controls button.play{ 159 #play-pause.pause:active{
163 background: url(assets_exp/img/play.svg) no-repeat center center; 160 background-size: 50px 50px;
161 }
162 #play-pause.pause{
164 background-size: 55px 55px; 163 background-size: 55px 55px;
164 display: block;
165 } 165 }
166 #video-controls button.pause{ 166 #play-pause.play{
167 background: none; 167 display: none;
168 } 168 }
169 .vjs-big-play-button{
170 display: none !important;
171 }
169 172
170 #txt{ 173 #txt{
171 position: absolute; 174 position: absolute;
...@@ -175,6 +178,13 @@ ...@@ -175,6 +178,13 @@
175 height:auto; 178 height:auto;
176 opacity: 1; 179 opacity: 1;
177 } 180 }
181 #overlay{
182 position: absolute;
183 width: 570px;
184 height: auto;
185 bottom: 16px;
186 left:15px;
187 }
178 #close{ 188 #close{
179 position: absolute; 189 position: absolute;
180 left:8px; 190 left:8px;
...@@ -190,22 +200,21 @@ ...@@ -190,22 +200,21 @@
190 #close:hover{ 200 #close:hover{
191 background: url(assets_exp/img/close-h.svg) no-repeat center center; 201 background: url(assets_exp/img/close-h.svg) no-repeat center center;
192 } 202 }
203
193 </style> 204 </style>
194 </head> 205 </head>
195 206
196 <body> 207 <body>
197 <div id="border"> 208 <div id="border">
198 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"> 209 <a id="click-tag" href="javascript:eyeBuild.doClick(0)">
199 <video id="video" width="" height=""> 210 <img id="overlay" src="assets_exp/img/overlay.png" alt="overlay" width="" height="">
200 <source src="assets_exp/vid.mp4" type="video/mp4">
201 Your browser doesn't support HTML5 video.
202 </video>
203 <img id="txt" src="assets_exp/img/overlay.png" style="border-style:none">
204 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
205 </a> 211 </a>
206 <div id="video-controls" class="start"> 212 <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="assets_exp/img/poster2.jpg" data-setup='{"example_option":true}'>
207 <button type="button" id="play-pause" class="play"></button> 213 <source src="../vidA.mp4" type="video/mp4" />
208 </div> 214 <!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
215 <!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
216 </video>
217 <button type="button" id="play-pause" class="pause"></button>
209 <button type="button" id="close" class="close"></button> 218 <button type="button" id="close" class="close"></button>
210 </div> 219 </div>
211 220
......
...@@ -22,72 +22,77 @@ ...@@ -22,72 +22,77 @@
22 </script> 22 </script>
23 --> 23 -->
24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script> 24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
25 <link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
26 <script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
25 <script type="text/javascript"> 27 <script type="text/javascript">
28
29 /**
30 * This section uses videojs with eyeBuild, tracking plays, clicks, etc.
31 **/
26 window.onload = function() { 32 window.onload = function() {
27 eyeBuild.initialize(); 33 eyeBuild.initialize();
28 window.isVideoClick = false; 34 window.isVideoClick = false;
29 35
30 var videoPlays = 0; 36 //var video = document.getElementsByTagName("video")[0];
31 var v0 = false; 37 var myVideoJsPlayer = videojs('video');
32 var v25 = false; 38 var video = document.querySelector("#video video");
33 var v50 = false;
34 var v75 = false;
35
36 var video = document.getElementById("video");
37 var videoControls = document.getElementById("video-controls");
38 var playButton = document.getElementById("play-pause"); 39 var playButton = document.getElementById("play-pause");
39 playButton.addEventListener("click", function(e) { 40
40 if (video.paused == true) { 41 videojs(video, {}, function(){
41 play(); 42
43 var videoPlays = 0;
44 var v0 = false;
45 var v25 = false;
46 var v50 = false;
47 var v75 = false;
48
49 video.addEventListener("play", function(e) {
42 eyeBuild.doIAT(0); 50 eyeBuild.doIAT(0);
43 } else { 51 videoPlays++;
44 pause(); 52 playButton.setAttribute("class", "play");
53 });
54 video.addEventListener("pause", function(e) {
45 eyeBuild.doIAT(1); 55 eyeBuild.doIAT(1);
46 } 56 playButton.setAttribute("class", "pause");
47 }); 57 });
48 var play = function(){ 58 video.addEventListener("ended", function(e) {
49 video.play(); 59 video.currentTime = 0;
50 videoPlays++; 60 playButton.setAttribute("class", "pause");
51 playButton.setAttribute("class", "pause"); 61 v0 = false;
52 videoControls.setAttribute("class", "play"); 62 v25 = false;
53 } 63 v50 = false;
54 var pause = function(){ 64 v75 = false;
55 video.pause(); 65 eyeBuild.doIAT(9);
56 playButton.setAttribute("class", "play"); 66 });
57 } 67
58 video.addEventListener('ended', function(e){ 68 // track video plays
59 video.currentTime = 0; 69 video.addEventListener('timeupdate', function(e){
60 pause(); 70 var pct = video.currentTime / video.duration *100;
61 videoControls.setAttribute("class", "start"); 71 if (pct > 75 && !v75){
62 playButton.setAttribute("class", "play"); 72 v75 = true;
63 v0 = false; 73 eyeBuild.doIAT(8);
64 v25 = false; 74 }else if (pct > 50 && !v50){
65 v50 = false; 75 v50 = true;
66 v75 = false; 76 eyeBuild.doIAT(7);
67 eyeBuild.doIAT(9); 77 }else if (pct > 25 && !v25){
68 }, false); 78 v25 = true;
69 79 eyeBuild.doIAT(6);
70 // track video plays 80 }else if (pct > 0 && !v0){
71 video.addEventListener('timeupdate', function(e){ 81 v0 = true;
72 var pct = video.currentTime / video.duration *100; 82 eyeBuild.doIAT(5);
73 if (pct > 75 && !v75){ 83 if(videoPlays>1){
74 v75 = true; 84 eyeBuild.doIAT(10);
75 eyeBuild.doIAT(8); 85 }
76 }else if (pct > 50 && !v50){
77 v50 = true;
78 eyeBuild.doIAT(7);
79 }else if (pct > 25 && !v25){
80 v25 = true;
81 eyeBuild.doIAT(6);
82 }else if (pct > 0 && !v0){
83 v0 = true;
84 eyeBuild.doIAT(5);
85 if(videoPlays>1){
86 eyeBuild.doIAT(10);
87 } 86 }
88 } 87 }, false);
89 }, false); 88
89 playButton.addEventListener('click', function(e){
90 myVideoJsPlayer.play();
91 }, false);
92
93 });
90 94
95
91 var closeButton = document.getElementById("close"); 96 var closeButton = document.getElementById("close");
92 closeButton.addEventListener("click", function(e) { 97 closeButton.addEventListener("click", function(e) {
93 eyeBuild.doClose(); 98 eyeBuild.doClose();
...@@ -136,36 +141,34 @@ ...@@ -136,36 +141,34 @@
136 box-sizing: border-box; 141 box-sizing: border-box;
137 } 142 }
138 143
139 #video, #video-controls{ 144 #video, #play-pause{
140 position: absolute; 145 position: absolute;
141 width: 570px; 146 width: 570px;
142 height: 320px; 147 height: 320px;
143 left:15px; 148 left:15px;
144 top:110px; 149 top:110px;
150 border:none;
145 } 151 }
146 #video-controls.start{ 152 #play-pause{
147 background: url(assets_exp/img/poster3.jpg) no-repeat center center;
148 }
149 #video-controls.play {
150 background: none;
151 }
152 #video-controls button{
153 width: 100%;
154 height: 100%;
155 background: url(assets_exp/img/play.svg) no-repeat center center;
156 border: none;
157 cursor: pointer; 153 cursor: pointer;
154 background: url(assets_exp/img/play.svg) no-repeat center center;
158 } 155 }
159 #video-controls button.play:hover{ 156 #play-pause.pause:hover{
160 background-size: 60px 60px; 157 background-size: 60px 60px;
161 } 158 }
162 #video-controls button.play{ 159 #play-pause.pause:active{
163 background: url(assets_exp/img/play.svg) no-repeat center center; 160 background-size: 50px 50px;
161 }
162 #play-pause.pause{
164 background-size: 55px 55px; 163 background-size: 55px 55px;
164 display: block;
165 } 165 }
166 #video-controls button.pause{ 166 #play-pause.play{
167 background: none; 167 display: none;
168 } 168 }
169 .vjs-big-play-button{
170 display: none !important;
171 }
169 172
170 #txt{ 173 #txt{
171 position: absolute; 174 position: absolute;
...@@ -175,6 +178,13 @@ ...@@ -175,6 +178,13 @@
175 height:auto; 178 height:auto;
176 opacity: 1; 179 opacity: 1;
177 } 180 }
181 #overlay{
182 position: absolute;
183 width: 570px;
184 height: auto;
185 bottom: 16px;
186 left:15px;
187 }
178 #close{ 188 #close{
179 position: absolute; 189 position: absolute;
180 left:8px; 190 left:8px;
...@@ -190,22 +200,21 @@ ...@@ -190,22 +200,21 @@
190 #close:hover{ 200 #close:hover{
191 background: url(assets_exp/img/close-h.svg) no-repeat center center; 201 background: url(assets_exp/img/close-h.svg) no-repeat center center;
192 } 202 }
203
193 </style> 204 </style>
194 </head> 205 </head>
195 206
196 <body> 207 <body>
197 <div id="border"> 208 <div id="border">
198 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"> 209 <a id="click-tag" href="javascript:eyeBuild.doClick(0)">
199 <video id="video" width="" height=""> 210 <img id="overlay" src="assets_exp/img/overlay.png" alt="overlay" width="" height="">
200 <source src="assets_exp/vid.mp4" type="video/mp4">
201 Your browser doesn't support HTML5 video.
202 </video>
203 <img id="txt" src="assets_exp/img/overlay.png" style="border-style:none">
204 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
205 </a> 211 </a>
206 <div id="video-controls" class="start"> 212 <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="assets_exp/img/poster3.jpg" data-setup='{"example_option":true}'>
207 <button type="button" id="play-pause" class="play"></button> 213 <source src="../vidC.mp4" type="video/mp4" />
208 </div> 214 <!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
215 <!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
216 </video>
217 <button type="button" id="play-pause" class="pause"></button>
209 <button type="button" id="close" class="close"></button> 218 <button type="button" id="close" class="close"></button>
210 </div> 219 </div>
211 220
......
...@@ -22,7 +22,11 @@ ...@@ -22,7 +22,11 @@
22 </script> 22 </script>
23 --> 23 -->
24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script> 24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
25 25 <script type="text/javascript">
26 window.onload = function() {
27 eyeBuild.initialize();
28 };
29 </script>
26 30
27 <style> 31 <style>
28 32
......
...@@ -22,7 +22,11 @@ ...@@ -22,7 +22,11 @@
22 </script> 22 </script>
23 --> 23 -->
24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script> 24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
25 25 <script type="text/javascript">
26 window.onload = function() {
27 eyeBuild.initialize();
28 };
29 </script>
26 30
27 <style> 31 <style>
28 32
......
...@@ -22,7 +22,11 @@ ...@@ -22,7 +22,11 @@
22 </script> 22 </script>
23 --> 23 -->
24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script> 24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
25 25 <script type="text/javascript">
26 window.onload = function() {
27 eyeBuild.initialize();
28 };
29 </script>
26 30
27 <style> 31 <style>
28 32
......
1 /*!
2 * VERSION: 1.0.1
3 * DATE: 2016-04-28
4 *
5 * Requires:
6 * GSAP TweenMax
7 * GASP drawSVG Plugin ()
8 * This work is subject to the terms at http://greensock.com/standard-license or for
9 * Club GreenSock members, the software agreement that was issued with your membership.
10 *
11 * @license Copyright (c) 2016, Tenzing Communications Inc. All rights reserved.
12 *
13 * @author: Dan Rempel, dan@gotenzing.com
14
15 * Usage Example:
16 * var myEySvg = initEySvgFrame(10, 196, 193); // frame line weight, width, height
17 * document.getElementById("body").appendChild(myEySvg);
18 * animateEyFrame(2); // delay in seconds
19 * animateGradient(2); // delay in seconds
20 * animateFill(2); // delay in seconds
21 *
22 **/
23
24 var eySvg;var eyStroke;var eyDot1;var eyDot2;var eyDot3;var eyGradient;var eyFill;var tl;var eyStrokeWeight;var eySvgHeight;var eySvgWidth;var eyAngleHeight;var eyDotSpacing;var eyDotDuration=.2;var eyFrameDuration=1;var eyGradientDuration=1;var eyFillDuration=1;var eyColor="#FFD400";var svgNS="http://www.w3.org/2000/svg";var initEySvgFrame=function(a,b,c){tl=new TimelineMax();eyDotSpacing=Math.floor(a*8.5/10);eyStrokeWeight=a;eySvgWidth=b;eySvgHeight=c;var d=10*Math.PI/180;eyAngleHeight=Math.tan(d)*(b-a);var e=document.createElementNS(svgNS,"svg");e.setAttribute("id","ey-frame");e.setAttribute("width",b+"px");e.setAttribute("height",c+"px");e.setAttribute("viewBox","0 0 "+eySvgWidth+" "+eySvgHeight);var f=document.createElementNS(svgNS,"defs");e.appendChild(f);var g=document.createElementNS(svgNS,"linearGradient");g.setAttribute("id","linear-gradient");g.setAttribute("x1","0%");g.setAttribute("x2","0%");g.setAttribute("y1","0%");g.setAttribute("y2","100%");f.appendChild(g);var h;h=createStop({id:"stop-1",offset:"0%",color:"Black",opacity:".7"});g.appendChild(h);h=createStop({id:"stop-2",offset:"100%",color:"Black",opacity:"0"});g.appendChild(h);eyGradient=createShape("ey-gradient","url(#linear-gradient)");e.appendChild(eyGradient);eyDot1=createDot(1);e.appendChild(eyDot1);eyDot2=createDot(2);e.appendChild(eyDot2);eyDot3=createDot(3);e.appendChild(eyDot3);eyStroke=createPath("ey-stroke");eyStroke.setAttribute("d"," M "+((eyStrokeWeight+eyDotSpacing)*3)+" "+(eySvgHeight-a/2)+" H "+(b-a/2)+" V "+a/1.5+" L "+a/2+" "+(eyAngleHeight+a/2)+" V "+(c-a-eyDotSpacing));e.appendChild(eyStroke);eyFill=createShape("ey-gradient",eyColor);e.appendChild(eyFill);return e};var animateEyFrame=function(a){var b=0;tl.fromTo(eyDot1,eyDotDuration,{drawSVG:"0"},{drawSVG:"0 "+(b+=(eyStrokeWeight+eyDotSpacing)),ease:Power1.easeInOut,delay:a});tl.fromTo(eyDot2,eyDotDuration,{drawSVG:"0"},{drawSVG:"0 "+(b+=(eyStrokeWeight+eyDotSpacing)),ease:Power1.easeInOut});tl.fromTo(eyDot3,eyDotDuration,{drawSVG:"0"},{drawSVG:"0 "+(b+=(eyStrokeWeight+eyDotSpacing)),ease:Power1.easeInOut});tl.fromTo(eyStroke,eyFrameDuration,{drawSVG:"0"},{drawSVG:"0 100%",ease:Power1.easeIn})};var animateGradient=function(a){tl.fromTo(eyGradient,.5,{opacity:0},{opacity:1,delay:a})};var animateFill=function(a){tl.fromTo(eyFill,.5,{y:eySvgHeight},{y:0,ease:Power2.easeIn,delay:a})};var createPath=function(a){var b=document.createElementNS(svgNS,"path");b.setAttribute("id",a);b.setAttribute("fill","none");b.setAttribute("stroke",eyColor);b.setAttribute("stroke-width",eyStrokeWeight);b.setAttribute("stroke-miterlimit","10");return b};var createDot=function(a){var b=createPath("ey-dot"+a);b.setAttribute("d"," M "+((eyStrokeWeight+eyDotSpacing)*(a-1))+" "+(eySvgHeight-eyStrokeWeight/2)+" h "+eyStrokeWeight);return b};var createShape=function(a,b){var c=document.createElementNS(svgNS,"path");c.setAttribute("id",a);c.setAttribute("fill",b);c.setAttribute("d"," M 0 "+(eySvgHeight)+" H "+(eySvgWidth)+" V 2 "+" L 0 "+(eyAngleHeight+2)+" Z ");return c};var createStop=function(a){var b=document.createElementNS(svgNS,"stop");b.setAttribute("id",a.id);b.setAttribute("offset",a.offset);b.setAttribute("stop-color",a.color);b.setAttribute("stop-opacity",a.opacity);return b};
...\ No newline at end of file ...\ No newline at end of file
1 /*!
2 * VERSION: 1.0.2
3 * DATE: 2016-05-03
4 *
5 * Requires:
6 * GSAP TweenMax
7 * GASP drawSVG Plugin ()
8 * This work is subject to the terms at http://greensock.com/standard-license or for
9 * Club GreenSock members, the software agreement that was issued with your membership.
10 *
11 * @license Copyright (c) 2016, Tenzing Communications Inc. All rights reserved.
12 *
13 * @author: Dan Rempel, dan@gotenzing.com
14
15 * Usage Example:
16 * var myEySvg = initEySvgFrame(10, 196, 193); // frame line weight, width, height
17 * document.getElementById("body").appendChild(myEySvg);
18 * animateEyFrame(2); // delay in seconds
19 * animateGradient(2); // delay in seconds
20 * animateFill(2); // delay in seconds
21 *
22 **/
23
24 var eySvg;var eyStroke;var eyDot1;var eyDot2;var eyDot3;var eyGradient;var eyFill;var tl;var eyStrokeWeight;var eySvgHeight;var eySvgWidth;var eyAngleHeight;var eyDotSpacing;var eyDotDuration=0.2;var eyFrameDuration=1;var eyGradientDuration=1;var eyFillDuration=1;var eyColor='#FFD400';var svgNS='http://www.w3.org/2000/svg';var initEySvgFrame=function(b,d,f){tl=new TimelineMax(),eyDotSpacing=Math.floor(b*8.5/10),eyStrokeWeight=b,eySvgWidth=d,eySvgHeight=f;var h=10*Math.PI/180;eyAngleHeight=Math.tan(h)*(d-b);var a=document.createElementNS(svgNS,'svg');a.setAttribute('id','ey-frame'),a.setAttribute('width',d+'px'),a.setAttribute('height',f+'px'),a.setAttribute('viewBox','0 0 '+eySvgWidth+' '+eySvgHeight);var g=document.createElementNS(svgNS,'defs');a.appendChild(g);var c=document.createElementNS(svgNS,'linearGradient');c.setAttribute('id','linear-gradient'),c.setAttribute('x1','0%'),c.setAttribute('x2','0%'),c.setAttribute('y1','0%'),c.setAttribute('y2','100%'),g.appendChild(c);var e;return e=createStop({id:'stop-1',offset:'0%',color:'Black',opacity:'.7'}),c.appendChild(e),e=createStop({id:'stop-2',offset:'100%',color:'Black',opacity:'0'}),c.appendChild(e),eyGradient=createShape('ey-gradient','url(#linear-gradient)'),a.appendChild(eyGradient),eyDot1=createDot(1),a.appendChild(eyDot1),eyDot2=createDot(2),a.appendChild(eyDot2),eyDot3=createDot(3),a.appendChild(eyDot3),eyStroke=createPath('ey-stroke'),eyStroke.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*3+' '+(eySvgHeight-b/2)+' H '+(d-b/2)+' V '+b/1.5+' L '+b/2+' '+(eyAngleHeight+b/2)+' V '+(f-b-eyDotSpacing)),a.appendChild(eyStroke),a;};var animateEyFrame=function(b){var a=0;tl.fromTo(eyDot1,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut,delay:b}),tl.fromTo(eyDot2,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.fromTo(eyDot3,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.fromTo(eyStroke,eyFrameDuration,{drawSVG:'0'},{drawSVG:'0 100%',ease:Power1.easeIn});};var animateGradient=function(a){tl.fromTo(eyGradient,0.5,{opacity:0},{opacity:1,delay:a});};var animateFill=function(a){(typeof eyFill==='undefined'||variable===null)&&(eyFill=createShape('ey-gradient',eyColor),eySvg.appendChild(eyFill)),tl.fromTo(eyFill,0.5,{y:eySvgHeight},{y:0,ease:Power2.easeIn,delay:a});};var createPath=function(b){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill','none'),a.setAttribute('stroke',eyColor),a.setAttribute('stroke-width',eyStrokeWeight),a.setAttribute('stroke-miterlimit','10'),a;};var createDot=function(b){var a=createPath('ey-dot'+b);return a.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*(b-1)+' '+(eySvgHeight-eyStrokeWeight/2)+' h '+eyStrokeWeight),a;};var createShape=function(b,c){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill',c),a.setAttribute('d',' M 0 '+eySvgHeight+' H '+eySvgWidth+' V 2 '+' L 0 '+(eyAngleHeight+2)+' Z '),a;};var createStop=function(b){var a=document.createElementNS(svgNS,'stop');return a.setAttribute('id',b.id),a.setAttribute('offset',b.offset),a.setAttribute('stop-color',b.color),a.setAttribute('stop-opacity',b.opacity),a;};
...\ No newline at end of file ...\ No newline at end of file
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
94 opacity: 0; 94 opacity: 0;
95 } 95 }
96 #txt2{ 96 #txt2{
97 left: 52px; 97 left: 57px;
98 top:105px; 98 top:105px;
99 width: 213px; 99 width: 213px;
100 } 100 }
...@@ -165,10 +165,10 @@ ...@@ -165,10 +165,10 @@
165 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> --> 165 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
166 <a href="javascript:eyeBuild.doClick(0)" class="cta"> 166 <a href="javascript:eyeBuild.doClick(0)" class="cta">
167 <div id="border"> 167 <div id="border">
168 <img id="logo" src="assets/img/logo.png" alt="logo">
169 <img id="legal" src="assets/img/legal.png" alt="legal">
170 <img id="arm" src="assets/img/arm.png" alt="arm"> 168 <img id="arm" src="assets/img/arm.png" alt="arm">
171 <img id="mask" src="assets/img/mask.png" alt="mask"> 169 <img id="mask" src="assets/img/mask.png" alt="mask">
170 <img id="logo" src="assets/img/logo.png" alt="logo">
171 <img id="legal" src="assets/img/legal.png" alt="legal">
172 <img id="txt1" src="assets/img/txt1.png" alt="txt1"> 172 <img id="txt1" src="assets/img/txt1.png" alt="txt1">
173 <img id="txt2" src="assets/img/txt2.png" alt="txt2"> 173 <img id="txt2" src="assets/img/txt2.png" alt="txt2">
174 174
...@@ -200,27 +200,18 @@ ...@@ -200,27 +200,18 @@
200 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation --> 200 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation -->
201 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 201 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
202 <script src="assets/js/DrawSVGPlugin.min.js"></script> 202 <script src="assets/js/DrawSVGPlugin.min.js"></script>
203 <script src="assets/js/ey-frame-svg-1.0.1.min.js"></script> 203 <script src="assets/js/ey-frame-svg-1.0.2.min.js"></script>
204 204
205 <script> 205 <script>
206 206
207 function stage1(){ 207 function stage1(){
208 var tl = new TimelineMax(); /* {repeat:2, repeatDelay:2} */ 208 var tl = new TimelineMax(); /* {repeat:2, repeatDelay:2} */
209 209
210 /*
211 animate boy
212 logo
213 frame w txt
214 dot
215 tags w dots
216 cta
217 hash
218 */
219 var d=.4; 210 var d=.4;
220 211
221 212
222 tl.to("#arm", .8, {left:-20, top:9, ease:Power1.easeInOut, delay:0 }); 213 tl.to("#logo", .7, {opacity:1, ease:Power1.easeInOut, delay:0 });
223 tl.to("#logo", .7, {opacity:1, ease:Power1.easeInOut, delay:-.5 }); 214 tl.to("#arm", .8, {left:-20, top:9, ease:Power1.easeInOut, delay:.2 });
224 215
225 var myeySvg = initEySvgFrame(12, 259, 218); 216 var myeySvg = initEySvgFrame(12, 259, 218);
226 $("#border").append(myeySvg); 217 $("#border").append(myeySvg);
...@@ -230,7 +221,7 @@ ...@@ -230,7 +221,7 @@
230 tl.to("#txt1", d, {opacity:1, ease:Power1.easeInOut, delay:1.8 }); 221 tl.to("#txt1", d, {opacity:1, ease:Power1.easeInOut, delay:1.8 });
231 tl.to("#txt1", d, {opacity:0, ease:Power1.easeInOut, delay:2.5 }); 222 tl.to("#txt1", d, {opacity:0, ease:Power1.easeInOut, delay:2.5 });
232 223
233 animateFill(2.3); 224 //animateFill(2.3);
234 tl.to("#txt2", d, {opacity:1, ease:Power1.easeInOut, delay:0 }); 225 tl.to("#txt2", d, {opacity:1, ease:Power1.easeInOut, delay:0 });
235 tl.to("#txt2", d, {opacity:0, ease:Power1.easeInOut, delay:3 }); 226 tl.to("#txt2", d, {opacity:0, ease:Power1.easeInOut, delay:3 });
236 227
......
...@@ -22,72 +22,77 @@ ...@@ -22,72 +22,77 @@
22 </script> 22 </script>
23 --> 23 -->
24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script> 24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
25 <link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
26 <script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
25 <script type="text/javascript"> 27 <script type="text/javascript">
28
29 /**
30 * This section uses videojs with eyeBuild, tracking plays, clicks, etc.
31 **/
26 window.onload = function() { 32 window.onload = function() {
27 eyeBuild.initialize(); 33 eyeBuild.initialize();
28 window.isVideoClick = false; 34 window.isVideoClick = false;
29 35
30 var videoPlays = 0; 36 //var video = document.getElementsByTagName("video")[0];
31 var v0 = false; 37 var myVideoJsPlayer = videojs('video');
32 var v25 = false; 38 var video = document.querySelector("#video video");
33 var v50 = false;
34 var v75 = false;
35
36 var video = document.getElementById("video");
37 var videoControls = document.getElementById("video-controls");
38 var playButton = document.getElementById("play-pause"); 39 var playButton = document.getElementById("play-pause");
39 playButton.addEventListener("click", function(e) { 40
40 if (video.paused == true) { 41 videojs(video, {}, function(){
41 play(); 42
43 var videoPlays = 0;
44 var v0 = false;
45 var v25 = false;
46 var v50 = false;
47 var v75 = false;
48
49 video.addEventListener("play", function(e) {
42 eyeBuild.doIAT(0); 50 eyeBuild.doIAT(0);
43 } else { 51 videoPlays++;
44 pause(); 52 playButton.setAttribute("class", "play");
53 });
54 video.addEventListener("pause", function(e) {
45 eyeBuild.doIAT(1); 55 eyeBuild.doIAT(1);
46 } 56 playButton.setAttribute("class", "pause");
47 }); 57 });
48 var play = function(){ 58 video.addEventListener("ended", function(e) {
49 video.play(); 59 video.currentTime = 0;
50 videoPlays++; 60 playButton.setAttribute("class", "pause");
51 playButton.setAttribute("class", "pause"); 61 v0 = false;
52 videoControls.setAttribute("class", "play"); 62 v25 = false;
53 } 63 v50 = false;
54 var pause = function(){ 64 v75 = false;
55 video.pause(); 65 eyeBuild.doIAT(9);
56 playButton.setAttribute("class", "play"); 66 });
57 } 67
58 video.addEventListener('ended', function(e){ 68 // track video plays
59 video.currentTime = 0; 69 video.addEventListener('timeupdate', function(e){
60 pause(); 70 var pct = video.currentTime / video.duration *100;
61 videoControls.setAttribute("class", "start"); 71 if (pct > 75 && !v75){
62 playButton.setAttribute("class", "play"); 72 v75 = true;
63 v0 = false; 73 eyeBuild.doIAT(8);
64 v25 = false; 74 }else if (pct > 50 && !v50){
65 v50 = false; 75 v50 = true;
66 v75 = false; 76 eyeBuild.doIAT(7);
67 eyeBuild.doIAT(9); 77 }else if (pct > 25 && !v25){
68 }, false); 78 v25 = true;
69 79 eyeBuild.doIAT(6);
70 // track video plays 80 }else if (pct > 0 && !v0){
71 video.addEventListener('timeupdate', function(e){ 81 v0 = true;
72 var pct = video.currentTime / video.duration *100; 82 eyeBuild.doIAT(5);
73 if (pct > 75 && !v75){ 83 if(videoPlays>1){
74 v75 = true; 84 eyeBuild.doIAT(10);
75 eyeBuild.doIAT(8); 85 }
76 }else if (pct > 50 && !v50){
77 v50 = true;
78 eyeBuild.doIAT(7);
79 }else if (pct > 25 && !v25){
80 v25 = true;
81 eyeBuild.doIAT(6);
82 }else if (pct > 0 && !v0){
83 v0 = true;
84 eyeBuild.doIAT(5);
85 if(videoPlays>1){
86 eyeBuild.doIAT(10);
87 } 86 }
88 } 87 }, false);
89 }, false); 88
89 playButton.addEventListener('click', function(e){
90 myVideoJsPlayer.play();
91 }, false);
92
93 });
90 94
95
91 /* 96 /*
92 var closeButton = document.getElementById("close"); 97 var closeButton = document.getElementById("close");
93 closeButton.addEventListener("click", function(e) { 98 closeButton.addEventListener("click", function(e) {
...@@ -140,36 +145,34 @@ ...@@ -140,36 +145,34 @@
140 background-size: 320px 480px; 145 background-size: 320px 480px;
141 } 146 }
142 147
143 #video, #video-controls{ 148 #video, #play-pause{
144 position: absolute; 149 position: absolute;
145 width: 290px; 150 width: 290px;
146 height: 163px; 151 height: 163px;
147 left:16px; 152 left:16px;
148 top:199px; 153 top:199px;
154 border:none;
149 } 155 }
150 #video-controls.start{ 156 #play-pause{
151 background: url(assets/img/poster1.jpg) no-repeat center center;
152 }
153 #video-controls.play {
154 background: none;
155 }
156 #video-controls button{
157 width: 100%;
158 height: 100%;
159 background: url(assets/img/play.svg) no-repeat center center;
160 border: none;
161 cursor: pointer; 157 cursor: pointer;
158 background: url(assets/img/play.svg) no-repeat center center;
162 } 159 }
163 #video-controls button.play:hover{ 160 #play-pause.pause:hover{
164 background-size: 60px 60px; 161 background-size: 60px 60px;
165 } 162 }
166 #video-controls button.play{ 163 #play-pause.pause:active{
167 background: url(assets/img/play.svg) no-repeat center center; 164 background-size: 50px 50px;
165 }
166 #play-pause.pause{
168 background-size: 55px 55px; 167 background-size: 55px 55px;
168 display: block;
169 } 169 }
170 #video-controls button.pause{ 170 #play-pause.play{
171 background: none; 171 display: none;
172 } 172 }
173 .vjs-big-play-button{
174 display: none !important;
175 }
173 176
174 #txt { 177 #txt {
175 position: absolute; 178 position: absolute;
...@@ -186,20 +189,18 @@ ...@@ -186,20 +189,18 @@
186 189
187 <body> 190 <body>
188 <div id="border"> 191 <div id="border">
189 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"> 192 <a id="click-tag" href="javascript:eyeBuild.doClick(0);">
190 <img id="txt" src="assets/img/slice.svg" alt="txt"> 193 <img id="txt" src="assets/img/slice.svg" alt="txt">
191 <video id="video" width="" height="">
192 <source src="assets/vid.mp4" type="video/mp4">
193 Your browser doesn't support HTML5 video.
194 </video>
195 <img id="txt" src="assets/img/overlay.png" style="border-style:none">
196 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
197 </a> 194 </a>
198 <div id="video-controls" class="start"> 195 <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="assets/img/poster1.jpg" data-setup='{"example_option":true}'>
199 <button type="button" id="play-pause" class="play"></button> 196 <source src="../vidA.mp4" type="video/mp4" />
200 </div> 197 <!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
198 <!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
199 </video>
200 <button id="play-pause" class="pause"></button>
201 </div> 201 </div>
202 202
203
203 <!-- jQuery--> 204 <!-- jQuery-->
204 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script> 205 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
205 206
......
...@@ -22,72 +22,77 @@ ...@@ -22,72 +22,77 @@
22 </script> 22 </script>
23 --> 23 -->
24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script> 24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
25 <link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
26 <script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
25 <script type="text/javascript"> 27 <script type="text/javascript">
28
29 /**
30 * This section uses videojs with eyeBuild, tracking plays, clicks, etc.
31 **/
26 window.onload = function() { 32 window.onload = function() {
27 eyeBuild.initialize(); 33 eyeBuild.initialize();
28 window.isVideoClick = false; 34 window.isVideoClick = false;
29 35
30 var videoPlays = 0; 36 //var video = document.getElementsByTagName("video")[0];
31 var v0 = false; 37 var myVideoJsPlayer = videojs('video');
32 var v25 = false; 38 var video = document.querySelector("#video video");
33 var v50 = false;
34 var v75 = false;
35
36 var video = document.getElementById("video");
37 var videoControls = document.getElementById("video-controls");
38 var playButton = document.getElementById("play-pause"); 39 var playButton = document.getElementById("play-pause");
39 playButton.addEventListener("click", function(e) { 40
40 if (video.paused == true) { 41 videojs(video, {}, function(){
41 play(); 42
43 var videoPlays = 0;
44 var v0 = false;
45 var v25 = false;
46 var v50 = false;
47 var v75 = false;
48
49 video.addEventListener("play", function(e) {
42 eyeBuild.doIAT(0); 50 eyeBuild.doIAT(0);
43 } else { 51 videoPlays++;
44 pause(); 52 playButton.setAttribute("class", "play");
53 });
54 video.addEventListener("pause", function(e) {
45 eyeBuild.doIAT(1); 55 eyeBuild.doIAT(1);
46 } 56 playButton.setAttribute("class", "pause");
47 }); 57 });
48 var play = function(){ 58 video.addEventListener("ended", function(e) {
49 video.play(); 59 video.currentTime = 0;
50 videoPlays++; 60 playButton.setAttribute("class", "pause");
51 playButton.setAttribute("class", "pause"); 61 v0 = false;
52 videoControls.setAttribute("class", "play"); 62 v25 = false;
53 } 63 v50 = false;
54 var pause = function(){ 64 v75 = false;
55 video.pause(); 65 eyeBuild.doIAT(9);
56 playButton.setAttribute("class", "play"); 66 });
57 } 67
58 video.addEventListener('ended', function(e){ 68 // track video plays
59 video.currentTime = 0; 69 video.addEventListener('timeupdate', function(e){
60 pause(); 70 var pct = video.currentTime / video.duration *100;
61 videoControls.setAttribute("class", "start"); 71 if (pct > 75 && !v75){
62 playButton.setAttribute("class", "play"); 72 v75 = true;
63 v0 = false; 73 eyeBuild.doIAT(8);
64 v25 = false; 74 }else if (pct > 50 && !v50){
65 v50 = false; 75 v50 = true;
66 v75 = false; 76 eyeBuild.doIAT(7);
67 eyeBuild.doIAT(9); 77 }else if (pct > 25 && !v25){
68 }, false); 78 v25 = true;
69 79 eyeBuild.doIAT(6);
70 // track video plays 80 }else if (pct > 0 && !v0){
71 video.addEventListener('timeupdate', function(e){ 81 v0 = true;
72 var pct = video.currentTime / video.duration *100; 82 eyeBuild.doIAT(5);
73 if (pct > 75 && !v75){ 83 if(videoPlays>1){
74 v75 = true; 84 eyeBuild.doIAT(10);
75 eyeBuild.doIAT(8); 85 }
76 }else if (pct > 50 && !v50){
77 v50 = true;
78 eyeBuild.doIAT(7);
79 }else if (pct > 25 && !v25){
80 v25 = true;
81 eyeBuild.doIAT(6);
82 }else if (pct > 0 && !v0){
83 v0 = true;
84 eyeBuild.doIAT(5);
85 if(videoPlays>1){
86 eyeBuild.doIAT(10);
87 } 86 }
88 } 87 }, false);
89 }, false); 88
89 playButton.addEventListener('click', function(e){
90 myVideoJsPlayer.play();
91 }, false);
92
93 });
90 94
95
91 /* 96 /*
92 var closeButton = document.getElementById("close"); 97 var closeButton = document.getElementById("close");
93 closeButton.addEventListener("click", function(e) { 98 closeButton.addEventListener("click", function(e) {
...@@ -140,36 +145,34 @@ ...@@ -140,36 +145,34 @@
140 background-size: 320px 480px; 145 background-size: 320px 480px;
141 } 146 }
142 147
143 #video, #video-controls{ 148 #video, #play-pause{
144 position: absolute; 149 position: absolute;
145 width: 290px; 150 width: 290px;
146 height: 163px; 151 height: 163px;
147 left:16px; 152 left:16px;
148 top:199px; 153 top:199px;
154 border:none;
149 } 155 }
150 #video-controls.start{ 156 #play-pause{
151 background: url(assets/img/poster2.jpg) no-repeat center center;
152 }
153 #video-controls.play {
154 background: none;
155 }
156 #video-controls button{
157 width: 100%;
158 height: 100%;
159 background: url(assets/img/play.svg) no-repeat center center;
160 border: none;
161 cursor: pointer; 157 cursor: pointer;
158 background: url(assets/img/play.svg) no-repeat center center;
162 } 159 }
163 #video-controls button.play:hover{ 160 #play-pause.pause:hover{
164 background-size: 60px 60px; 161 background-size: 60px 60px;
165 } 162 }
166 #video-controls button.play{ 163 #play-pause.pause:active{
167 background: url(assets/img/play.svg) no-repeat center center; 164 background-size: 50px 50px;
165 }
166 #play-pause.pause{
168 background-size: 55px 55px; 167 background-size: 55px 55px;
168 display: block;
169 } 169 }
170 #video-controls button.pause{ 170 #play-pause.play{
171 background: none; 171 display: none;
172 } 172 }
173 .vjs-big-play-button{
174 display: none !important;
175 }
173 176
174 #txt { 177 #txt {
175 position: absolute; 178 position: absolute;
...@@ -186,20 +189,18 @@ ...@@ -186,20 +189,18 @@
186 189
187 <body> 190 <body>
188 <div id="border"> 191 <div id="border">
189 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"> 192 <a id="click-tag" href="javascript:eyeBuild.doClick(0);">
190 <img id="txt" src="assets/img/slice.svg" alt="txt"> 193 <img id="txt" src="assets/img/slice.svg" alt="txt">
191 <video id="video" width="" height="">
192 <source src="assets/vid.mp4" type="video/mp4">
193 Your browser doesn't support HTML5 video.
194 </video>
195 <img id="txt" src="assets/img/overlay.png" style="border-style:none">
196 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
197 </a> 194 </a>
198 <div id="video-controls" class="start"> 195 <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="assets/img/poster2.jpg" data-setup='{"example_option":true}'>
199 <button type="button" id="play-pause" class="play"></button> 196 <source src="../vidA.mp4" type="video/mp4" />
200 </div> 197 <!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
198 <!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
199 </video>
200 <button id="play-pause" class="pause"></button>
201 </div> 201 </div>
202 202
203
203 <!-- jQuery--> 204 <!-- jQuery-->
204 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script> 205 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
205 206
......
...@@ -22,72 +22,77 @@ ...@@ -22,72 +22,77 @@
22 </script> 22 </script>
23 --> 23 -->
24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script> 24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
25 <link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
26 <script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
25 <script type="text/javascript"> 27 <script type="text/javascript">
28
29 /**
30 * This section uses videojs with eyeBuild, tracking plays, clicks, etc.
31 **/
26 window.onload = function() { 32 window.onload = function() {
27 eyeBuild.initialize(); 33 eyeBuild.initialize();
28 window.isVideoClick = false; 34 window.isVideoClick = false;
29 35
30 var videoPlays = 0; 36 //var video = document.getElementsByTagName("video")[0];
31 var v0 = false; 37 var myVideoJsPlayer = videojs('video');
32 var v25 = false; 38 var video = document.querySelector("#video video");
33 var v50 = false;
34 var v75 = false;
35
36 var video = document.getElementById("video");
37 var videoControls = document.getElementById("video-controls");
38 var playButton = document.getElementById("play-pause"); 39 var playButton = document.getElementById("play-pause");
39 playButton.addEventListener("click", function(e) { 40
40 if (video.paused == true) { 41 videojs(video, {}, function(){
41 play(); 42
43 var videoPlays = 0;
44 var v0 = false;
45 var v25 = false;
46 var v50 = false;
47 var v75 = false;
48
49 video.addEventListener("play", function(e) {
42 eyeBuild.doIAT(0); 50 eyeBuild.doIAT(0);
43 } else { 51 videoPlays++;
44 pause(); 52 playButton.setAttribute("class", "play");
53 });
54 video.addEventListener("pause", function(e) {
45 eyeBuild.doIAT(1); 55 eyeBuild.doIAT(1);
46 } 56 playButton.setAttribute("class", "pause");
47 }); 57 });
48 var play = function(){ 58 video.addEventListener("ended", function(e) {
49 video.play(); 59 video.currentTime = 0;
50 videoPlays++; 60 playButton.setAttribute("class", "pause");
51 playButton.setAttribute("class", "pause"); 61 v0 = false;
52 videoControls.setAttribute("class", "play"); 62 v25 = false;
53 } 63 v50 = false;
54 var pause = function(){ 64 v75 = false;
55 video.pause(); 65 eyeBuild.doIAT(9);
56 playButton.setAttribute("class", "play"); 66 });
57 } 67
58 video.addEventListener('ended', function(e){ 68 // track video plays
59 video.currentTime = 0; 69 video.addEventListener('timeupdate', function(e){
60 pause(); 70 var pct = video.currentTime / video.duration *100;
61 videoControls.setAttribute("class", "start"); 71 if (pct > 75 && !v75){
62 playButton.setAttribute("class", "play"); 72 v75 = true;
63 v0 = false; 73 eyeBuild.doIAT(8);
64 v25 = false; 74 }else if (pct > 50 && !v50){
65 v50 = false; 75 v50 = true;
66 v75 = false; 76 eyeBuild.doIAT(7);
67 eyeBuild.doIAT(9); 77 }else if (pct > 25 && !v25){
68 }, false); 78 v25 = true;
69 79 eyeBuild.doIAT(6);
70 // track video plays 80 }else if (pct > 0 && !v0){
71 video.addEventListener('timeupdate', function(e){ 81 v0 = true;
72 var pct = video.currentTime / video.duration *100; 82 eyeBuild.doIAT(5);
73 if (pct > 75 && !v75){ 83 if(videoPlays>1){
74 v75 = true; 84 eyeBuild.doIAT(10);
75 eyeBuild.doIAT(8); 85 }
76 }else if (pct > 50 && !v50){
77 v50 = true;
78 eyeBuild.doIAT(7);
79 }else if (pct > 25 && !v25){
80 v25 = true;
81 eyeBuild.doIAT(6);
82 }else if (pct > 0 && !v0){
83 v0 = true;
84 eyeBuild.doIAT(5);
85 if(videoPlays>1){
86 eyeBuild.doIAT(10);
87 } 86 }
88 } 87 }, false);
89 }, false); 88
89 playButton.addEventListener('click', function(e){
90 myVideoJsPlayer.play();
91 }, false);
92
93 });
90 94
95
91 /* 96 /*
92 var closeButton = document.getElementById("close"); 97 var closeButton = document.getElementById("close");
93 closeButton.addEventListener("click", function(e) { 98 closeButton.addEventListener("click", function(e) {
...@@ -140,36 +145,34 @@ ...@@ -140,36 +145,34 @@
140 background-size: 320px 480px; 145 background-size: 320px 480px;
141 } 146 }
142 147
143 #video, #video-controls{ 148 #video, #play-pause{
144 position: absolute; 149 position: absolute;
145 width: 290px; 150 width: 290px;
146 height: 163px; 151 height: 163px;
147 left:16px; 152 left:16px;
148 top:199px; 153 top:199px;
154 border:none;
149 } 155 }
150 #video-controls.start{ 156 #play-pause{
151 background: url(assets/img/poster3.jpg) no-repeat center center;
152 }
153 #video-controls.play {
154 background: none;
155 }
156 #video-controls button{
157 width: 100%;
158 height: 100%;
159 background: url(assets/img/play.svg) no-repeat center center;
160 border: none;
161 cursor: pointer; 157 cursor: pointer;
158 background: url(assets/img/play.svg) no-repeat center center;
162 } 159 }
163 #video-controls button.play:hover{ 160 #play-pause.pause:hover{
164 background-size: 60px 60px; 161 background-size: 60px 60px;
165 } 162 }
166 #video-controls button.play{ 163 #play-pause.pause:active{
167 background: url(assets/img/play.svg) no-repeat center center; 164 background-size: 50px 50px;
165 }
166 #play-pause.pause{
168 background-size: 55px 55px; 167 background-size: 55px 55px;
168 display: block;
169 } 169 }
170 #video-controls button.pause{ 170 #play-pause.play{
171 background: none; 171 display: none;
172 } 172 }
173 .vjs-big-play-button{
174 display: none !important;
175 }
173 176
174 #txt { 177 #txt {
175 position: absolute; 178 position: absolute;
...@@ -186,20 +189,18 @@ ...@@ -186,20 +189,18 @@
186 189
187 <body> 190 <body>
188 <div id="border"> 191 <div id="border">
189 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"> 192 <a id="click-tag" href="javascript:eyeBuild.doClick(0);">
190 <img id="txt" src="assets/img/slice.svg" alt="txt"> 193 <img id="txt" src="assets/img/slice.svg" alt="txt">
191 <video id="video" width="" height="">
192 <source src="assets/vid.mp4" type="video/mp4">
193 Your browser doesn't support HTML5 video.
194 </video>
195 <img id="txt" src="assets/img/overlay.png" style="border-style:none">
196 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
197 </a> 194 </a>
198 <div id="video-controls" class="start"> 195 <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="assets/img/poster3.jpg" data-setup='{"example_option":true}'>
199 <button type="button" id="play-pause" class="play"></button> 196 <source src="../vidC.mp4" type="video/mp4" />
200 </div> 197 <!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
198 <!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
199 </video>
200 <button id="play-pause" class="pause"></button>
201 </div> 201 </div>
202 202
203
203 <!-- jQuery--> 204 <!-- jQuery-->
204 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script> 205 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
205 206
......
...@@ -22,72 +22,77 @@ ...@@ -22,72 +22,77 @@
22 </script> 22 </script>
23 --> 23 -->
24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script> 24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
25 <link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
26 <script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
25 <script type="text/javascript"> 27 <script type="text/javascript">
28
29 /**
30 * This section uses videojs with eyeBuild, tracking plays, clicks, etc.
31 **/
26 window.onload = function() { 32 window.onload = function() {
27 eyeBuild.initialize(); 33 eyeBuild.initialize();
28 window.isVideoClick = false; 34 window.isVideoClick = false;
29 35
30 var videoPlays = 0; 36 //var video = document.getElementsByTagName("video")[0];
31 var v0 = false; 37 var myVideoJsPlayer = videojs('video');
32 var v25 = false; 38 var video = document.querySelector("#video video");
33 var v50 = false;
34 var v75 = false;
35
36 var video = document.getElementById("video");
37 var videoControls = document.getElementById("video-controls");
38 var playButton = document.getElementById("play-pause"); 39 var playButton = document.getElementById("play-pause");
39 playButton.addEventListener("click", function(e) { 40
40 if (video.paused == true) { 41 videojs(video, {}, function(){
41 play(); 42
43 var videoPlays = 0;
44 var v0 = false;
45 var v25 = false;
46 var v50 = false;
47 var v75 = false;
48
49 video.addEventListener("play", function(e) {
42 eyeBuild.doIAT(0); 50 eyeBuild.doIAT(0);
43 } else { 51 videoPlays++;
44 pause(); 52 playButton.setAttribute("class", "play");
53 });
54 video.addEventListener("pause", function(e) {
45 eyeBuild.doIAT(1); 55 eyeBuild.doIAT(1);
46 } 56 playButton.setAttribute("class", "pause");
47 }); 57 });
48 var play = function(){ 58 video.addEventListener("ended", function(e) {
49 video.play(); 59 video.currentTime = 0;
50 videoPlays++; 60 playButton.setAttribute("class", "pause");
51 playButton.setAttribute("class", "pause"); 61 v0 = false;
52 videoControls.setAttribute("class", "play"); 62 v25 = false;
53 } 63 v50 = false;
54 var pause = function(){ 64 v75 = false;
55 video.pause(); 65 eyeBuild.doIAT(9);
56 playButton.setAttribute("class", "play"); 66 });
57 } 67
58 video.addEventListener('ended', function(e){ 68 // track video plays
59 video.currentTime = 0; 69 video.addEventListener('timeupdate', function(e){
60 pause(); 70 var pct = video.currentTime / video.duration *100;
61 videoControls.setAttribute("class", "start"); 71 if (pct > 75 && !v75){
62 playButton.setAttribute("class", "play"); 72 v75 = true;
63 v0 = false; 73 eyeBuild.doIAT(8);
64 v25 = false; 74 }else if (pct > 50 && !v50){
65 v50 = false; 75 v50 = true;
66 v75 = false; 76 eyeBuild.doIAT(7);
67 eyeBuild.doIAT(9); 77 }else if (pct > 25 && !v25){
68 }, false); 78 v25 = true;
69 79 eyeBuild.doIAT(6);
70 // track video plays 80 }else if (pct > 0 && !v0){
71 video.addEventListener('timeupdate', function(e){ 81 v0 = true;
72 var pct = video.currentTime / video.duration *100; 82 eyeBuild.doIAT(5);
73 if (pct > 75 && !v75){ 83 if(videoPlays>1){
74 v75 = true; 84 eyeBuild.doIAT(10);
75 eyeBuild.doIAT(8); 85 }
76 }else if (pct > 50 && !v50){
77 v50 = true;
78 eyeBuild.doIAT(7);
79 }else if (pct > 25 && !v25){
80 v25 = true;
81 eyeBuild.doIAT(6);
82 }else if (pct > 0 && !v0){
83 v0 = true;
84 eyeBuild.doIAT(5);
85 if(videoPlays>1){
86 eyeBuild.doIAT(10);
87 } 86 }
88 } 87 }, false);
89 }, false); 88
89 playButton.addEventListener('click', function(e){
90 myVideoJsPlayer.play();
91 }, false);
92
93 });
90 94
95
91 /* 96 /*
92 var closeButton = document.getElementById("close"); 97 var closeButton = document.getElementById("close");
93 closeButton.addEventListener("click", function(e) { 98 closeButton.addEventListener("click", function(e) {
...@@ -139,36 +144,34 @@ ...@@ -139,36 +144,34 @@
139 background-size: 768px 432px; 144 background-size: 768px 432px;
140 } 145 }
141 146
142 #video, #video-controls{ 147 #video, #play-pause{
143 position: absolute; 148 position: absolute;
144 width: 710px; 149 width: 710px;
145 height: 401px; 150 height: 401px;
146 left:28px; 151 left:28px;
147 top:476px; 152 top:476px;
153 border:none;
148 } 154 }
149 #video-controls.start{ 155 #play-pause{
150 background: url(assets/img/poster1.jpg) no-repeat center center;
151 }
152 #video-controls.play {
153 background: none;
154 }
155 #video-controls button{
156 width: 100%;
157 height: 100%;
158 background: url(assets/img/play.svg) no-repeat center center;
159 border: none;
160 cursor: pointer; 156 cursor: pointer;
157 background: url(assets/img/play.svg) no-repeat center center;
161 } 158 }
162 #video-controls button.play:hover{ 159 #play-pause.pause:hover{
163 background-size: 60px 60px; 160 background-size: 60px 60px;
164 } 161 }
165 #video-controls button.play{ 162 #play-pause.pause:active{
166 background: url(assets/img/play.svg) no-repeat center center; 163 background-size: 50px 50px;
164 }
165 #play-pause.pause{
167 background-size: 55px 55px; 166 background-size: 55px 55px;
167 display: block;
168 } 168 }
169 #video-controls button.pause{ 169 #play-pause.play{
170 background: none; 170 display: none;
171 } 171 }
172 .vjs-big-play-button{
173 display: none !important;
174 }
172 175
173 #txt { 176 #txt {
174 position: absolute; 177 position: absolute;
...@@ -192,20 +195,19 @@ ...@@ -192,20 +195,19 @@
192 195
193 <body> 196 <body>
194 <div id="border"> 197 <div id="border">
195 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"> 198 <a id="click-tag" href="javascript:eyeBuild.doClick(0);">
196 <img id="txt" src="assets/img/slice.svg" alt="txt"> 199 <img id="txt" src="assets/img/slice.svg" alt="txt">
197 <video id="video" width="" height="">
198 <source src="assets/vid.mp4" type="video/mp4">
199 Your browser doesn't support HTML5 video.
200 </video>
201 <img id="overlay" src="assets/img/overlay.png" style="border-style:none"> 200 <img id="overlay" src="assets/img/overlay.png" style="border-style:none">
202 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
203 </a> 201 </a>
204 <div id="video-controls" class="start"> 202 <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="assets/img/poster1.jpg" data-setup='{"example_option":true}'>
205 <button type="button" id="play-pause" class="play"></button> 203 <source src="../vidA.mp4" type="video/mp4" />
206 </div> 204 <!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
205 <!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
206 </video>
207 <button id="play-pause" class="pause"></button>
207 </div> 208 </div>
208 209
210
209 <!-- jQuery--> 211 <!-- jQuery-->
210 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script> 212 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
211 213
......
...@@ -22,72 +22,77 @@ ...@@ -22,72 +22,77 @@
22 </script> 22 </script>
23 --> 23 -->
24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script> 24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
25 <link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
26 <script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
25 <script type="text/javascript"> 27 <script type="text/javascript">
28
29 /**
30 * This section uses videojs with eyeBuild, tracking plays, clicks, etc.
31 **/
26 window.onload = function() { 32 window.onload = function() {
27 eyeBuild.initialize(); 33 eyeBuild.initialize();
28 window.isVideoClick = false; 34 window.isVideoClick = false;
29 35
30 var videoPlays = 0; 36 //var video = document.getElementsByTagName("video")[0];
31 var v0 = false; 37 var myVideoJsPlayer = videojs('video');
32 var v25 = false; 38 var video = document.querySelector("#video video");
33 var v50 = false;
34 var v75 = false;
35
36 var video = document.getElementById("video");
37 var videoControls = document.getElementById("video-controls");
38 var playButton = document.getElementById("play-pause"); 39 var playButton = document.getElementById("play-pause");
39 playButton.addEventListener("click", function(e) { 40
40 if (video.paused == true) { 41 videojs(video, {}, function(){
41 play(); 42
43 var videoPlays = 0;
44 var v0 = false;
45 var v25 = false;
46 var v50 = false;
47 var v75 = false;
48
49 video.addEventListener("play", function(e) {
42 eyeBuild.doIAT(0); 50 eyeBuild.doIAT(0);
43 } else { 51 videoPlays++;
44 pause(); 52 playButton.setAttribute("class", "play");
53 });
54 video.addEventListener("pause", function(e) {
45 eyeBuild.doIAT(1); 55 eyeBuild.doIAT(1);
46 } 56 playButton.setAttribute("class", "pause");
47 }); 57 });
48 var play = function(){ 58 video.addEventListener("ended", function(e) {
49 video.play(); 59 video.currentTime = 0;
50 videoPlays++; 60 playButton.setAttribute("class", "pause");
51 playButton.setAttribute("class", "pause"); 61 v0 = false;
52 videoControls.setAttribute("class", "play"); 62 v25 = false;
53 } 63 v50 = false;
54 var pause = function(){ 64 v75 = false;
55 video.pause(); 65 eyeBuild.doIAT(9);
56 playButton.setAttribute("class", "play"); 66 });
57 } 67
58 video.addEventListener('ended', function(e){ 68 // track video plays
59 video.currentTime = 0; 69 video.addEventListener('timeupdate', function(e){
60 pause(); 70 var pct = video.currentTime / video.duration *100;
61 videoControls.setAttribute("class", "start"); 71 if (pct > 75 && !v75){
62 playButton.setAttribute("class", "play"); 72 v75 = true;
63 v0 = false; 73 eyeBuild.doIAT(8);
64 v25 = false; 74 }else if (pct > 50 && !v50){
65 v50 = false; 75 v50 = true;
66 v75 = false; 76 eyeBuild.doIAT(7);
67 eyeBuild.doIAT(9); 77 }else if (pct > 25 && !v25){
68 }, false); 78 v25 = true;
69 79 eyeBuild.doIAT(6);
70 // track video plays 80 }else if (pct > 0 && !v0){
71 video.addEventListener('timeupdate', function(e){ 81 v0 = true;
72 var pct = video.currentTime / video.duration *100; 82 eyeBuild.doIAT(5);
73 if (pct > 75 && !v75){ 83 if(videoPlays>1){
74 v75 = true; 84 eyeBuild.doIAT(10);
75 eyeBuild.doIAT(8); 85 }
76 }else if (pct > 50 && !v50){
77 v50 = true;
78 eyeBuild.doIAT(7);
79 }else if (pct > 25 && !v25){
80 v25 = true;
81 eyeBuild.doIAT(6);
82 }else if (pct > 0 && !v0){
83 v0 = true;
84 eyeBuild.doIAT(5);
85 if(videoPlays>1){
86 eyeBuild.doIAT(10);
87 } 86 }
88 } 87 }, false);
89 }, false); 88
89 playButton.addEventListener('click', function(e){
90 myVideoJsPlayer.play();
91 }, false);
92
93 });
90 94
95
91 /* 96 /*
92 var closeButton = document.getElementById("close"); 97 var closeButton = document.getElementById("close");
93 closeButton.addEventListener("click", function(e) { 98 closeButton.addEventListener("click", function(e) {
...@@ -139,36 +144,34 @@ ...@@ -139,36 +144,34 @@
139 background-size: 768px 432px; 144 background-size: 768px 432px;
140 } 145 }
141 146
142 #video, #video-controls{ 147 #video, #play-pause{
143 position: absolute; 148 position: absolute;
144 width: 710px; 149 width: 710px;
145 height: 401px; 150 height: 401px;
146 left:28px; 151 left:28px;
147 top:476px; 152 top:476px;
153 border:none;
148 } 154 }
149 #video-controls.start{ 155 #play-pause{
150 background: url(assets/img/poster2.jpg) no-repeat center center;
151 }
152 #video-controls.play {
153 background: none;
154 }
155 #video-controls button{
156 width: 100%;
157 height: 100%;
158 background: url(assets/img/play.svg) no-repeat center center;
159 border: none;
160 cursor: pointer; 156 cursor: pointer;
157 background: url(assets/img/play.svg) no-repeat center center;
161 } 158 }
162 #video-controls button.play:hover{ 159 #play-pause.pause:hover{
163 background-size: 60px 60px; 160 background-size: 60px 60px;
164 } 161 }
165 #video-controls button.play{ 162 #play-pause.pause:active{
166 background: url(assets/img/play.svg) no-repeat center center; 163 background-size: 50px 50px;
164 }
165 #play-pause.pause{
167 background-size: 55px 55px; 166 background-size: 55px 55px;
167 display: block;
168 } 168 }
169 #video-controls button.pause{ 169 #play-pause.play{
170 background: none; 170 display: none;
171 } 171 }
172 .vjs-big-play-button{
173 display: none !important;
174 }
172 175
173 #txt { 176 #txt {
174 position: absolute; 177 position: absolute;
...@@ -192,20 +195,19 @@ ...@@ -192,20 +195,19 @@
192 195
193 <body> 196 <body>
194 <div id="border"> 197 <div id="border">
195 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"> 198 <a id="click-tag" href="javascript:eyeBuild.doClick(0);">
196 <img id="txt" src="assets/img/slice.svg" alt="txt"> 199 <img id="txt" src="assets/img/slice.svg" alt="txt">
197 <video id="video" width="" height="">
198 <source src="assets/vid.mp4" type="video/mp4">
199 Your browser doesn't support HTML5 video.
200 </video>
201 <img id="overlay" src="assets/img/overlay.png" style="border-style:none"> 200 <img id="overlay" src="assets/img/overlay.png" style="border-style:none">
202 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
203 </a> 201 </a>
204 <div id="video-controls" class="start"> 202 <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="assets/img/poster2.jpg" data-setup='{"example_option":true}'>
205 <button type="button" id="play-pause" class="play"></button> 203 <source src="../vidA.mp4" type="video/mp4" />
206 </div> 204 <!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
205 <!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
206 </video>
207 <button id="play-pause" class="pause"></button>
207 </div> 208 </div>
208 209
210
209 <!-- jQuery--> 211 <!-- jQuery-->
210 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script> 212 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
211 213
......
...@@ -22,72 +22,77 @@ ...@@ -22,72 +22,77 @@
22 </script> 22 </script>
23 --> 23 -->
24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script> 24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
25 <link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
26 <script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
25 <script type="text/javascript"> 27 <script type="text/javascript">
28
29 /**
30 * This section uses videojs with eyeBuild, tracking plays, clicks, etc.
31 **/
26 window.onload = function() { 32 window.onload = function() {
27 eyeBuild.initialize(); 33 eyeBuild.initialize();
28 window.isVideoClick = false; 34 window.isVideoClick = false;
29 35
30 var videoPlays = 0; 36 //var video = document.getElementsByTagName("video")[0];
31 var v0 = false; 37 var myVideoJsPlayer = videojs('video');
32 var v25 = false; 38 var video = document.querySelector("#video video");
33 var v50 = false;
34 var v75 = false;
35
36 var video = document.getElementById("video");
37 var videoControls = document.getElementById("video-controls");
38 var playButton = document.getElementById("play-pause"); 39 var playButton = document.getElementById("play-pause");
39 playButton.addEventListener("click", function(e) { 40
40 if (video.paused == true) { 41 videojs(video, {}, function(){
41 play(); 42
43 var videoPlays = 0;
44 var v0 = false;
45 var v25 = false;
46 var v50 = false;
47 var v75 = false;
48
49 video.addEventListener("play", function(e) {
42 eyeBuild.doIAT(0); 50 eyeBuild.doIAT(0);
43 } else { 51 videoPlays++;
44 pause(); 52 playButton.setAttribute("class", "play");
53 });
54 video.addEventListener("pause", function(e) {
45 eyeBuild.doIAT(1); 55 eyeBuild.doIAT(1);
46 } 56 playButton.setAttribute("class", "pause");
47 }); 57 });
48 var play = function(){ 58 video.addEventListener("ended", function(e) {
49 video.play(); 59 video.currentTime = 0;
50 videoPlays++; 60 playButton.setAttribute("class", "pause");
51 playButton.setAttribute("class", "pause"); 61 v0 = false;
52 videoControls.setAttribute("class", "play"); 62 v25 = false;
53 } 63 v50 = false;
54 var pause = function(){ 64 v75 = false;
55 video.pause(); 65 eyeBuild.doIAT(9);
56 playButton.setAttribute("class", "play"); 66 });
57 } 67
58 video.addEventListener('ended', function(e){ 68 // track video plays
59 video.currentTime = 0; 69 video.addEventListener('timeupdate', function(e){
60 pause(); 70 var pct = video.currentTime / video.duration *100;
61 videoControls.setAttribute("class", "start"); 71 if (pct > 75 && !v75){
62 playButton.setAttribute("class", "play"); 72 v75 = true;
63 v0 = false; 73 eyeBuild.doIAT(8);
64 v25 = false; 74 }else if (pct > 50 && !v50){
65 v50 = false; 75 v50 = true;
66 v75 = false; 76 eyeBuild.doIAT(7);
67 eyeBuild.doIAT(9); 77 }else if (pct > 25 && !v25){
68 }, false); 78 v25 = true;
69 79 eyeBuild.doIAT(6);
70 // track video plays 80 }else if (pct > 0 && !v0){
71 video.addEventListener('timeupdate', function(e){ 81 v0 = true;
72 var pct = video.currentTime / video.duration *100; 82 eyeBuild.doIAT(5);
73 if (pct > 75 && !v75){ 83 if(videoPlays>1){
74 v75 = true; 84 eyeBuild.doIAT(10);
75 eyeBuild.doIAT(8); 85 }
76 }else if (pct > 50 && !v50){
77 v50 = true;
78 eyeBuild.doIAT(7);
79 }else if (pct > 25 && !v25){
80 v25 = true;
81 eyeBuild.doIAT(6);
82 }else if (pct > 0 && !v0){
83 v0 = true;
84 eyeBuild.doIAT(5);
85 if(videoPlays>1){
86 eyeBuild.doIAT(10);
87 } 86 }
88 } 87 }, false);
89 }, false); 88
89 playButton.addEventListener('click', function(e){
90 myVideoJsPlayer.play();
91 }, false);
92
93 });
90 94
95
91 /* 96 /*
92 var closeButton = document.getElementById("close"); 97 var closeButton = document.getElementById("close");
93 closeButton.addEventListener("click", function(e) { 98 closeButton.addEventListener("click", function(e) {
...@@ -139,36 +144,34 @@ ...@@ -139,36 +144,34 @@
139 background-size: 768px 432px; 144 background-size: 768px 432px;
140 } 145 }
141 146
142 #video, #video-controls{ 147 #video, #play-pause{
143 position: absolute; 148 position: absolute;
144 width: 710px; 149 width: 710px;
145 height: 401px; 150 height: 401px;
146 left:28px; 151 left:28px;
147 top:476px; 152 top:476px;
153 border:none;
148 } 154 }
149 #video-controls.start{ 155 #play-pause{
150 background: url(assets/img/poster3.jpg) no-repeat center center;
151 }
152 #video-controls.play {
153 background: none;
154 }
155 #video-controls button{
156 width: 100%;
157 height: 100%;
158 background: url(assets/img/play.svg) no-repeat center center;
159 border: none;
160 cursor: pointer; 156 cursor: pointer;
157 background: url(assets/img/play.svg) no-repeat center center;
161 } 158 }
162 #video-controls button.play:hover{ 159 #play-pause.pause:hover{
163 background-size: 60px 60px; 160 background-size: 60px 60px;
164 } 161 }
165 #video-controls button.play{ 162 #play-pause.pause:active{
166 background: url(assets/img/play.svg) no-repeat center center; 163 background-size: 50px 50px;
164 }
165 #play-pause.pause{
167 background-size: 55px 55px; 166 background-size: 55px 55px;
167 display: block;
168 } 168 }
169 #video-controls button.pause{ 169 #play-pause.play{
170 background: none; 170 display: none;
171 } 171 }
172 .vjs-big-play-button{
173 display: none !important;
174 }
172 175
173 #txt { 176 #txt {
174 position: absolute; 177 position: absolute;
...@@ -192,20 +195,19 @@ ...@@ -192,20 +195,19 @@
192 195
193 <body> 196 <body>
194 <div id="border"> 197 <div id="border">
195 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"> 198 <a id="click-tag" href="javascript:eyeBuild.doClick(0);">
196 <img id="txt" src="assets/img/slice.svg" alt="txt"> 199 <img id="txt" src="assets/img/slice.svg" alt="txt">
197 <video id="video" width="" height="">
198 <source src="assets/vid.mp4" type="video/mp4">
199 Your browser doesn't support HTML5 video.
200 </video>
201 <img id="overlay" src="assets/img/overlay.png" style="border-style:none"> 200 <img id="overlay" src="assets/img/overlay.png" style="border-style:none">
202 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
203 </a> 201 </a>
204 <div id="video-controls" class="start"> 202 <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="assets/img/poster3.jpg" data-setup='{"example_option":true}'>
205 <button type="button" id="play-pause" class="play"></button> 203 <source src="../vidC.mp4" type="video/mp4" />
206 </div> 204 <!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
205 <!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
206 </video>
207 <button id="play-pause" class="pause"></button>
207 </div> 208 </div>
208 209
210
209 <!-- jQuery--> 211 <!-- jQuery-->
210 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script> 212 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
211 213
......
...@@ -22,72 +22,77 @@ ...@@ -22,72 +22,77 @@
22 </script> 22 </script>
23 --> 23 -->
24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script> 24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
25 <link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
26 <script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
25 <script type="text/javascript"> 27 <script type="text/javascript">
28
29 /**
30 * This section uses videojs with eyeBuild, tracking plays, clicks, etc.
31 **/
26 window.onload = function() { 32 window.onload = function() {
27 eyeBuild.initialize(); 33 eyeBuild.initialize();
28 window.isVideoClick = false; 34 window.isVideoClick = false;
29 35
30 var videoPlays = 0; 36 //var video = document.getElementsByTagName("video")[0];
31 var v0 = false; 37 var myVideoJsPlayer = videojs('video');
32 var v25 = false; 38 var video = document.querySelector("#video video");
33 var v50 = false;
34 var v75 = false;
35
36 var video = document.getElementById("video");
37 var videoControls = document.getElementById("video-controls");
38 var playButton = document.getElementById("play-pause"); 39 var playButton = document.getElementById("play-pause");
39 playButton.addEventListener("click", function(e) { 40
40 if (video.paused == true) { 41 videojs(video, {}, function(){
41 play(); 42
43 var videoPlays = 0;
44 var v0 = false;
45 var v25 = false;
46 var v50 = false;
47 var v75 = false;
48
49 video.addEventListener("play", function(e) {
42 eyeBuild.doIAT(0); 50 eyeBuild.doIAT(0);
43 } else { 51 videoPlays++;
44 pause(); 52 playButton.setAttribute("class", "play");
53 });
54 video.addEventListener("pause", function(e) {
45 eyeBuild.doIAT(1); 55 eyeBuild.doIAT(1);
46 } 56 playButton.setAttribute("class", "pause");
47 }); 57 });
48 var play = function(){ 58 video.addEventListener("ended", function(e) {
49 video.play(); 59 video.currentTime = 0;
50 videoPlays++; 60 playButton.setAttribute("class", "pause");
51 playButton.setAttribute("class", "pause"); 61 v0 = false;
52 videoControls.setAttribute("class", "play"); 62 v25 = false;
53 } 63 v50 = false;
54 var pause = function(){ 64 v75 = false;
55 video.pause(); 65 eyeBuild.doIAT(9);
56 playButton.setAttribute("class", "play"); 66 });
57 } 67
58 video.addEventListener('ended', function(e){ 68 // track video plays
59 video.currentTime = 0; 69 video.addEventListener('timeupdate', function(e){
60 pause(); 70 var pct = video.currentTime / video.duration *100;
61 videoControls.setAttribute("class", "start"); 71 if (pct > 75 && !v75){
62 playButton.setAttribute("class", "play"); 72 v75 = true;
63 v0 = false; 73 eyeBuild.doIAT(8);
64 v25 = false; 74 }else if (pct > 50 && !v50){
65 v50 = false; 75 v50 = true;
66 v75 = false; 76 eyeBuild.doIAT(7);
67 eyeBuild.doIAT(9); 77 }else if (pct > 25 && !v25){
68 }, false); 78 v25 = true;
69 79 eyeBuild.doIAT(6);
70 // track video plays 80 }else if (pct > 0 && !v0){
71 video.addEventListener('timeupdate', function(e){ 81 v0 = true;
72 var pct = video.currentTime / video.duration *100; 82 eyeBuild.doIAT(5);
73 if (pct > 75 && !v75){ 83 if(videoPlays>1){
74 v75 = true; 84 eyeBuild.doIAT(10);
75 eyeBuild.doIAT(8); 85 }
76 }else if (pct > 50 && !v50){
77 v50 = true;
78 eyeBuild.doIAT(7);
79 }else if (pct > 25 && !v25){
80 v25 = true;
81 eyeBuild.doIAT(6);
82 }else if (pct > 0 && !v0){
83 v0 = true;
84 eyeBuild.doIAT(5);
85 if(videoPlays>1){
86 eyeBuild.doIAT(10);
87 } 86 }
88 } 87 }, false);
89 }, false); 88
89 playButton.addEventListener('click', function(e){
90 myVideoJsPlayer.play();
91 }, false);
92
93 });
90 94
95
91 /* 96 /*
92 var closeButton = document.getElementById("close"); 97 var closeButton = document.getElementById("close");
93 closeButton.addEventListener("click", function(e) { 98 closeButton.addEventListener("click", function(e) {
...@@ -139,36 +144,34 @@ ...@@ -139,36 +144,34 @@
139 background-size: 561px 250px; 144 background-size: 561px 250px;
140 } 145 }
141 146
142 #video, #video-controls{ 147 #video, #play-pause{
143 position: absolute; 148 position: absolute;
144 width: 382px; 149 width: 382px;
145 height: 215px; 150 height: 215px;
146 left:570px; 151 left:570px;
147 top:17px; 152 top:17px;
153 border:none;
148 } 154 }
149 #video-controls.start{ 155 #play-pause{
150 background: url(assets/img/poster1.jpg) no-repeat center center;
151 }
152 #video-controls.play {
153 background: none;
154 }
155 #video-controls button{
156 width: 100%;
157 height: 100%;
158 background: url(assets/img/play.svg) no-repeat center center;
159 border: none;
160 cursor: pointer; 156 cursor: pointer;
157 background: url(assets/img/play.svg) no-repeat center center;
161 } 158 }
162 #video-controls button.play:hover{ 159 #play-pause.pause:hover{
163 background-size: 60px 60px; 160 background-size: 60px 60px;
164 } 161 }
165 #video-controls button.play{ 162 #play-pause.pause:active{
166 background: url(assets/img/play.svg) no-repeat center center; 163 background-size: 50px 50px;
164 }
165 #play-pause.pause{
167 background-size: 55px 55px; 166 background-size: 55px 55px;
167 display: block;
168 } 168 }
169 #video-controls button.pause{ 169 #play-pause.play{
170 background: none; 170 display: none;
171 } 171 }
172 .vjs-big-play-button{
173 display: none !important;
174 }
172 175
173 #txt { 176 #txt {
174 position: absolute; 177 position: absolute;
...@@ -185,17 +188,15 @@ ...@@ -185,17 +188,15 @@
185 188
186 <body> 189 <body>
187 <div id="border"> 190 <div id="border">
188 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"> 191 <a id="click-tag" href="javascript:eyeBuild.doClick(0);">
189 <img id="txt" src="assets/img/slice.svg" alt="txt"> 192 <img id="txt" src="assets/img/slice.svg" alt="txt">
190 <video id="video" width="" height="">
191 <source src="assets/vid.mp4" type="video/mp4">
192 Your browser doesn't support HTML5 video.
193 </video>
194 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
195 </a> 193 </a>
196 <div id="video-controls" class="start"> 194 <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="assets/img/poster1.jpg" data-setup='{"example_option":true}'>
197 <button type="button" id="play-pause" class="play"></button> 195 <source src="../vidA.mp4" type="video/mp4" />
198 </div> 196 <!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
197 <!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
198 </video>
199 <button id="play-pause" class="pause"></button>
199 </div> 200 </div>
200 201
201 <!-- jQuery--> 202 <!-- jQuery-->
......
...@@ -22,72 +22,77 @@ ...@@ -22,72 +22,77 @@
22 </script> 22 </script>
23 --> 23 -->
24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script> 24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
25 <link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
26 <script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
25 <script type="text/javascript"> 27 <script type="text/javascript">
28
29 /**
30 * This section uses videojs with eyeBuild, tracking plays, clicks, etc.
31 **/
26 window.onload = function() { 32 window.onload = function() {
27 eyeBuild.initialize(); 33 eyeBuild.initialize();
28 window.isVideoClick = false; 34 window.isVideoClick = false;
29 35
30 var videoPlays = 0; 36 //var video = document.getElementsByTagName("video")[0];
31 var v0 = false; 37 var myVideoJsPlayer = videojs('video');
32 var v25 = false; 38 var video = document.querySelector("#video video");
33 var v50 = false;
34 var v75 = false;
35
36 var video = document.getElementById("video");
37 var videoControls = document.getElementById("video-controls");
38 var playButton = document.getElementById("play-pause"); 39 var playButton = document.getElementById("play-pause");
39 playButton.addEventListener("click", function(e) { 40
40 if (video.paused == true) { 41 videojs(video, {}, function(){
41 play(); 42
43 var videoPlays = 0;
44 var v0 = false;
45 var v25 = false;
46 var v50 = false;
47 var v75 = false;
48
49 video.addEventListener("play", function(e) {
42 eyeBuild.doIAT(0); 50 eyeBuild.doIAT(0);
43 } else { 51 videoPlays++;
44 pause(); 52 playButton.setAttribute("class", "play");
53 });
54 video.addEventListener("pause", function(e) {
45 eyeBuild.doIAT(1); 55 eyeBuild.doIAT(1);
46 } 56 playButton.setAttribute("class", "pause");
47 }); 57 });
48 var play = function(){ 58 video.addEventListener("ended", function(e) {
49 video.play(); 59 video.currentTime = 0;
50 videoPlays++; 60 playButton.setAttribute("class", "pause");
51 playButton.setAttribute("class", "pause"); 61 v0 = false;
52 videoControls.setAttribute("class", "play"); 62 v25 = false;
53 } 63 v50 = false;
54 var pause = function(){ 64 v75 = false;
55 video.pause(); 65 eyeBuild.doIAT(9);
56 playButton.setAttribute("class", "play"); 66 });
57 } 67
58 video.addEventListener('ended', function(e){ 68 // track video plays
59 video.currentTime = 0; 69 video.addEventListener('timeupdate', function(e){
60 pause(); 70 var pct = video.currentTime / video.duration *100;
61 videoControls.setAttribute("class", "start"); 71 if (pct > 75 && !v75){
62 playButton.setAttribute("class", "play"); 72 v75 = true;
63 v0 = false; 73 eyeBuild.doIAT(8);
64 v25 = false; 74 }else if (pct > 50 && !v50){
65 v50 = false; 75 v50 = true;
66 v75 = false; 76 eyeBuild.doIAT(7);
67 eyeBuild.doIAT(9); 77 }else if (pct > 25 && !v25){
68 }, false); 78 v25 = true;
69 79 eyeBuild.doIAT(6);
70 // track video plays 80 }else if (pct > 0 && !v0){
71 video.addEventListener('timeupdate', function(e){ 81 v0 = true;
72 var pct = video.currentTime / video.duration *100; 82 eyeBuild.doIAT(5);
73 if (pct > 75 && !v75){ 83 if(videoPlays>1){
74 v75 = true; 84 eyeBuild.doIAT(10);
75 eyeBuild.doIAT(8); 85 }
76 }else if (pct > 50 && !v50){
77 v50 = true;
78 eyeBuild.doIAT(7);
79 }else if (pct > 25 && !v25){
80 v25 = true;
81 eyeBuild.doIAT(6);
82 }else if (pct > 0 && !v0){
83 v0 = true;
84 eyeBuild.doIAT(5);
85 if(videoPlays>1){
86 eyeBuild.doIAT(10);
87 } 86 }
88 } 87 }, false);
89 }, false); 88
89 playButton.addEventListener('click', function(e){
90 myVideoJsPlayer.play();
91 }, false);
92
93 });
90 94
95
91 /* 96 /*
92 var closeButton = document.getElementById("close"); 97 var closeButton = document.getElementById("close");
93 closeButton.addEventListener("click", function(e) { 98 closeButton.addEventListener("click", function(e) {
...@@ -139,36 +144,34 @@ ...@@ -139,36 +144,34 @@
139 background-size: 561px 250px; 144 background-size: 561px 250px;
140 } 145 }
141 146
142 #video, #video-controls{ 147 #video, #play-pause{
143 position: absolute; 148 position: absolute;
144 width: 382px; 149 width: 382px;
145 height: 215px; 150 height: 215px;
146 left:570px; 151 left:570px;
147 top:17px; 152 top:17px;
153 border:none;
148 } 154 }
149 #video-controls.start{ 155 #play-pause{
150 background: url(assets/img/poster2.jpg) no-repeat center center;
151 }
152 #video-controls.play {
153 background: none;
154 }
155 #video-controls button{
156 width: 100%;
157 height: 100%;
158 background: url(assets/img/play.svg) no-repeat center center;
159 border: none;
160 cursor: pointer; 156 cursor: pointer;
157 background: url(assets/img/play.svg) no-repeat center center;
161 } 158 }
162 #video-controls button.play:hover{ 159 #play-pause.pause:hover{
163 background-size: 60px 60px; 160 background-size: 60px 60px;
164 } 161 }
165 #video-controls button.play{ 162 #play-pause.pause:active{
166 background: url(assets/img/play.svg) no-repeat center center; 163 background-size: 50px 50px;
164 }
165 #play-pause.pause{
167 background-size: 55px 55px; 166 background-size: 55px 55px;
167 display: block;
168 } 168 }
169 #video-controls button.pause{ 169 #play-pause.play{
170 background: none; 170 display: none;
171 } 171 }
172 .vjs-big-play-button{
173 display: none !important;
174 }
172 175
173 #txt { 176 #txt {
174 position: absolute; 177 position: absolute;
...@@ -185,17 +188,15 @@ ...@@ -185,17 +188,15 @@
185 188
186 <body> 189 <body>
187 <div id="border"> 190 <div id="border">
188 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"> 191 <a id="click-tag" href="javascript:eyeBuild.doClick(0);">
189 <img id="txt" src="assets/img/slice.svg" alt="txt"> 192 <img id="txt" src="assets/img/slice.svg" alt="txt">
190 <video id="video" width="" height="">
191 <source src="assets/vid.mp4" type="video/mp4">
192 Your browser doesn't support HTML5 video.
193 </video>
194 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
195 </a> 193 </a>
196 <div id="video-controls" class="start"> 194 <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="assets/img/poster2.jpg" data-setup='{"example_option":true}'>
197 <button type="button" id="play-pause" class="play"></button> 195 <source src="../vidA.mp4" type="video/mp4" />
198 </div> 196 <!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
197 <!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
198 </video>
199 <button id="play-pause" class="pause"></button>
199 </div> 200 </div>
200 201
201 <!-- jQuery--> 202 <!-- jQuery-->
......
...@@ -22,72 +22,77 @@ ...@@ -22,72 +22,77 @@
22 </script> 22 </script>
23 --> 23 -->
24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script> 24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
25 <link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
26 <script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
25 <script type="text/javascript"> 27 <script type="text/javascript">
28
29 /**
30 * This section uses videojs with eyeBuild, tracking plays, clicks, etc.
31 **/
26 window.onload = function() { 32 window.onload = function() {
27 eyeBuild.initialize(); 33 eyeBuild.initialize();
28 window.isVideoClick = false; 34 window.isVideoClick = false;
29 35
30 var videoPlays = 0; 36 //var video = document.getElementsByTagName("video")[0];
31 var v0 = false; 37 var myVideoJsPlayer = videojs('video');
32 var v25 = false; 38 var video = document.querySelector("#video video");
33 var v50 = false;
34 var v75 = false;
35
36 var video = document.getElementById("video");
37 var videoControls = document.getElementById("video-controls");
38 var playButton = document.getElementById("play-pause"); 39 var playButton = document.getElementById("play-pause");
39 playButton.addEventListener("click", function(e) { 40
40 if (video.paused == true) { 41 videojs(video, {}, function(){
41 play(); 42
43 var videoPlays = 0;
44 var v0 = false;
45 var v25 = false;
46 var v50 = false;
47 var v75 = false;
48
49 video.addEventListener("play", function(e) {
42 eyeBuild.doIAT(0); 50 eyeBuild.doIAT(0);
43 } else { 51 videoPlays++;
44 pause(); 52 playButton.setAttribute("class", "play");
53 });
54 video.addEventListener("pause", function(e) {
45 eyeBuild.doIAT(1); 55 eyeBuild.doIAT(1);
46 } 56 playButton.setAttribute("class", "pause");
47 }); 57 });
48 var play = function(){ 58 video.addEventListener("ended", function(e) {
49 video.play(); 59 video.currentTime = 0;
50 videoPlays++; 60 playButton.setAttribute("class", "pause");
51 playButton.setAttribute("class", "pause"); 61 v0 = false;
52 videoControls.setAttribute("class", "play"); 62 v25 = false;
53 } 63 v50 = false;
54 var pause = function(){ 64 v75 = false;
55 video.pause(); 65 eyeBuild.doIAT(9);
56 playButton.setAttribute("class", "play"); 66 });
57 } 67
58 video.addEventListener('ended', function(e){ 68 // track video plays
59 video.currentTime = 0; 69 video.addEventListener('timeupdate', function(e){
60 pause(); 70 var pct = video.currentTime / video.duration *100;
61 videoControls.setAttribute("class", "start"); 71 if (pct > 75 && !v75){
62 playButton.setAttribute("class", "play"); 72 v75 = true;
63 v0 = false; 73 eyeBuild.doIAT(8);
64 v25 = false; 74 }else if (pct > 50 && !v50){
65 v50 = false; 75 v50 = true;
66 v75 = false; 76 eyeBuild.doIAT(7);
67 eyeBuild.doIAT(9); 77 }else if (pct > 25 && !v25){
68 }, false); 78 v25 = true;
69 79 eyeBuild.doIAT(6);
70 // track video plays 80 }else if (pct > 0 && !v0){
71 video.addEventListener('timeupdate', function(e){ 81 v0 = true;
72 var pct = video.currentTime / video.duration *100; 82 eyeBuild.doIAT(5);
73 if (pct > 75 && !v75){ 83 if(videoPlays>1){
74 v75 = true; 84 eyeBuild.doIAT(10);
75 eyeBuild.doIAT(8); 85 }
76 }else if (pct > 50 && !v50){
77 v50 = true;
78 eyeBuild.doIAT(7);
79 }else if (pct > 25 && !v25){
80 v25 = true;
81 eyeBuild.doIAT(6);
82 }else if (pct > 0 && !v0){
83 v0 = true;
84 eyeBuild.doIAT(5);
85 if(videoPlays>1){
86 eyeBuild.doIAT(10);
87 } 86 }
88 } 87 }, false);
89 }, false); 88
89 playButton.addEventListener('click', function(e){
90 myVideoJsPlayer.play();
91 }, false);
92
93 });
90 94
95
91 /* 96 /*
92 var closeButton = document.getElementById("close"); 97 var closeButton = document.getElementById("close");
93 closeButton.addEventListener("click", function(e) { 98 closeButton.addEventListener("click", function(e) {
...@@ -135,40 +140,38 @@ ...@@ -135,40 +140,38 @@
135 overflow: hidden; 140 overflow: hidden;
136 cursor: pointer; 141 cursor: pointer;
137 box-sizing: border-box; 142 box-sizing: border-box;
138 background: url(assets/img/back2.jpg) no-repeat #000; 143 background: url(assets/img/back3.jpg) no-repeat #000;
139 background-size: 561px 250px; 144 background-size: 561px 250px;
140 } 145 }
141 146
142 #video, #video-controls{ 147 #video, #play-pause{
143 position: absolute; 148 position: absolute;
144 width: 382px; 149 width: 382px;
145 height: 215px; 150 height: 215px;
146 left:570px; 151 left:570px;
147 top:17px; 152 top:17px;
153 border:none;
148 } 154 }
149 #video-controls.start{ 155 #play-pause{
150 background: url(assets/img/poster2.jpg) no-repeat center center;
151 }
152 #video-controls.play {
153 background: none;
154 }
155 #video-controls button{
156 width: 100%;
157 height: 100%;
158 background: url(assets/img/play.svg) no-repeat center center;
159 border: none;
160 cursor: pointer; 156 cursor: pointer;
157 background: url(assets/img/play.svg) no-repeat center center;
161 } 158 }
162 #video-controls button.play:hover{ 159 #play-pause.pause:hover{
163 background-size: 60px 60px; 160 background-size: 60px 60px;
164 } 161 }
165 #video-controls button.play{ 162 #play-pause.pause:active{
166 background: url(assets/img/play.svg) no-repeat center center; 163 background-size: 50px 50px;
164 }
165 #play-pause.pause{
167 background-size: 55px 55px; 166 background-size: 55px 55px;
167 display: block;
168 } 168 }
169 #video-controls button.pause{ 169 #play-pause.play{
170 background: none; 170 display: none;
171 } 171 }
172 .vjs-big-play-button{
173 display: none !important;
174 }
172 175
173 #txt { 176 #txt {
174 position: absolute; 177 position: absolute;
...@@ -185,17 +188,15 @@ ...@@ -185,17 +188,15 @@
185 188
186 <body> 189 <body>
187 <div id="border"> 190 <div id="border">
188 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"> 191 <a id="click-tag" href="javascript:eyeBuild.doClick(0);">
189 <img id="txt" src="assets/img/slice.svg" alt="txt"> 192 <img id="txt" src="assets/img/slice.svg" alt="txt">
190 <video id="video" width="" height="">
191 <source src="assets/vid.mp4" type="video/mp4">
192 Your browser doesn't support HTML5 video.
193 </video>
194 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
195 </a> 193 </a>
196 <div id="video-controls" class="start"> 194 <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="assets/img/poster3.jpg" data-setup='{"example_option":true}'>
197 <button type="button" id="play-pause" class="play"></button> 195 <source src="../vidC.mp4" type="video/mp4" />
198 </div> 196 <!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
197 <!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
198 </video>
199 <button id="play-pause" class="pause"></button>
199 </div> 200 </div>
200 201
201 <!-- jQuery--> 202 <!-- jQuery-->
......