Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
f4568850 by Dan Rempel
Options

CWL 2016 Fall ad Add mute button. Clean up code.

1 parent fba414c9
Inline Side-by-side
Showing 5 changed files with 273 additions and 13 deletions
1 <svg xmlns="http://www.w3.org/2000/svg" width="83.27" height="83.27" viewBox="0 0 83.27 83.27"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>mute-un</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><polygon class="cls-3" points="19.11 35.14 19.11 50.24 29.17 50.24 41.76 62.82 41.76 22.55 29.17 35.14 19.11 35.14"/><path class="cls-3" d="M46.79,59.71a18,18,0,0,0,0-34.24V20.22a23.11,23.11,0,0,1,0,44.86Z"/><path class="cls-3" d="M46.79,46.33a6.69,6.69,0,0,0,0-7.44V32.23a11.79,11.79,0,0,1,0,20.78Z"/></g></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg xmlns="http://www.w3.org/2000/svg" width="83.27" height="83.27" viewBox="0 0 83.27 83.27"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>mute</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><g id="volume-off"><path class="cls-3" d="M53.08,42.69a10.93,10.93,0,0,0-6.29-10.07v5.54l6.29,6.29Zm6.29,0a18.9,18.9,0,0,1-1.26,6.54L61.89,53a21.18,21.18,0,0,0,2.52-10.57A22.69,22.69,0,0,0,46.79,20.29v5.28A18.14,18.14,0,0,1,59.37,42.69ZM22.38,20l-3.27,3.27L30.94,35.14H19.11v15.1H29.17L41.76,62.82V46L52.58,56.78a21,21,0,0,1-5.79,3v5.28a21.49,21.49,0,0,0,9.31-4.53l5,5,3.27-3.27L41.76,39.67Zm19.38,2.52-5.28,5.28,5.28,5.28Z"/></g></g></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg xmlns="http://www.w3.org/2000/svg" width="83.27" height="83.27" viewBox="0 0 83.27 83.27"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>pause</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><rect class="cls-3" x="26.26" y="23.5" width="10.32" height="36.42"/><rect class="cls-3" x="46.9" y="23.5" width="10.32" height="36.42"/></g></g></g></svg>
...\ 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 </script>
22 -->
23 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
24 <script type="text/javascript">
25 window.onload = function() {
26 eyeBuild.initialize();
27 window.isVideoClick = false;
28
29 var videoPlays = 0;
30 var v0 = false;
31 var v25 = false;
32 var v50 = false;
33 var v75 = false;
34
35 var video = document.getElementById("video");
36 var videoControls = document.getElementById("video-controls");
37 var playButton = document.getElementById("play-pause");
38 playButton.addEventListener("click", function(e) {
39 if (video.paused == true) {
40 play();
41 eyeBuild.doIAT(0);
42 } else {
43 pause();
44 eyeBuild.doIAT(1);
45 }
46 });
47 var play = function(){
48 video.play();
49 videoPlays++;
50 playButton.setAttribute("class", "pause");
51 videoControls.setAttribute("class", "play");
52 }
53 var pause = function(){
54 video.pause();
55 playButton.setAttribute("class", "play");
56 }
57 video.addEventListener('ended', function(e){
58 video.currentTime = 0;
59 pause();
60 videoControls.setAttribute("class", "start");
61 playButton.setAttribute("class", "play");
62 v0 = false;
63 v25 = false;
64 v50 = false;
65 v75 = false;
66 eyeBuild.doIAT(9);
67 }, false);
68
69 // track video plays
70 video.addEventListener('timeupdate', function(e){
71 var pct = video.currentTime / video.duration *100;
72 if (pct > 75 && !v75){
73 v75 = true;
74 eyeBuild.doIAT(8);
75 }else if (pct > 50 && !v50){
76 v50 = true;
77 eyeBuild.doIAT(7);
78 }else if (pct > 25 && !v25){
79 v25 = true;
80 eyeBuild.doIAT(6);
81 }else if (pct > 0 && !v0){
82 v0 = true;
83 eyeBuild.doIAT(5);
84 if(videoPlays>1){
85 eyeBuild.doIAT(10);
86 }
87 }
88 }, false);
89
90 }
91 </script>
92
93
94 <style>
95
96 body{
97 margin: 0;
98 padding: 0;
99 width: 300px;
100 height: 600px;
101 line-height: 1.2;
102 font-size: 27px;
103 letter-spacing: .4;
104 color: #CD040B;
105 font-family: "Neue Haas Grotesk", Arial, sans-serif;
106 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
107 font-style: normal;
108 }
109
110 a{
111 text-decoration: none;
112 color: inherit;
113 }
114 #click-tag{
115 display: block;
116 position: absolute;
117 width: 100%;
118 height: 420px;
119 top:180px;
120 }
121
122 #border{
123 position: relative;
124 width: 300px;
125 height: 600px;
126 border: 1px solid #55565A;
127 background-color: #FFFFFF;
128 overflow: hidden;
129 cursor: pointer;
130 box-sizing: border-box;
131 }
132
133 #border:hover #cta{
134 background-color: #666666;
135 }
136
137 #border:active #cta{
138 background-color: #000000;
139 }
140
141 #video, #video-controls{
142 position: absolute;
143 width: 272px;
144 height: 152px;
145 left:13px;
146 top:15px;
147 }
148 #video-controls.start{
149 background: url(assets/video-poster.jpg) no-repeat center center;
150 }
151 #video-controls button{
152 background: url(assets/play.svg) no-repeat center center;
153 border: none;
154 cursor: pointer;
155 width: 100%;
156 height: 100%;
157 }
158
159 #video-controls button.play:hover{
160 background-size: 88px 88px;
161 }
162 #video-controls button.play{
163 background: url(assets/play.svg) no-repeat center center;
164 background-size: 85px 85px;
165 }
166
167 #video-controls button.pause:hover{
168 background-size: 20px 20px;
169 }
170 #video-controls button.pause{
171 background: url(assets/pause.svg) no-repeat 5px 127px;
172 background-size: 0px 0px;
173 }
174
175
176 </style>
177
178 </head>
179
180 <body>
181 <div id="border">
182 <div id="img"><img id="logoImg" src="assets/img@2x.gif" width="300" height="600" style="border-style:none"></div>
183 <video id="video" width="272" height="152">
184 <source src="assets/vid.mp4" type="video/mp4">
185 Your browser doesn't support HTML5 video.
186 </video>
187 <div id="video-controls" class="start">
188 <button type="button" id="play-pause" class="play"></button>
189 </div>
190
191 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
192 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
193 </div>
194
195 </body>
196
197 </html>
...\ No newline at end of file ...\ No newline at end of file
...@@ -35,6 +35,8 @@ ...@@ -35,6 +35,8 @@
35 var video = document.getElementById("video"); 35 var video = document.getElementById("video");
36 var videoControls = document.getElementById("video-controls"); 36 var videoControls = document.getElementById("video-controls");
37 var playButton = document.getElementById("play-pause"); 37 var playButton = document.getElementById("play-pause");
38 var muteButton = document.getElementById("mute");
39
38 playButton.addEventListener("click", function(e) { 40 playButton.addEventListener("click", function(e) {
39 if (video.paused == true) { 41 if (video.paused == true) {
40 play(); 42 play();
...@@ -47,18 +49,19 @@ ...@@ -47,18 +49,19 @@
47 var play = function(){ 49 var play = function(){
48 video.play(); 50 video.play();
49 videoPlays++; 51 videoPlays++;
50 playButton.setAttribute("class", "pause"); 52 videoControls.className = ""
51 videoControls.setAttribute("class", "play"); 53 toggleClass(videoControls, "playing");
54 toggleClass(playButton, "playing");
52 } 55 }
53 var pause = function(){ 56 var pause = function(){
54 video.pause(); 57 video.pause();
55 playButton.setAttribute("class", "play"); 58 toggleClass(videoControls, "playing");
59 toggleClass(playButton, "playing");
56 } 60 }
57 video.addEventListener('ended', function(e){ 61 video.addEventListener('ended', function(e){
58 video.currentTime = 0; 62 video.currentTime = 0;
59 pause(); 63 pause();
60 videoControls.setAttribute("class", "start"); 64 videoControls.className = "start"
61 playButton.setAttribute("class", "play");
62 v0 = false; 65 v0 = false;
63 v25 = false; 66 v25 = false;
64 v50 = false; 67 v50 = false;
...@@ -66,6 +69,16 @@ ...@@ -66,6 +69,16 @@
66 eyeBuild.doIAT(9); 69 eyeBuild.doIAT(9);
67 }, false); 70 }, false);
68 71
72 muteButton.addEventListener("click", function(e) {
73 if (video.muted == true) {
74 eyeBuild.doIAT(4);
75 } else {
76 eyeBuild.doIAT(3);
77 }
78 video.muted = !video.muted;
79 toggleClass(muteButton, "muted");
80 });
81
69 // track video plays 82 // track video plays
70 video.addEventListener('timeupdate', function(e){ 83 video.addEventListener('timeupdate', function(e){
71 var pct = video.currentTime / video.duration *100; 84 var pct = video.currentTime / video.duration *100;
...@@ -88,6 +101,18 @@ ...@@ -88,6 +101,18 @@
88 }, false); 101 }, false);
89 102
90 } 103 }
104
105
106 function toggleClass(element, toggleClass){
107 var currentClass = element.className;
108 if(currentClass.indexOf(toggleClass) > -1){ //has class
109 newClass = currentClass.replace(toggleClass,"")
110 }else{
111 newClass = currentClass + " " + toggleClass;
112 }
113 element.className = newClass;
114 }
115
91 </script> 116 </script>
92 117
93 118
...@@ -147,25 +172,59 @@ ...@@ -147,25 +172,59 @@
147 } 172 }
148 #video-controls.start{ 173 #video-controls.start{
149 background: url(assets/video-poster.jpg) no-repeat center center; 174 background: url(assets/video-poster.jpg) no-repeat center center;
175 opacity:1;
176 }
177 #video-controls.playing {
178 opacity:0;
150 } 179 }
180
181 #video-controls:hover {
182 opacity:1;
183 }
184
151 #video-controls button{ 185 #video-controls button{
152 background: url(assets/play.svg) no-repeat center center;
153 border: none; 186 border: none;
154 cursor: pointer; 187 cursor: pointer;
155 width: 100%; 188 width: 100%;
156 height: 100%; 189 height: 100%;
157 } 190 }
158 #video-controls button.play:hover{ 191
159 background-size: 88px 88px; 192 button#play-pause{
160 }
161 #video-controls button.play{
162 background: url(assets/play.svg) no-repeat center center; 193 background: url(assets/play.svg) no-repeat center center;
194 background-size: 83px 83px;
195 }
196 button#play-pause.playing{
197 background: url(assets/pause.svg) no-repeat 30px 127px;
198 background-size: 20px 20px;
199 }
200 button#play-pause:hover{
163 background-size: 85px 85px; 201 background-size: 85px 85px;
164 } 202 }
165 #video-controls button.pause{ 203 button#play-pause.playing:hover{
166 background: none; 204 background-position: 29px 126px;
205 background-size: 21px 21px;
167 } 206 }
168 207
208
209 button#mute{
210 background: url(assets/mute-un.svg) no-repeat center center;
211 background-size: 20px 20px;
212 position: absolute;
213 width: 22px;
214 height: 22px;
215 left:5px;
216 bottom: 5px;
217 }
218 button#mute.muted{
219 background: url(assets/mute.svg) no-repeat center center;
220 background-size: 20px 20px;
221 }
222
223 button#mute:hover{
224 background-size: 22px 22px;
225 }
226
227
169 </style> 228 </style>
170 229
171 </head> 230 </head>
...@@ -178,7 +237,8 @@ ...@@ -178,7 +237,8 @@
178 Your browser doesn't support HTML5 video. 237 Your browser doesn't support HTML5 video.
179 </video> 238 </video>
180 <div id="video-controls" class="start"> 239 <div id="video-controls" class="start">
181 <button type="button" id="play-pause" class="play"></button> 240 <button type="button" id="play-pause" class=""></button>
241 <button type="button" id="mute" class=""></button>
182 </div> 242 </div>
183 243
184 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> 244 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
......