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
Inline Side-by-side
Showing 60 changed files with 2261 additions and 1671 deletions
......@@ -22,73 +22,80 @@
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<script type="text/javascript">
/**
* This section uses videojs with eyeBuild, tracking plays, clicks, etc.
**/
window.onload = function() {
eyeBuild.initialize();
window.isVideoClick = false;
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
var video = document.getElementById("video");
var videoControls = document.getElementById("video-controls");
//var video = document.getElementsByTagName("video")[0];
var myVideoJsPlayer = videojs('video');
var video = document.querySelector("#video video");
var playButton = document.getElementById("play-pause");
playButton.addEventListener("click", function(e) {
if (video.paused == true) {
play();
var txt = document.getElementById("txt");
videojs(video, {}, function(){
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
video.addEventListener("play", function(e) {
eyeBuild.doIAT(0);
} else {
pause();
videoPlays++;
playButton.setAttribute("class", "play");
txt.setAttribute("class", "play");
});
video.addEventListener("pause", function(e) {
eyeBuild.doIAT(1);
}
});
var play = function(){
video.play();
videoPlays++;
playButton.setAttribute("class", "pause");
videoControls.setAttribute("class", "play");
document.getElementById("txt").setAttribute("class", "play");
}
var pause = function(){
video.pause();
playButton.setAttribute("class", "play");
}
video.addEventListener('ended', function(e){
video.currentTime = 0;
pause();
videoControls.setAttribute("class", "start");
playButton.setAttribute("class", "play");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
}, false);
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
playButton.setAttribute("class", "pause");
txt.setAttribute("class", "pause");
});
video.addEventListener("ended", function(e) {
video.currentTime = 0;
playButton.setAttribute("class", "pause");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
});
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
}
}
}
}, false);
}, false);
playButton.addEventListener('click', function(e){
myVideoJsPlayer.play();
}, false);
});
/*
var closeButton = document.getElementById("close");
closeButton.addEventListener("click", function(e) {
......@@ -143,37 +150,34 @@
*/
}
#video, #video-controls{
#video, #play-pause{
position: absolute;
width: 930px;
height: 523px;
left:34px;
top:34px;
border:none;
}
#video-controls.start{
background: url(assets/img/poster1.jpg) no-repeat center center;
}
#video-controls.play {
background: none;
z-index: 11;
}
#video-controls button{
width: 100%;
height: 100%;
background: url(assets/img/play.svg) no-repeat center center;
border: none;
#play-pause{
cursor: pointer;
background: url(assets/img/play.svg) no-repeat center center;
}
#video-controls button.play:hover{
#play-pause.pause:hover{
background-size: 60px 60px;
}
#video-controls button.play{
background: url(assets/img/play.svg) no-repeat center center;
#play-pause.pause:active{
background-size: 50px 50px;
}
#play-pause.pause{
background-size: 55px 55px;
display: block;
}
#video-controls button.pause{
background: none;
#play-pause.play{
display: none;
}
.vjs-big-play-button{
display: none !important;
}
#txt {
position: absolute;
......@@ -188,6 +192,9 @@
#txt.play {
display: none;
}
#txt.pause {
display: block;
}
#overlay {
position: absolute;
width: 941px;
......@@ -200,18 +207,16 @@
<body>
<div id="border">
<a id="click-tag" href="javascript:eyeBuild.doClick(0)">
<img id="txt" class="pause" src="assets/img/slice.svg" alt="txt">
<video id="video" width="" height="">
<source src="assets/vid.mp4" type="video/mp4">
Your browser doesn't support HTML5 video.
</video>
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
<a id="click-tag" href="javascript:eyeBuild.doClick(0);">
<img id="txt" style="pause" src="assets/img/slice.svg" alt="txt">
<img id="overlay" src="assets/img/overlay.png" alt="txt">
</a>
<div id="video-controls" class="start">
<button type="button" id="play-pause" class="play"></button>
</div>
<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}'>
<source src="../vidA.mp4" type="video/mp4" />
<!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
<!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
</video>
<button id="play-pause" class="pause"></button>
</div>
<!-- jQuery-->
......
......@@ -22,73 +22,80 @@
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<script type="text/javascript">
/**
* This section uses videojs with eyeBuild, tracking plays, clicks, etc.
**/
window.onload = function() {
eyeBuild.initialize();
window.isVideoClick = false;
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
var video = document.getElementById("video");
var videoControls = document.getElementById("video-controls");
//var video = document.getElementsByTagName("video")[0];
var myVideoJsPlayer = videojs('video');
var video = document.querySelector("#video video");
var playButton = document.getElementById("play-pause");
playButton.addEventListener("click", function(e) {
if (video.paused == true) {
play();
var txt = document.getElementById("txt");
videojs(video, {}, function(){
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
video.addEventListener("play", function(e) {
eyeBuild.doIAT(0);
} else {
pause();
videoPlays++;
playButton.setAttribute("class", "play");
txt.setAttribute("class", "play");
});
video.addEventListener("pause", function(e) {
eyeBuild.doIAT(1);
}
});
var play = function(){
video.play();
videoPlays++;
playButton.setAttribute("class", "pause");
videoControls.setAttribute("class", "play");
document.getElementById("txt").setAttribute("class", "play");
}
var pause = function(){
video.pause();
playButton.setAttribute("class", "play");
}
video.addEventListener('ended', function(e){
video.currentTime = 0;
pause();
videoControls.setAttribute("class", "start");
playButton.setAttribute("class", "play");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
}, false);
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
playButton.setAttribute("class", "pause");
txt.setAttribute("class", "pause");
});
video.addEventListener("ended", function(e) {
video.currentTime = 0;
playButton.setAttribute("class", "pause");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
});
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
}
}
}
}, false);
}, false);
playButton.addEventListener('click', function(e){
myVideoJsPlayer.play();
}, false);
});
/*
var closeButton = document.getElementById("close");
closeButton.addEventListener("click", function(e) {
......@@ -143,37 +150,34 @@
*/
}
#video, #video-controls{
#video, #play-pause{
position: absolute;
width: 930px;
height: 523px;
left:34px;
top:34px;
border:none;
}
#video-controls.start{
background: url(assets/img/poster2.jpg) no-repeat center center;
}
#video-controls.play {
background: none;
z-index: 11;
}
#video-controls button{
width: 100%;
height: 100%;
background: url(assets/img/play.svg) no-repeat center center;
border: none;
#play-pause{
cursor: pointer;
background: url(assets/img/play.svg) no-repeat center center;
}
#video-controls button.play:hover{
#play-pause.pause:hover{
background-size: 60px 60px;
}
#video-controls button.play{
background: url(assets/img/play.svg) no-repeat center center;
#play-pause.pause:active{
background-size: 50px 50px;
}
#play-pause.pause{
background-size: 55px 55px;
display: block;
}
#video-controls button.pause{
background: none;
#play-pause.play{
display: none;
}
.vjs-big-play-button{
display: none !important;
}
#txt {
position: absolute;
......@@ -188,6 +192,9 @@
#txt.play {
display: none;
}
#txt.pause {
display: block;
}
#overlay {
position: absolute;
width: 941px;
......@@ -200,18 +207,16 @@
<body>
<div id="border">
<a id="click-tag" href="javascript:eyeBuild.doClick(0)">
<img id="txt" class="pause" src="assets/img/slice.svg" alt="txt">
<video id="video" width="" height="">
<source src="assets/vid.mp4" type="video/mp4">
Your browser doesn't support HTML5 video.
</video>
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
<a id="click-tag" href="javascript:eyeBuild.doClick(0);">
<img id="txt" style="pause" src="assets/img/slice.svg" alt="txt">
<img id="overlay" src="assets/img/overlay.png" alt="txt">
</a>
<div id="video-controls" class="start">
<button type="button" id="play-pause" class="play"></button>
</div>
<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}'>
<source src="../vidA.mp4" type="video/mp4" />
<!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
<!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
</video>
<button id="play-pause" class="pause"></button>
</div>
<!-- jQuery-->
......
......@@ -22,73 +22,80 @@
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<script type="text/javascript">
/**
* This section uses videojs with eyeBuild, tracking plays, clicks, etc.
**/
window.onload = function() {
eyeBuild.initialize();
window.isVideoClick = false;
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
var video = document.getElementById("video");
var videoControls = document.getElementById("video-controls");
//var video = document.getElementsByTagName("video")[0];
var myVideoJsPlayer = videojs('video');
var video = document.querySelector("#video video");
var playButton = document.getElementById("play-pause");
playButton.addEventListener("click", function(e) {
if (video.paused == true) {
play();
var txt = document.getElementById("txt");
videojs(video, {}, function(){
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
video.addEventListener("play", function(e) {
eyeBuild.doIAT(0);
} else {
pause();
videoPlays++;
playButton.setAttribute("class", "play");
txt.setAttribute("class", "play");
});
video.addEventListener("pause", function(e) {
eyeBuild.doIAT(1);
}
});
var play = function(){
video.play();
videoPlays++;
playButton.setAttribute("class", "pause");
videoControls.setAttribute("class", "play");
document.getElementById("txt").setAttribute("class", "play");
}
var pause = function(){
video.pause();
playButton.setAttribute("class", "play");
}
video.addEventListener('ended', function(e){
video.currentTime = 0;
pause();
videoControls.setAttribute("class", "start");
playButton.setAttribute("class", "play");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
}, false);
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
playButton.setAttribute("class", "pause");
txt.setAttribute("class", "pause");
});
video.addEventListener("ended", function(e) {
video.currentTime = 0;
playButton.setAttribute("class", "pause");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
});
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
}
}
}
}, false);
}, false);
playButton.addEventListener('click', function(e){
myVideoJsPlayer.play();
}, false);
});
/*
var closeButton = document.getElementById("close");
closeButton.addEventListener("click", function(e) {
......@@ -143,37 +150,34 @@
*/
}
#video, #video-controls{
#video, #play-pause{
position: absolute;
width: 930px;
height: 523px;
left:34px;
top:34px;
border:none;
}
#video-controls.start{
background: url(assets/img/poster2.jpg) no-repeat center center;
}
#video-controls.play {
background: none;
z-index: 11;
}
#video-controls button{
width: 100%;
height: 100%;
background: url(assets/img/play.svg) no-repeat center center;
border: none;
#play-pause{
cursor: pointer;
background: url(assets/img/play.svg) no-repeat center center;
}
#video-controls button.play:hover{
#play-pause.pause:hover{
background-size: 60px 60px;
}
#video-controls button.play{
background: url(assets/img/play.svg) no-repeat center center;
#play-pause.pause:active{
background-size: 50px 50px;
}
#play-pause.pause{
background-size: 55px 55px;
display: block;
}
#video-controls button.pause{
background: none;
#play-pause.play{
display: none;
}
.vjs-big-play-button{
display: none !important;
}
#txt {
position: absolute;
......@@ -188,6 +192,9 @@
#txt.play {
display: none;
}
#txt.pause {
display: block;
}
#overlay {
position: absolute;
width: 941px;
......@@ -200,18 +207,16 @@
<body>
<div id="border">
<a id="click-tag" href="javascript:eyeBuild.doClick(0)">
<img id="txt" class="pause" src="assets/img/slice.svg" alt="txt">
<video id="video" width="" height="">
<source src="assets/vid.mp4" type="video/mp4">
Your browser doesn't support HTML5 video.
</video>
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
<a id="click-tag" href="javascript:eyeBuild.doClick(0);">
<img id="txt" style="pause" src="assets/img/slice.svg" alt="txt">
<img id="overlay" src="assets/img/overlay.png" alt="txt">
</a>
<div id="video-controls" class="start">
<button type="button" id="play-pause" class="play"></button>
</div>
<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}'>
<source src="../vidC.mp4" type="video/mp4" />
<!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
<!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
</video>
<button id="play-pause" class="pause"></button>
</div>
<!-- jQuery-->
......
......@@ -22,73 +22,80 @@
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<script type="text/javascript">
/**
* This section uses videojs with eyeBuild, tracking plays, clicks, etc.
**/
window.onload = function() {
eyeBuild.initialize();
window.isVideoClick = false;
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
var video = document.getElementById("video");
var videoControls = document.getElementById("video-controls");
//var video = document.getElementsByTagName("video")[0];
var myVideoJsPlayer = videojs('video');
var video = document.querySelector("#video video");
var playButton = document.getElementById("play-pause");
playButton.addEventListener("click", function(e) {
if (video.paused == true) {
play();
var txt = document.getElementById("txt");
videojs(video, {}, function(){
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
video.addEventListener("play", function(e) {
eyeBuild.doIAT(0);
} else {
pause();
videoPlays++;
playButton.setAttribute("class", "play");
txt.setAttribute("class", "play");
});
video.addEventListener("pause", function(e) {
eyeBuild.doIAT(1);
}
});
var play = function(){
video.play();
videoPlays++;
playButton.setAttribute("class", "pause");
videoControls.setAttribute("class", "play");
document.getElementById("txt").setAttribute("class", "play");
}
var pause = function(){
video.pause();
playButton.setAttribute("class", "play");
}
video.addEventListener('ended', function(e){
video.currentTime = 0;
pause();
videoControls.setAttribute("class", "start");
playButton.setAttribute("class", "play");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
}, false);
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
playButton.setAttribute("class", "pause");
txt.setAttribute("class", "pause");
});
video.addEventListener("ended", function(e) {
video.currentTime = 0;
playButton.setAttribute("class", "pause");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
});
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
}
}
}
}, false);
}, false);
playButton.addEventListener('click', function(e){
myVideoJsPlayer.play();
}, false);
});
/*
var closeButton = document.getElementById("close");
closeButton.addEventListener("click", function(e) {
......@@ -143,37 +150,34 @@
*/
}
#video, #video-controls{
#video, #play-pause{
position: absolute;
width: 952px;
height: 536px;
left:36px;
top:61px;
border:none;
}
#video-controls.start{
background: url(assets/img/poster1.jpg) no-repeat center center;
}
#video-controls.play {
background: none;
z-index: 11;
}
#video-controls button{
width: 100%;
height: 100%;
background: url(assets/img/play.svg) no-repeat center center;
border: none;
#play-pause{
cursor: pointer;
background: url(assets/img/play.svg) no-repeat center center;
}
#video-controls button.play:hover{
#play-pause.pause:hover{
background-size: 60px 60px;
}
#video-controls button.play{
background: url(assets/img/play.svg) no-repeat center center;
#play-pause.pause:active{
background-size: 50px 50px;
}
#play-pause.pause{
background-size: 55px 55px;
display: block;
}
#video-controls button.pause{
background: none;
#play-pause.play{
display: none;
}
.vjs-big-play-button{
display: none !important;
}
#txt {
position: absolute;
......@@ -188,6 +192,9 @@
#txt.play {
display: none;
}
#txt.pause {
display: block;
}
#overlay {
position: absolute;
width: 964px;
......@@ -200,18 +207,16 @@
<body>
<div id="border">
<a id="click-tag" href="javascript:eyeBuild.doClick(0)">
<img id="txt" class="pause" src="assets/img/slice.svg" alt="txt">
<video id="video" width="" height="">
<source src="assets/vid.mp4" type="video/mp4">
Your browser doesn't support HTML5 video.
</video>
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
<a id="click-tag" href="javascript:eyeBuild.doClick(0);">
<img id="txt" style="pause" src="assets/img/slice.svg" alt="txt">
<img id="overlay" src="assets/img/overlay.png" alt="txt">
</a>
<div id="video-controls" class="start">
<button type="button" id="play-pause" class="play"></button>
</div>
<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}'>
<source src="../vidA.mp4" type="video/mp4" />
<!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
<!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
</video>
<button id="play-pause" class="pause"></button>
</div>
<!-- jQuery-->
......
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 Ad</title>
<!--
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "http://thecommonwell.ca/wave";
function getParameterByName(name)
{
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
if (match == null || match == ""){
return clickTag;
} else{
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
}
clickTag = getParameterByName('clickTag');
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<script type="text/javascript">
/**
* This section uses videojs with eyeBuild, tracking plays, clicks, etc.
**/
window.onload = function() {
eyeBuild.initialize();
window.isVideoClick = false;
//var video = document.getElementsByTagName("video")[0];
var myVideoJsPlayer = videojs('video');
var video = document.querySelector("#video video");
var playButton = document.getElementById("play-pause");
var txt = document.getElementById("txt");
videojs(video, {}, function(){
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
video.addEventListener("play", function(e) {
eyeBuild.doIAT(0);
videoPlays++;
playButton.setAttribute("class", "play");
txt.setAttribute("class", "play");
});
video.addEventListener("pause", function(e) {
eyeBuild.doIAT(1);
playButton.setAttribute("class", "pause");
txt.setAttribute("class", "pause");
});
video.addEventListener("ended", function(e) {
video.currentTime = 0;
playButton.setAttribute("class", "pause");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
});
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
}
}
}, false);
playButton.addEventListener('click', function(e){
myVideoJsPlayer.play();
}, false);
});
/*
var closeButton = document.getElementById("close");
closeButton.addEventListener("click", function(e) {
eyeBuild.doClose();
});
*/
}
</script>
<style>
body{
margin: 0;
padding: 0;
width: 1024px;
height: 768px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
color: #CD040B;
/* font-family: "Neue Haas Grotesk", Arial, sans-serif; */
/*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
font-style: normal;
}
a{
text-decoration: none;
color: inherit;
}
#click-tag{
display: block;
position: absolute;
width: 100%;
height: 100%;
}
#border{
position: relative;
width: 1024px;
height: 768px;
border: 1px solid #55565A;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
background-color: black;
/*
background: url(assets/img/back1.jpg) no-repeat #000;
background-size: 1000px 700px;
*/
}
#video, #play-pause{
position: absolute;
width: 952px;
height: 536px;
left:36px;
top:61px;
border:none;
}
#play-pause{
cursor: pointer;
background: url(assets/img/play.svg) no-repeat center center;
}
#play-pause.pause:hover{
background-size: 60px 60px;
}
#play-pause.pause:active{
background-size: 50px 50px;
}
#play-pause.pause{
background-size: 55px 55px;
display: block;
}
#play-pause.play{
display: none;
}
.vjs-big-play-button{
display: none !important;
}
#txt {
position: absolute;
width: 321px;
height: 270px;
left: 58px;
bottom:416px;
z-index: 10;
opacity: 0;
transform-origin: bottom;
}
#txt.play {
display: none;
}
#txt.pause {
display: block;
}
#overlay {
position: absolute;
width: 964px;
height: 81px;
left: 36px;
bottom:34px;
}
</style>
</head>
<body>
<div id="border">
<a id="click-tag" href="javascript:eyeBuild.doClick(0);">
<img id="txt" style="pause" src="assets/img/slice.svg" alt="txt">
<img id="overlay" src="assets/img/overlay.png" alt="txt">
</a>
<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}'>
<source src="../vidA.mp4" type="video/mp4" />
<!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
<!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
</video>
<button id="play-pause" class="pause"></button>
</div>
<!-- jQuery-->
<script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<!-- GREENSOCK-->
<!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function stage1(){
var tl = new TimelineMax({repeat:0, repeatDelay:2});
tl.fromTo("#txt", .3, {opacity:0, scaleY:.01, ease:Power1.easeIn, delay:.5 }, {opacity:1, scaleY:1, ease:Power1.easeIn, delay:.5 });
console.log( "time: " + tl.totalDuration() );
}
//---------------------
$(document).ready(function(){
stage1();
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 Ad</title>
<!--
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "http://thecommonwell.ca/wave";
function getParameterByName(name)
{
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
if (match == null || match == ""){
return clickTag;
} else{
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
}
clickTag = getParameterByName('clickTag');
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<script type="text/javascript">
/**
* This section uses videojs with eyeBuild, tracking plays, clicks, etc.
**/
window.onload = function() {
eyeBuild.initialize();
window.isVideoClick = false;
//var video = document.getElementsByTagName("video")[0];
var myVideoJsPlayer = videojs('video');
var video = document.querySelector("#video video");
var playButton = document.getElementById("play-pause");
var txt = document.getElementById("txt");
videojs(video, {}, function(){
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
video.addEventListener("play", function(e) {
eyeBuild.doIAT(0);
videoPlays++;
playButton.setAttribute("class", "play");
txt.setAttribute("class", "play");
});
video.addEventListener("pause", function(e) {
eyeBuild.doIAT(1);
playButton.setAttribute("class", "pause");
txt.setAttribute("class", "pause");
});
video.addEventListener("ended", function(e) {
video.currentTime = 0;
playButton.setAttribute("class", "pause");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
});
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
}
}
}, false);
playButton.addEventListener('click', function(e){
myVideoJsPlayer.play();
}, false);
});
/*
var closeButton = document.getElementById("close");
closeButton.addEventListener("click", function(e) {
eyeBuild.doClose();
});
*/
}
</script>
<style>
body{
margin: 0;
padding: 0;
width: 1024px;
height: 768px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
color: #CD040B;
/* font-family: "Neue Haas Grotesk", Arial, sans-serif; */
/*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
font-style: normal;
}
a{
text-decoration: none;
color: inherit;
}
#click-tag{
display: block;
position: absolute;
width: 100%;
height: 100%;
}
#border{
position: relative;
width: 1024px;
height: 768px;
border: 1px solid #55565A;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
background-color: black;
/*
background: url(assets/img/back1.jpg) no-repeat #000;
background-size: 1000px 700px;
*/
}
#video, #play-pause{
position: absolute;
width: 952px;
height: 536px;
left:36px;
top:61px;
border:none;
}
#play-pause{
cursor: pointer;
background: url(assets/img/play.svg) no-repeat center center;
}
#play-pause.pause:hover{
background-size: 60px 60px;
}
#play-pause.pause:active{
background-size: 50px 50px;
}
#play-pause.pause{
background-size: 55px 55px;
display: block;
}
#play-pause.play{
display: none;
}
.vjs-big-play-button{
display: none !important;
}
#txt {
position: absolute;
width: 321px;
height: 270px;
left: 58px;
bottom:416px;
z-index: 10;
opacity: 0;
transform-origin: bottom;
}
#txt.play {
display: none;
}
#txt.pause {
display: block;
}
#overlay {
position: absolute;
width: 964px;
height: 81px;
left: 36px;
bottom:34px;
}
</style>
</head>
<body>
<div id="border">
<a id="click-tag" href="javascript:eyeBuild.doClick(0);">
<img id="txt" style="pause" src="assets/img/slice.svg" alt="txt">
<img id="overlay" src="assets/img/overlay.png" alt="txt">
</a>
<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}'>
<source src="../vidC.mp4" type="video/mp4" />
<!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
<!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
</video>
<button id="play-pause" class="pause"></button>
</div>
<!-- jQuery-->
<script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<!-- GREENSOCK-->
<!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function stage1(){
var tl = new TimelineMax({repeat:0, repeatDelay:2});
tl.fromTo("#txt", .3, {opacity:0, scaleY:.01, ease:Power1.easeIn, delay:.5 }, {opacity:1, scaleY:1, ease:Power1.easeIn, delay:.5 });
console.log( "time: " + tl.totalDuration() );
}
//---------------------
$(document).ready(function(){
stage1();
});
</script>
</body>
</html>
\ No newline at end of file
......@@ -22,72 +22,77 @@
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<script type="text/javascript">
/**
* This section uses videojs with eyeBuild, tracking plays, clicks, etc.
**/
window.onload = function() {
eyeBuild.initialize();
window.isVideoClick = false;
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
var video = document.getElementById("video");
var videoControls = document.getElementById("video-controls");
//var video = document.getElementsByTagName("video")[0];
var myVideoJsPlayer = videojs('video');
var video = document.querySelector("#video video");
var playButton = document.getElementById("play-pause");
playButton.addEventListener("click", function(e) {
if (video.paused == true) {
play();
videojs(video, {}, function(){
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
video.addEventListener("play", function(e) {
eyeBuild.doIAT(0);
} else {
pause();
videoPlays++;
playButton.setAttribute("class", "play");
});
video.addEventListener("pause", function(e) {
eyeBuild.doIAT(1);
}
});
var play = function(){
video.play();
videoPlays++;
playButton.setAttribute("class", "pause");
videoControls.setAttribute("class", "play");
}
var pause = function(){
video.pause();
playButton.setAttribute("class", "play");
}
video.addEventListener('ended', function(e){
video.currentTime = 0;
pause();
videoControls.setAttribute("class", "start");
playButton.setAttribute("class", "play");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
}, false);
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
playButton.setAttribute("class", "pause");
});
video.addEventListener("ended", function(e) {
video.currentTime = 0;
playButton.setAttribute("class", "pause");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
});
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
}
}
}
}, false);
}, false);
playButton.addEventListener('click', function(e){
myVideoJsPlayer.play();
}, false);
});
/*
var closeButton = document.getElementById("close");
closeButton.addEventListener("click", function(e) {
......@@ -99,7 +104,6 @@
}
</script>
<style>
body{
......@@ -140,36 +144,35 @@
background-size: 300px 450px;
}
#video, #video-controls{
#video, #play-pause{
position: absolute;
width: 271px;
height: 153px;
left:14px;
top:178px;
border:none;
}
#video-controls.start{
background: url(assets/img/poster1.jpg) no-repeat center center;
}
#video-controls.play {
background: none;
}
#video-controls button{
width: 100%;
height: 100%;
background: url(assets/img/play.svg) no-repeat center center;
border: none;
#play-pause{
cursor: pointer;
background: url(assets/img/play.svg) no-repeat center center;
}
#video-controls button.play:hover{
#play-pause.pause:hover{
background-size: 60px 60px;
}
#video-controls button.play{
background: url(assets/img/play.svg) no-repeat center center;
#play-pause.pause:active{
background-size: 50px 50px;
}
#play-pause.pause{
background-size: 55px 55px;
display: block;
}
#video-controls button.pause{
background: none;
#play-pause.play{
display: none;
}
.vjs-big-play-button{
display: none !important;
}
#txt {
position: absolute;
......@@ -181,23 +184,24 @@
opacity: 0;
transform-origin: bottom;
}
</style>
</head>
<body>
<div id="border">
<a id="click-tag" href="javascript:eyeBuild.doClick(0)">
<a id="click-tag" href="javascript:eyeBuild.doClick(0);">
<img id="txt" src="assets/img/slice.svg" alt="txt">
<video id="video" width="" height="">
<source src="assets/vid.mp4" type="video/mp4">
Your browser doesn't support HTML5 video.
</video>
<img id="txt" src="assets/img/overlay.png" style="border-style:none">
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
</a>
<div id="video-controls" class="start">
<button type="button" id="play-pause" class="play"></button>
</div>
<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}'>
<source src="../vidA.mp4" type="video/mp4" />
<!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
<!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
</video>
<button id="play-pause" class="pause"></button>
</div>
<!-- jQuery-->
......
......@@ -22,72 +22,77 @@
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<script type="text/javascript">
/**
* This section uses videojs with eyeBuild, tracking plays, clicks, etc.
**/
window.onload = function() {
eyeBuild.initialize();
window.isVideoClick = false;
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
var video = document.getElementById("video");
var videoControls = document.getElementById("video-controls");
//var video = document.getElementsByTagName("video")[0];
var myVideoJsPlayer = videojs('video');
var video = document.querySelector("#video video");
var playButton = document.getElementById("play-pause");
playButton.addEventListener("click", function(e) {
if (video.paused == true) {
play();
videojs(video, {}, function(){
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
video.addEventListener("play", function(e) {
eyeBuild.doIAT(0);
} else {
pause();
videoPlays++;
playButton.setAttribute("class", "play");
});
video.addEventListener("pause", function(e) {
eyeBuild.doIAT(1);
}
});
var play = function(){
video.play();
videoPlays++;
playButton.setAttribute("class", "pause");
videoControls.setAttribute("class", "play");
}
var pause = function(){
video.pause();
playButton.setAttribute("class", "play");
}
video.addEventListener('ended', function(e){
video.currentTime = 0;
pause();
videoControls.setAttribute("class", "start");
playButton.setAttribute("class", "play");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
}, false);
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
playButton.setAttribute("class", "pause");
});
video.addEventListener("ended", function(e) {
video.currentTime = 0;
playButton.setAttribute("class", "pause");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
});
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
}
}
}
}, false);
}, false);
playButton.addEventListener('click', function(e){
myVideoJsPlayer.play();
}, false);
});
/*
var closeButton = document.getElementById("close");
closeButton.addEventListener("click", function(e) {
......@@ -99,7 +104,6 @@
}
</script>
<style>
body{
......@@ -140,36 +144,35 @@
background-size: 300px 450px;
}
#video, #video-controls{
#video, #play-pause{
position: absolute;
width: 271px;
height: 153px;
left:14px;
top:178px;
border:none;
}
#video-controls.start{
background: url(assets/img/poster2.jpg) no-repeat center center;
}
#video-controls.play {
background: none;
}
#video-controls button{
width: 100%;
height: 100%;
background: url(assets/img/play.svg) no-repeat center center;
border: none;
#play-pause{
cursor: pointer;
background: url(assets/img/play.svg) no-repeat center center;
}
#video-controls button.play:hover{
#play-pause.pause:hover{
background-size: 60px 60px;
}
#video-controls button.play{
background: url(assets/img/play.svg) no-repeat center center;
#play-pause.pause:active{
background-size: 50px 50px;
}
#play-pause.pause{
background-size: 55px 55px;
display: block;
}
#video-controls button.pause{
background: none;
#play-pause.play{
display: none;
}
.vjs-big-play-button{
display: none !important;
}
#txt {
position: absolute;
......@@ -181,23 +184,24 @@
opacity: 0;
transform-origin: bottom;
}
</style>
</head>
<body>
<div id="border">
<a id="click-tag" href="javascript:eyeBuild.doClick(0)">
<a id="click-tag" href="javascript:eyeBuild.doClick(0);">
<img id="txt" src="assets/img/slice.svg" alt="txt">
<video id="video" width="" height="">
<source src="assets/vid.mp4" type="video/mp4">
Your browser doesn't support HTML5 video.
</video>
<img id="txt" src="assets/img/overlay.png" style="border-style:none">
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
</a>
<div id="video-controls" class="start">
<button type="button" id="play-pause" class="play"></button>
</div>
<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}'>
<source src="../vidA.mp4" type="video/mp4" />
<!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
<!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
</video>
<button id="play-pause" class="pause"></button>
</div>
<!-- jQuery-->
......
......@@ -22,72 +22,77 @@
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<script type="text/javascript">
/**
* This section uses videojs with eyeBuild, tracking plays, clicks, etc.
**/
window.onload = function() {
eyeBuild.initialize();
window.isVideoClick = false;
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
var video = document.getElementById("video");
var videoControls = document.getElementById("video-controls");
//var video = document.getElementsByTagName("video")[0];
var myVideoJsPlayer = videojs('video');
var video = document.querySelector("#video video");
var playButton = document.getElementById("play-pause");
playButton.addEventListener("click", function(e) {
if (video.paused == true) {
play();
videojs(video, {}, function(){
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
video.addEventListener("play", function(e) {
eyeBuild.doIAT(0);
} else {
pause();
videoPlays++;
playButton.setAttribute("class", "play");
});
video.addEventListener("pause", function(e) {
eyeBuild.doIAT(1);
}
});
var play = function(){
video.play();
videoPlays++;
playButton.setAttribute("class", "pause");
videoControls.setAttribute("class", "play");
}
var pause = function(){
video.pause();
playButton.setAttribute("class", "play");
}
video.addEventListener('ended', function(e){
video.currentTime = 0;
pause();
videoControls.setAttribute("class", "start");
playButton.setAttribute("class", "play");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
}, false);
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
playButton.setAttribute("class", "pause");
});
video.addEventListener("ended", function(e) {
video.currentTime = 0;
playButton.setAttribute("class", "pause");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
});
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
}
}
}
}, false);
}, false);
playButton.addEventListener('click', function(e){
myVideoJsPlayer.play();
}, false);
});
/*
var closeButton = document.getElementById("close");
closeButton.addEventListener("click", function(e) {
......@@ -99,7 +104,6 @@
}
</script>
<style>
body{
......@@ -140,36 +144,35 @@
background-size: 300px 450px;
}
#video, #video-controls{
#video, #play-pause{
position: absolute;
width: 271px;
height: 153px;
left:14px;
top:178px;
border:none;
}
#video-controls.start{
background: url(assets/img/poster3.jpg) no-repeat center center;
}
#video-controls.play {
background: none;
}
#video-controls button{
width: 100%;
height: 100%;
background: url(assets/img/play.svg) no-repeat center center;
border: none;
#play-pause{
cursor: pointer;
background: url(assets/img/play.svg) no-repeat center center;
}
#video-controls button.play:hover{
#play-pause.pause:hover{
background-size: 60px 60px;
}
#video-controls button.play{
background: url(assets/img/play.svg) no-repeat center center;
#play-pause.pause:active{
background-size: 50px 50px;
}
#play-pause.pause{
background-size: 55px 55px;
display: block;
}
#video-controls button.pause{
background: none;
#play-pause.play{
display: none;
}
.vjs-big-play-button{
display: none !important;
}
#txt {
position: absolute;
......@@ -181,23 +184,24 @@
opacity: 0;
transform-origin: bottom;
}
</style>
</head>
<body>
<div id="border">
<a id="click-tag" href="javascript:eyeBuild.doClick(0)">
<a id="click-tag" href="javascript:eyeBuild.doClick(0);">
<img id="txt" src="assets/img/slice.svg" alt="txt">
<video id="video" width="" height="">
<source src="assets/vid.mp4" type="video/mp4">
Your browser doesn't support HTML5 video.
</video>
<img id="txt" src="assets/img/overlay.png" style="border-style:none">
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
</a>
<div id="video-controls" class="start">
<button type="button" id="play-pause" class="play"></button>
</div>
<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}'>
<source src="../vidC.mp4" type="video/mp4" />
<!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
<!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
</video>
<button id="play-pause" class="pause"></button>
</div>
<!-- jQuery-->
......
/*!
* VERSION: 1.0.1
* DATE: 2016-04-28
*
* Requires:
* GSAP TweenMax
* GASP drawSVG Plugin ()
* This work is subject to the terms at http://greensock.com/standard-license or for
* Club GreenSock members, the software agreement that was issued with your membership.
*
* @license Copyright (c) 2016, Tenzing Communications Inc. All rights reserved.
*
* @author: Dan Rempel, dan@gotenzing.com
* Usage Example:
* var myEySvg = initEySvgFrame(10, 196, 193); // frame line weight, width, height
* document.getElementById("body").appendChild(myEySvg);
* animateEyFrame(2); // delay in seconds
* animateGradient(2); // delay in seconds
* animateFill(2); // delay in seconds
*
**/
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
/*!
* VERSION: 1.0.2
* DATE: 2016-05-03
*
* Requires:
* GSAP TweenMax
* GASP drawSVG Plugin ()
* This work is subject to the terms at http://greensock.com/standard-license or for
* Club GreenSock members, the software agreement that was issued with your membership.
*
* @license Copyright (c) 2016, Tenzing Communications Inc. All rights reserved.
*
* @author: Dan Rempel, dan@gotenzing.com
* Usage Example:
* var myEySvg = initEySvgFrame(10, 196, 193); // frame line weight, width, height
* document.getElementById("body").appendChild(myEySvg);
* animateEyFrame(2); // delay in seconds
* animateGradient(2); // delay in seconds
* animateFill(2); // delay in seconds
*
**/
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
......@@ -98,7 +98,7 @@
width: 112px;
}
#txt2{
left: 42px;
left: 45px;
width: 216px;
}
#cannon{
......@@ -185,10 +185,10 @@
<!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
<a href="javascript:eyeBuild.doClick(0)" class="cta">
<div id="border">
<img id="logo" src="assets/img/logo.png" alt="logo">
<img id="legal" src="assets/img/legal.png" alt="legal">
<img id="boy" src="assets/img/boy.png" alt="boy">
<img id="cannon" src="assets/img/cannon.png" alt="cannon">
<img id="logo" src="assets/img/logo.png" alt="logo">
<img id="legal" src="assets/img/legal.png" alt="legal">
<img id="txt1a" src="assets/img/txt1a.png" alt="txt1">
<img id="txt1b" src="assets/img/txt1b.png" alt="txt1">
<div id="box-1"></div>
......@@ -224,22 +224,13 @@
<!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="assets/js/DrawSVGPlugin.min.js"></script>
<script src="assets/js/ey-frame-svg-1.0.1.min.js"></script>
<script src="assets/js/ey-frame-svg-1.0.2.min.js"></script>
<script>
function stage1(){
var tl = new TimelineMax(); /* {repeat:2, repeatDelay:2} */
/*
animate boy
logo
frame w txt
dot
tags w dots
cta
hash
*/
var d=.4;
......@@ -261,7 +252,7 @@
tl.to("#txt1b", d, {opacity:0, ease:Power1.easeInOut, delay:-d });
tl.to("#box-2", d, {opacity:0, ease:Power1.easeInOut, delay:-d });
animateFill(3.3);
//animateFill(3.3);
tl.to("#txt2", d, {opacity:1, ease:Power1.easeInOut, delay:.5 });
tl.to("#txt2", d, {opacity:0, ease:Power1.easeInOut, delay:4 });
......
<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
......@@ -22,72 +22,77 @@
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<script type="text/javascript">
/**
* This section uses videojs with eyeBuild, tracking plays, clicks, etc.
**/
window.onload = function() {
eyeBuild.initialize();
window.isVideoClick = false;
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
var video = document.getElementById("video");
var videoControls = document.getElementById("video-controls");
//var video = document.getElementsByTagName("video")[0];
var myVideoJsPlayer = videojs('video');
var video = document.querySelector("#video video");
var playButton = document.getElementById("play-pause");
playButton.addEventListener("click", function(e) {
if (video.paused == true) {
play();
videojs(video, {}, function(){
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
video.addEventListener("play", function(e) {
eyeBuild.doIAT(0);
} else {
pause();
videoPlays++;
playButton.setAttribute("class", "play");
});
video.addEventListener("pause", function(e) {
eyeBuild.doIAT(1);
}
});
var play = function(){
video.play();
videoPlays++;
playButton.setAttribute("class", "pause");
videoControls.setAttribute("class", "play");
}
var pause = function(){
video.pause();
playButton.setAttribute("class", "play");
}
video.addEventListener('ended', function(e){
video.currentTime = 0;
pause();
videoControls.setAttribute("class", "start");
playButton.setAttribute("class", "play");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
}, false);
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
playButton.setAttribute("class", "pause");
});
video.addEventListener("ended", function(e) {
video.currentTime = 0;
playButton.setAttribute("class", "pause");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
});
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
}
}
}
}, false);
}, false);
playButton.addEventListener('click', function(e){
myVideoJsPlayer.play();
}, false);
});
var closeButton = document.getElementById("close");
closeButton.addEventListener("click", function(e) {
eyeBuild.doClose();
......@@ -136,36 +141,34 @@
box-sizing: border-box;
}
#video, #video-controls{
#video, #play-pause{
position: absolute;
width: 570px;
height: 320px;
left:15px;
top:110px;
border:none;
}
#video-controls.start{
background: url(assets_exp/img/poster1.jpg) no-repeat center center;
}
#video-controls.play {
background: none;
}
#video-controls button{
width: 100%;
height: 100%;
background: url(assets_exp/img/play.svg) no-repeat center center;
border: none;
#play-pause{
cursor: pointer;
background: url(assets_exp/img/play.svg) no-repeat center center;
}
#video-controls button.play:hover{
#play-pause.pause:hover{
background-size: 60px 60px;
}
#video-controls button.play{
background: url(assets_exp/img/play.svg) no-repeat center center;
#play-pause.pause:active{
background-size: 50px 50px;
}
#play-pause.pause{
background-size: 55px 55px;
display: block;
}
#video-controls button.pause{
background: none;
#play-pause.play{
display: none;
}
.vjs-big-play-button{
display: none !important;
}
#txt{
position: absolute;
......@@ -175,6 +178,13 @@
height:auto;
opacity: 1;
}
#overlay{
position: absolute;
width: 570px;
height: auto;
bottom: 16px;
left:15px;
}
#close{
position: absolute;
left:8px;
......@@ -190,22 +200,21 @@
#close:hover{
background: url(assets_exp/img/close-h.svg) no-repeat center center;
}
</style>
</head>
<body>
<div id="border">
<a id="click-tag" href="javascript:eyeBuild.doClick(0)">
<video id="video" width="" height="">
<source src="assets_exp/vid.mp4" type="video/mp4">
Your browser doesn't support HTML5 video.
</video>
<img id="txt" src="assets_exp/img/overlay.png" style="border-style:none">
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
<img id="overlay" src="assets_exp/img/overlay.png" alt="overlay" width="" height="">
</a>
<div id="video-controls" class="start">
<button type="button" id="play-pause" class="play"></button>
</div>
<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}'>
<source src="../vidA.mp4" type="video/mp4" />
<!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
<!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
</video>
<button type="button" id="play-pause" class="pause"></button>
<button type="button" id="close" class="close"></button>
</div>
......
......@@ -22,72 +22,77 @@
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<script type="text/javascript">
/**
* This section uses videojs with eyeBuild, tracking plays, clicks, etc.
**/
window.onload = function() {
eyeBuild.initialize();
window.isVideoClick = false;
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
var video = document.getElementById("video");
var videoControls = document.getElementById("video-controls");
//var video = document.getElementsByTagName("video")[0];
var myVideoJsPlayer = videojs('video');
var video = document.querySelector("#video video");
var playButton = document.getElementById("play-pause");
playButton.addEventListener("click", function(e) {
if (video.paused == true) {
play();
videojs(video, {}, function(){
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
video.addEventListener("play", function(e) {
eyeBuild.doIAT(0);
} else {
pause();
videoPlays++;
playButton.setAttribute("class", "play");
});
video.addEventListener("pause", function(e) {
eyeBuild.doIAT(1);
}
});
var play = function(){
video.play();
videoPlays++;
playButton.setAttribute("class", "pause");
videoControls.setAttribute("class", "play");
}
var pause = function(){
video.pause();
playButton.setAttribute("class", "play");
}
video.addEventListener('ended', function(e){
video.currentTime = 0;
pause();
videoControls.setAttribute("class", "start");
playButton.setAttribute("class", "play");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
}, false);
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
playButton.setAttribute("class", "pause");
});
video.addEventListener("ended", function(e) {
video.currentTime = 0;
playButton.setAttribute("class", "pause");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
});
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
}
}
}
}, false);
}, false);
playButton.addEventListener('click', function(e){
myVideoJsPlayer.play();
}, false);
});
var closeButton = document.getElementById("close");
closeButton.addEventListener("click", function(e) {
eyeBuild.doClose();
......@@ -136,36 +141,34 @@
box-sizing: border-box;
}
#video, #video-controls{
#video, #play-pause{
position: absolute;
width: 570px;
height: 320px;
left:15px;
top:110px;
border:none;
}
#video-controls.start{
background: url(assets_exp/img/poster2.jpg) no-repeat center center;
}
#video-controls.play {
background: none;
}
#video-controls button{
width: 100%;
height: 100%;
background: url(assets_exp/img/play.svg) no-repeat center center;
border: none;
#play-pause{
cursor: pointer;
background: url(assets_exp/img/play.svg) no-repeat center center;
}
#video-controls button.play:hover{
#play-pause.pause:hover{
background-size: 60px 60px;
}
#video-controls button.play{
background: url(assets_exp/img/play.svg) no-repeat center center;
#play-pause.pause:active{
background-size: 50px 50px;
}
#play-pause.pause{
background-size: 55px 55px;
display: block;
}
#video-controls button.pause{
background: none;
#play-pause.play{
display: none;
}
.vjs-big-play-button{
display: none !important;
}
#txt{
position: absolute;
......@@ -175,6 +178,13 @@
height:auto;
opacity: 1;
}
#overlay{
position: absolute;
width: 570px;
height: auto;
bottom: 16px;
left:15px;
}
#close{
position: absolute;
left:8px;
......@@ -190,22 +200,21 @@
#close:hover{
background: url(assets_exp/img/close-h.svg) no-repeat center center;
}
</style>
</head>
<body>
<div id="border">
<a id="click-tag" href="javascript:eyeBuild.doClick(0)">
<video id="video" width="" height="">
<source src="assets_exp/vid.mp4" type="video/mp4">
Your browser doesn't support HTML5 video.
</video>
<img id="txt" src="assets_exp/img/overlay.png" style="border-style:none">
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
<img id="overlay" src="assets_exp/img/overlay.png" alt="overlay" width="" height="">
</a>
<div id="video-controls" class="start">
<button type="button" id="play-pause" class="play"></button>
</div>
<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}'>
<source src="../vidA.mp4" type="video/mp4" />
<!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
<!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
</video>
<button type="button" id="play-pause" class="pause"></button>
<button type="button" id="close" class="close"></button>
</div>
......
......@@ -22,72 +22,77 @@
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<script type="text/javascript">
/**
* This section uses videojs with eyeBuild, tracking plays, clicks, etc.
**/
window.onload = function() {
eyeBuild.initialize();
window.isVideoClick = false;
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
var video = document.getElementById("video");
var videoControls = document.getElementById("video-controls");
//var video = document.getElementsByTagName("video")[0];
var myVideoJsPlayer = videojs('video');
var video = document.querySelector("#video video");
var playButton = document.getElementById("play-pause");
playButton.addEventListener("click", function(e) {
if (video.paused == true) {
play();
videojs(video, {}, function(){
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
video.addEventListener("play", function(e) {
eyeBuild.doIAT(0);
} else {
pause();
videoPlays++;
playButton.setAttribute("class", "play");
});
video.addEventListener("pause", function(e) {
eyeBuild.doIAT(1);
}
});
var play = function(){
video.play();
videoPlays++;
playButton.setAttribute("class", "pause");
videoControls.setAttribute("class", "play");
}
var pause = function(){
video.pause();
playButton.setAttribute("class", "play");
}
video.addEventListener('ended', function(e){
video.currentTime = 0;
pause();
videoControls.setAttribute("class", "start");
playButton.setAttribute("class", "play");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
}, false);
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
playButton.setAttribute("class", "pause");
});
video.addEventListener("ended", function(e) {
video.currentTime = 0;
playButton.setAttribute("class", "pause");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
});
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
}
}
}
}, false);
}, false);
playButton.addEventListener('click', function(e){
myVideoJsPlayer.play();
}, false);
});
var closeButton = document.getElementById("close");
closeButton.addEventListener("click", function(e) {
eyeBuild.doClose();
......@@ -136,36 +141,34 @@
box-sizing: border-box;
}
#video, #video-controls{
#video, #play-pause{
position: absolute;
width: 570px;
height: 320px;
left:15px;
top:110px;
border:none;
}
#video-controls.start{
background: url(assets_exp/img/poster3.jpg) no-repeat center center;
}
#video-controls.play {
background: none;
}
#video-controls button{
width: 100%;
height: 100%;
background: url(assets_exp/img/play.svg) no-repeat center center;
border: none;
#play-pause{
cursor: pointer;
background: url(assets_exp/img/play.svg) no-repeat center center;
}
#video-controls button.play:hover{
#play-pause.pause:hover{
background-size: 60px 60px;
}
#video-controls button.play{
background: url(assets_exp/img/play.svg) no-repeat center center;
#play-pause.pause:active{
background-size: 50px 50px;
}
#play-pause.pause{
background-size: 55px 55px;
display: block;
}
#video-controls button.pause{
background: none;
#play-pause.play{
display: none;
}
.vjs-big-play-button{
display: none !important;
}
#txt{
position: absolute;
......@@ -175,6 +178,13 @@
height:auto;
opacity: 1;
}
#overlay{
position: absolute;
width: 570px;
height: auto;
bottom: 16px;
left:15px;
}
#close{
position: absolute;
left:8px;
......@@ -190,22 +200,21 @@
#close:hover{
background: url(assets_exp/img/close-h.svg) no-repeat center center;
}
</style>
</head>
<body>
<div id="border">
<a id="click-tag" href="javascript:eyeBuild.doClick(0)">
<video id="video" width="" height="">
<source src="assets_exp/vid.mp4" type="video/mp4">
Your browser doesn't support HTML5 video.
</video>
<img id="txt" src="assets_exp/img/overlay.png" style="border-style:none">
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
<img id="overlay" src="assets_exp/img/overlay.png" alt="overlay" width="" height="">
</a>
<div id="video-controls" class="start">
<button type="button" id="play-pause" class="play"></button>
</div>
<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}'>
<source src="../vidC.mp4" type="video/mp4" />
<!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
<!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
</video>
<button type="button" id="play-pause" class="pause"></button>
<button type="button" id="close" class="close"></button>
</div>
......
......@@ -22,7 +22,11 @@
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<script type="text/javascript">
window.onload = function() {
eyeBuild.initialize();
};
</script>
<style>
......
......@@ -22,7 +22,11 @@
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<script type="text/javascript">
window.onload = function() {
eyeBuild.initialize();
};
</script>
<style>
......
......@@ -22,7 +22,11 @@
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<script type="text/javascript">
window.onload = function() {
eyeBuild.initialize();
};
</script>
<style>
......
/*!
* VERSION: 1.0.1
* DATE: 2016-04-28
*
* Requires:
* GSAP TweenMax
* GASP drawSVG Plugin ()
* This work is subject to the terms at http://greensock.com/standard-license or for
* Club GreenSock members, the software agreement that was issued with your membership.
*
* @license Copyright (c) 2016, Tenzing Communications Inc. All rights reserved.
*
* @author: Dan Rempel, dan@gotenzing.com
* Usage Example:
* var myEySvg = initEySvgFrame(10, 196, 193); // frame line weight, width, height
* document.getElementById("body").appendChild(myEySvg);
* animateEyFrame(2); // delay in seconds
* animateGradient(2); // delay in seconds
* animateFill(2); // delay in seconds
*
**/
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
/*!
* VERSION: 1.0.2
* DATE: 2016-05-03
*
* Requires:
* GSAP TweenMax
* GASP drawSVG Plugin ()
* This work is subject to the terms at http://greensock.com/standard-license or for
* Club GreenSock members, the software agreement that was issued with your membership.
*
* @license Copyright (c) 2016, Tenzing Communications Inc. All rights reserved.
*
* @author: Dan Rempel, dan@gotenzing.com
* Usage Example:
* var myEySvg = initEySvgFrame(10, 196, 193); // frame line weight, width, height
* document.getElementById("body").appendChild(myEySvg);
* animateEyFrame(2); // delay in seconds
* animateGradient(2); // delay in seconds
* animateFill(2); // delay in seconds
*
**/
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
......@@ -94,7 +94,7 @@
opacity: 0;
}
#txt2{
left: 52px;
left: 57px;
top:105px;
width: 213px;
}
......@@ -165,10 +165,10 @@
<!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
<a href="javascript:eyeBuild.doClick(0)" class="cta">
<div id="border">
<img id="logo" src="assets/img/logo.png" alt="logo">
<img id="legal" src="assets/img/legal.png" alt="legal">
<img id="arm" src="assets/img/arm.png" alt="arm">
<img id="mask" src="assets/img/mask.png" alt="mask">
<img id="logo" src="assets/img/logo.png" alt="logo">
<img id="legal" src="assets/img/legal.png" alt="legal">
<img id="txt1" src="assets/img/txt1.png" alt="txt1">
<img id="txt2" src="assets/img/txt2.png" alt="txt2">
......@@ -200,27 +200,18 @@
<!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="assets/js/DrawSVGPlugin.min.js"></script>
<script src="assets/js/ey-frame-svg-1.0.1.min.js"></script>
<script src="assets/js/ey-frame-svg-1.0.2.min.js"></script>
<script>
function stage1(){
var tl = new TimelineMax(); /* {repeat:2, repeatDelay:2} */
/*
animate boy
logo
frame w txt
dot
tags w dots
cta
hash
*/
var d=.4;
tl.to("#arm", .8, {left:-20, top:9, ease:Power1.easeInOut, delay:0 });
tl.to("#logo", .7, {opacity:1, ease:Power1.easeInOut, delay:-.5 });
tl.to("#logo", .7, {opacity:1, ease:Power1.easeInOut, delay:0 });
tl.to("#arm", .8, {left:-20, top:9, ease:Power1.easeInOut, delay:.2 });
var myeySvg = initEySvgFrame(12, 259, 218);
$("#border").append(myeySvg);
......@@ -230,7 +221,7 @@
tl.to("#txt1", d, {opacity:1, ease:Power1.easeInOut, delay:1.8 });
tl.to("#txt1", d, {opacity:0, ease:Power1.easeInOut, delay:2.5 });
animateFill(2.3);
//animateFill(2.3);
tl.to("#txt2", d, {opacity:1, ease:Power1.easeInOut, delay:0 });
tl.to("#txt2", d, {opacity:0, ease:Power1.easeInOut, delay:3 });
......
......@@ -22,72 +22,77 @@
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<script type="text/javascript">
/**
* This section uses videojs with eyeBuild, tracking plays, clicks, etc.
**/
window.onload = function() {
eyeBuild.initialize();
window.isVideoClick = false;
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
var video = document.getElementById("video");
var videoControls = document.getElementById("video-controls");
//var video = document.getElementsByTagName("video")[0];
var myVideoJsPlayer = videojs('video');
var video = document.querySelector("#video video");
var playButton = document.getElementById("play-pause");
playButton.addEventListener("click", function(e) {
if (video.paused == true) {
play();
videojs(video, {}, function(){
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
video.addEventListener("play", function(e) {
eyeBuild.doIAT(0);
} else {
pause();
videoPlays++;
playButton.setAttribute("class", "play");
});
video.addEventListener("pause", function(e) {
eyeBuild.doIAT(1);
}
});
var play = function(){
video.play();
videoPlays++;
playButton.setAttribute("class", "pause");
videoControls.setAttribute("class", "play");
}
var pause = function(){
video.pause();
playButton.setAttribute("class", "play");
}
video.addEventListener('ended', function(e){
video.currentTime = 0;
pause();
videoControls.setAttribute("class", "start");
playButton.setAttribute("class", "play");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
}, false);
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
playButton.setAttribute("class", "pause");
});
video.addEventListener("ended", function(e) {
video.currentTime = 0;
playButton.setAttribute("class", "pause");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
});
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
}
}
}
}, false);
}, false);
playButton.addEventListener('click', function(e){
myVideoJsPlayer.play();
}, false);
});
/*
var closeButton = document.getElementById("close");
closeButton.addEventListener("click", function(e) {
......@@ -140,36 +145,34 @@
background-size: 320px 480px;
}
#video, #video-controls{
#video, #play-pause{
position: absolute;
width: 290px;
height: 163px;
left:16px;
top:199px;
border:none;
}
#video-controls.start{
background: url(assets/img/poster1.jpg) no-repeat center center;
}
#video-controls.play {
background: none;
}
#video-controls button{
width: 100%;
height: 100%;
background: url(assets/img/play.svg) no-repeat center center;
border: none;
#play-pause{
cursor: pointer;
background: url(assets/img/play.svg) no-repeat center center;
}
#video-controls button.play:hover{
#play-pause.pause:hover{
background-size: 60px 60px;
}
#video-controls button.play{
background: url(assets/img/play.svg) no-repeat center center;
#play-pause.pause:active{
background-size: 50px 50px;
}
#play-pause.pause{
background-size: 55px 55px;
display: block;
}
#video-controls button.pause{
background: none;
#play-pause.play{
display: none;
}
.vjs-big-play-button{
display: none !important;
}
#txt {
position: absolute;
......@@ -186,20 +189,18 @@
<body>
<div id="border">
<a id="click-tag" href="javascript:eyeBuild.doClick(0)">
<a id="click-tag" href="javascript:eyeBuild.doClick(0);">
<img id="txt" src="assets/img/slice.svg" alt="txt">
<video id="video" width="" height="">
<source src="assets/vid.mp4" type="video/mp4">
Your browser doesn't support HTML5 video.
</video>
<img id="txt" src="assets/img/overlay.png" style="border-style:none">
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
</a>
<div id="video-controls" class="start">
<button type="button" id="play-pause" class="play"></button>
</div>
<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}'>
<source src="../vidA.mp4" type="video/mp4" />
<!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
<!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
</video>
<button id="play-pause" class="pause"></button>
</div>
<!-- jQuery-->
<script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
......
......@@ -22,72 +22,77 @@
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<script type="text/javascript">
/**
* This section uses videojs with eyeBuild, tracking plays, clicks, etc.
**/
window.onload = function() {
eyeBuild.initialize();
window.isVideoClick = false;
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
var video = document.getElementById("video");
var videoControls = document.getElementById("video-controls");
//var video = document.getElementsByTagName("video")[0];
var myVideoJsPlayer = videojs('video');
var video = document.querySelector("#video video");
var playButton = document.getElementById("play-pause");
playButton.addEventListener("click", function(e) {
if (video.paused == true) {
play();
videojs(video, {}, function(){
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
video.addEventListener("play", function(e) {
eyeBuild.doIAT(0);
} else {
pause();
videoPlays++;
playButton.setAttribute("class", "play");
});
video.addEventListener("pause", function(e) {
eyeBuild.doIAT(1);
}
});
var play = function(){
video.play();
videoPlays++;
playButton.setAttribute("class", "pause");
videoControls.setAttribute("class", "play");
}
var pause = function(){
video.pause();
playButton.setAttribute("class", "play");
}
video.addEventListener('ended', function(e){
video.currentTime = 0;
pause();
videoControls.setAttribute("class", "start");
playButton.setAttribute("class", "play");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
}, false);
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
playButton.setAttribute("class", "pause");
});
video.addEventListener("ended", function(e) {
video.currentTime = 0;
playButton.setAttribute("class", "pause");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
});
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
}
}
}
}, false);
}, false);
playButton.addEventListener('click', function(e){
myVideoJsPlayer.play();
}, false);
});
/*
var closeButton = document.getElementById("close");
closeButton.addEventListener("click", function(e) {
......@@ -140,36 +145,34 @@
background-size: 320px 480px;
}
#video, #video-controls{
#video, #play-pause{
position: absolute;
width: 290px;
height: 163px;
left:16px;
top:199px;
border:none;
}
#video-controls.start{
background: url(assets/img/poster2.jpg) no-repeat center center;
}
#video-controls.play {
background: none;
}
#video-controls button{
width: 100%;
height: 100%;
background: url(assets/img/play.svg) no-repeat center center;
border: none;
#play-pause{
cursor: pointer;
background: url(assets/img/play.svg) no-repeat center center;
}
#video-controls button.play:hover{
#play-pause.pause:hover{
background-size: 60px 60px;
}
#video-controls button.play{
background: url(assets/img/play.svg) no-repeat center center;
#play-pause.pause:active{
background-size: 50px 50px;
}
#play-pause.pause{
background-size: 55px 55px;
display: block;
}
#video-controls button.pause{
background: none;
#play-pause.play{
display: none;
}
.vjs-big-play-button{
display: none !important;
}
#txt {
position: absolute;
......@@ -186,20 +189,18 @@
<body>
<div id="border">
<a id="click-tag" href="javascript:eyeBuild.doClick(0)">
<a id="click-tag" href="javascript:eyeBuild.doClick(0);">
<img id="txt" src="assets/img/slice.svg" alt="txt">
<video id="video" width="" height="">
<source src="assets/vid.mp4" type="video/mp4">
Your browser doesn't support HTML5 video.
</video>
<img id="txt" src="assets/img/overlay.png" style="border-style:none">
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
</a>
<div id="video-controls" class="start">
<button type="button" id="play-pause" class="play"></button>
</div>
<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}'>
<source src="../vidA.mp4" type="video/mp4" />
<!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
<!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
</video>
<button id="play-pause" class="pause"></button>
</div>
<!-- jQuery-->
<script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
......
......@@ -22,72 +22,77 @@
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<script type="text/javascript">
/**
* This section uses videojs with eyeBuild, tracking plays, clicks, etc.
**/
window.onload = function() {
eyeBuild.initialize();
window.isVideoClick = false;
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
var video = document.getElementById("video");
var videoControls = document.getElementById("video-controls");
//var video = document.getElementsByTagName("video")[0];
var myVideoJsPlayer = videojs('video');
var video = document.querySelector("#video video");
var playButton = document.getElementById("play-pause");
playButton.addEventListener("click", function(e) {
if (video.paused == true) {
play();
videojs(video, {}, function(){
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
video.addEventListener("play", function(e) {
eyeBuild.doIAT(0);
} else {
pause();
videoPlays++;
playButton.setAttribute("class", "play");
});
video.addEventListener("pause", function(e) {
eyeBuild.doIAT(1);
}
});
var play = function(){
video.play();
videoPlays++;
playButton.setAttribute("class", "pause");
videoControls.setAttribute("class", "play");
}
var pause = function(){
video.pause();
playButton.setAttribute("class", "play");
}
video.addEventListener('ended', function(e){
video.currentTime = 0;
pause();
videoControls.setAttribute("class", "start");
playButton.setAttribute("class", "play");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
}, false);
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
playButton.setAttribute("class", "pause");
});
video.addEventListener("ended", function(e) {
video.currentTime = 0;
playButton.setAttribute("class", "pause");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
});
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
}
}
}
}, false);
}, false);
playButton.addEventListener('click', function(e){
myVideoJsPlayer.play();
}, false);
});
/*
var closeButton = document.getElementById("close");
closeButton.addEventListener("click", function(e) {
......@@ -140,36 +145,34 @@
background-size: 320px 480px;
}
#video, #video-controls{
#video, #play-pause{
position: absolute;
width: 290px;
height: 163px;
left:16px;
top:199px;
border:none;
}
#video-controls.start{
background: url(assets/img/poster3.jpg) no-repeat center center;
}
#video-controls.play {
background: none;
}
#video-controls button{
width: 100%;
height: 100%;
background: url(assets/img/play.svg) no-repeat center center;
border: none;
#play-pause{
cursor: pointer;
background: url(assets/img/play.svg) no-repeat center center;
}
#video-controls button.play:hover{
#play-pause.pause:hover{
background-size: 60px 60px;
}
#video-controls button.play{
background: url(assets/img/play.svg) no-repeat center center;
#play-pause.pause:active{
background-size: 50px 50px;
}
#play-pause.pause{
background-size: 55px 55px;
display: block;
}
#video-controls button.pause{
background: none;
#play-pause.play{
display: none;
}
.vjs-big-play-button{
display: none !important;
}
#txt {
position: absolute;
......@@ -186,20 +189,18 @@
<body>
<div id="border">
<a id="click-tag" href="javascript:eyeBuild.doClick(0)">
<a id="click-tag" href="javascript:eyeBuild.doClick(0);">
<img id="txt" src="assets/img/slice.svg" alt="txt">
<video id="video" width="" height="">
<source src="assets/vid.mp4" type="video/mp4">
Your browser doesn't support HTML5 video.
</video>
<img id="txt" src="assets/img/overlay.png" style="border-style:none">
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
</a>
<div id="video-controls" class="start">
<button type="button" id="play-pause" class="play"></button>
</div>
<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}'>
<source src="../vidC.mp4" type="video/mp4" />
<!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
<!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
</video>
<button id="play-pause" class="pause"></button>
</div>
<!-- jQuery-->
<script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
......
......@@ -22,72 +22,77 @@
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<script type="text/javascript">
/**
* This section uses videojs with eyeBuild, tracking plays, clicks, etc.
**/
window.onload = function() {
eyeBuild.initialize();
window.isVideoClick = false;
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
var video = document.getElementById("video");
var videoControls = document.getElementById("video-controls");
//var video = document.getElementsByTagName("video")[0];
var myVideoJsPlayer = videojs('video');
var video = document.querySelector("#video video");
var playButton = document.getElementById("play-pause");
playButton.addEventListener("click", function(e) {
if (video.paused == true) {
play();
videojs(video, {}, function(){
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
video.addEventListener("play", function(e) {
eyeBuild.doIAT(0);
} else {
pause();
videoPlays++;
playButton.setAttribute("class", "play");
});
video.addEventListener("pause", function(e) {
eyeBuild.doIAT(1);
}
});
var play = function(){
video.play();
videoPlays++;
playButton.setAttribute("class", "pause");
videoControls.setAttribute("class", "play");
}
var pause = function(){
video.pause();
playButton.setAttribute("class", "play");
}
video.addEventListener('ended', function(e){
video.currentTime = 0;
pause();
videoControls.setAttribute("class", "start");
playButton.setAttribute("class", "play");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
}, false);
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
playButton.setAttribute("class", "pause");
});
video.addEventListener("ended", function(e) {
video.currentTime = 0;
playButton.setAttribute("class", "pause");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
});
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
}
}
}
}, false);
}, false);
playButton.addEventListener('click', function(e){
myVideoJsPlayer.play();
}, false);
});
/*
var closeButton = document.getElementById("close");
closeButton.addEventListener("click", function(e) {
......@@ -139,36 +144,34 @@
background-size: 768px 432px;
}
#video, #video-controls{
#video, #play-pause{
position: absolute;
width: 710px;
height: 401px;
left:28px;
top:476px;
border:none;
}
#video-controls.start{
background: url(assets/img/poster1.jpg) no-repeat center center;
}
#video-controls.play {
background: none;
}
#video-controls button{
width: 100%;
height: 100%;
background: url(assets/img/play.svg) no-repeat center center;
border: none;
#play-pause{
cursor: pointer;
background: url(assets/img/play.svg) no-repeat center center;
}
#video-controls button.play:hover{
#play-pause.pause:hover{
background-size: 60px 60px;
}
#video-controls button.play{
background: url(assets/img/play.svg) no-repeat center center;
#play-pause.pause:active{
background-size: 50px 50px;
}
#play-pause.pause{
background-size: 55px 55px;
display: block;
}
#video-controls button.pause{
background: none;
#play-pause.play{
display: none;
}
.vjs-big-play-button{
display: none !important;
}
#txt {
position: absolute;
......@@ -192,20 +195,19 @@
<body>
<div id="border">
<a id="click-tag" href="javascript:eyeBuild.doClick(0)">
<a id="click-tag" href="javascript:eyeBuild.doClick(0);">
<img id="txt" src="assets/img/slice.svg" alt="txt">
<video id="video" width="" height="">
<source src="assets/vid.mp4" type="video/mp4">
Your browser doesn't support HTML5 video.
</video>
<img id="overlay" src="assets/img/overlay.png" style="border-style:none">
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
</a>
<div id="video-controls" class="start">
<button type="button" id="play-pause" class="play"></button>
</div>
<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}'>
<source src="../vidA.mp4" type="video/mp4" />
<!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
<!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
</video>
<button id="play-pause" class="pause"></button>
</div>
<!-- jQuery-->
<script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
......
......@@ -22,72 +22,77 @@
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<script type="text/javascript">
/**
* This section uses videojs with eyeBuild, tracking plays, clicks, etc.
**/
window.onload = function() {
eyeBuild.initialize();
window.isVideoClick = false;
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
var video = document.getElementById("video");
var videoControls = document.getElementById("video-controls");
//var video = document.getElementsByTagName("video")[0];
var myVideoJsPlayer = videojs('video');
var video = document.querySelector("#video video");
var playButton = document.getElementById("play-pause");
playButton.addEventListener("click", function(e) {
if (video.paused == true) {
play();
videojs(video, {}, function(){
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
video.addEventListener("play", function(e) {
eyeBuild.doIAT(0);
} else {
pause();
videoPlays++;
playButton.setAttribute("class", "play");
});
video.addEventListener("pause", function(e) {
eyeBuild.doIAT(1);
}
});
var play = function(){
video.play();
videoPlays++;
playButton.setAttribute("class", "pause");
videoControls.setAttribute("class", "play");
}
var pause = function(){
video.pause();
playButton.setAttribute("class", "play");
}
video.addEventListener('ended', function(e){
video.currentTime = 0;
pause();
videoControls.setAttribute("class", "start");
playButton.setAttribute("class", "play");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
}, false);
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
playButton.setAttribute("class", "pause");
});
video.addEventListener("ended", function(e) {
video.currentTime = 0;
playButton.setAttribute("class", "pause");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
});
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
}
}
}
}, false);
}, false);
playButton.addEventListener('click', function(e){
myVideoJsPlayer.play();
}, false);
});
/*
var closeButton = document.getElementById("close");
closeButton.addEventListener("click", function(e) {
......@@ -139,36 +144,34 @@
background-size: 768px 432px;
}
#video, #video-controls{
#video, #play-pause{
position: absolute;
width: 710px;
height: 401px;
left:28px;
top:476px;
border:none;
}
#video-controls.start{
background: url(assets/img/poster2.jpg) no-repeat center center;
}
#video-controls.play {
background: none;
}
#video-controls button{
width: 100%;
height: 100%;
background: url(assets/img/play.svg) no-repeat center center;
border: none;
#play-pause{
cursor: pointer;
background: url(assets/img/play.svg) no-repeat center center;
}
#video-controls button.play:hover{
#play-pause.pause:hover{
background-size: 60px 60px;
}
#video-controls button.play{
background: url(assets/img/play.svg) no-repeat center center;
#play-pause.pause:active{
background-size: 50px 50px;
}
#play-pause.pause{
background-size: 55px 55px;
display: block;
}
#video-controls button.pause{
background: none;
#play-pause.play{
display: none;
}
.vjs-big-play-button{
display: none !important;
}
#txt {
position: absolute;
......@@ -192,20 +195,19 @@
<body>
<div id="border">
<a id="click-tag" href="javascript:eyeBuild.doClick(0)">
<a id="click-tag" href="javascript:eyeBuild.doClick(0);">
<img id="txt" src="assets/img/slice.svg" alt="txt">
<video id="video" width="" height="">
<source src="assets/vid.mp4" type="video/mp4">
Your browser doesn't support HTML5 video.
</video>
<img id="overlay" src="assets/img/overlay.png" style="border-style:none">
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
</a>
<div id="video-controls" class="start">
<button type="button" id="play-pause" class="play"></button>
</div>
<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}'>
<source src="../vidA.mp4" type="video/mp4" />
<!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
<!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
</video>
<button id="play-pause" class="pause"></button>
</div>
<!-- jQuery-->
<script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
......
......@@ -22,72 +22,77 @@
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<script type="text/javascript">
/**
* This section uses videojs with eyeBuild, tracking plays, clicks, etc.
**/
window.onload = function() {
eyeBuild.initialize();
window.isVideoClick = false;
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
var video = document.getElementById("video");
var videoControls = document.getElementById("video-controls");
//var video = document.getElementsByTagName("video")[0];
var myVideoJsPlayer = videojs('video');
var video = document.querySelector("#video video");
var playButton = document.getElementById("play-pause");
playButton.addEventListener("click", function(e) {
if (video.paused == true) {
play();
videojs(video, {}, function(){
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
video.addEventListener("play", function(e) {
eyeBuild.doIAT(0);
} else {
pause();
videoPlays++;
playButton.setAttribute("class", "play");
});
video.addEventListener("pause", function(e) {
eyeBuild.doIAT(1);
}
});
var play = function(){
video.play();
videoPlays++;
playButton.setAttribute("class", "pause");
videoControls.setAttribute("class", "play");
}
var pause = function(){
video.pause();
playButton.setAttribute("class", "play");
}
video.addEventListener('ended', function(e){
video.currentTime = 0;
pause();
videoControls.setAttribute("class", "start");
playButton.setAttribute("class", "play");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
}, false);
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
playButton.setAttribute("class", "pause");
});
video.addEventListener("ended", function(e) {
video.currentTime = 0;
playButton.setAttribute("class", "pause");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
});
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
}
}
}
}, false);
}, false);
playButton.addEventListener('click', function(e){
myVideoJsPlayer.play();
}, false);
});
/*
var closeButton = document.getElementById("close");
closeButton.addEventListener("click", function(e) {
......@@ -139,36 +144,34 @@
background-size: 768px 432px;
}
#video, #video-controls{
#video, #play-pause{
position: absolute;
width: 710px;
height: 401px;
left:28px;
top:476px;
border:none;
}
#video-controls.start{
background: url(assets/img/poster3.jpg) no-repeat center center;
}
#video-controls.play {
background: none;
}
#video-controls button{
width: 100%;
height: 100%;
background: url(assets/img/play.svg) no-repeat center center;
border: none;
#play-pause{
cursor: pointer;
background: url(assets/img/play.svg) no-repeat center center;
}
#video-controls button.play:hover{
#play-pause.pause:hover{
background-size: 60px 60px;
}
#video-controls button.play{
background: url(assets/img/play.svg) no-repeat center center;
#play-pause.pause:active{
background-size: 50px 50px;
}
#play-pause.pause{
background-size: 55px 55px;
display: block;
}
#video-controls button.pause{
background: none;
#play-pause.play{
display: none;
}
.vjs-big-play-button{
display: none !important;
}
#txt {
position: absolute;
......@@ -192,20 +195,19 @@
<body>
<div id="border">
<a id="click-tag" href="javascript:eyeBuild.doClick(0)">
<a id="click-tag" href="javascript:eyeBuild.doClick(0);">
<img id="txt" src="assets/img/slice.svg" alt="txt">
<video id="video" width="" height="">
<source src="assets/vid.mp4" type="video/mp4">
Your browser doesn't support HTML5 video.
</video>
<img id="overlay" src="assets/img/overlay.png" style="border-style:none">
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
</a>
<div id="video-controls" class="start">
<button type="button" id="play-pause" class="play"></button>
</div>
<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}'>
<source src="../vidC.mp4" type="video/mp4" />
<!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
<!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
</video>
<button id="play-pause" class="pause"></button>
</div>
<!-- jQuery-->
<script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
......
......@@ -22,72 +22,77 @@
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<script type="text/javascript">
/**
* This section uses videojs with eyeBuild, tracking plays, clicks, etc.
**/
window.onload = function() {
eyeBuild.initialize();
window.isVideoClick = false;
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
var video = document.getElementById("video");
var videoControls = document.getElementById("video-controls");
//var video = document.getElementsByTagName("video")[0];
var myVideoJsPlayer = videojs('video');
var video = document.querySelector("#video video");
var playButton = document.getElementById("play-pause");
playButton.addEventListener("click", function(e) {
if (video.paused == true) {
play();
videojs(video, {}, function(){
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
video.addEventListener("play", function(e) {
eyeBuild.doIAT(0);
} else {
pause();
videoPlays++;
playButton.setAttribute("class", "play");
});
video.addEventListener("pause", function(e) {
eyeBuild.doIAT(1);
}
});
var play = function(){
video.play();
videoPlays++;
playButton.setAttribute("class", "pause");
videoControls.setAttribute("class", "play");
}
var pause = function(){
video.pause();
playButton.setAttribute("class", "play");
}
video.addEventListener('ended', function(e){
video.currentTime = 0;
pause();
videoControls.setAttribute("class", "start");
playButton.setAttribute("class", "play");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
}, false);
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
playButton.setAttribute("class", "pause");
});
video.addEventListener("ended", function(e) {
video.currentTime = 0;
playButton.setAttribute("class", "pause");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
});
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
}
}
}
}, false);
}, false);
playButton.addEventListener('click', function(e){
myVideoJsPlayer.play();
}, false);
});
/*
var closeButton = document.getElementById("close");
closeButton.addEventListener("click", function(e) {
......@@ -139,36 +144,34 @@
background-size: 561px 250px;
}
#video, #video-controls{
#video, #play-pause{
position: absolute;
width: 382px;
height: 215px;
left:570px;
top:17px;
border:none;
}
#video-controls.start{
background: url(assets/img/poster1.jpg) no-repeat center center;
}
#video-controls.play {
background: none;
}
#video-controls button{
width: 100%;
height: 100%;
background: url(assets/img/play.svg) no-repeat center center;
border: none;
#play-pause{
cursor: pointer;
background: url(assets/img/play.svg) no-repeat center center;
}
#video-controls button.play:hover{
#play-pause.pause:hover{
background-size: 60px 60px;
}
#video-controls button.play{
background: url(assets/img/play.svg) no-repeat center center;
#play-pause.pause:active{
background-size: 50px 50px;
}
#play-pause.pause{
background-size: 55px 55px;
display: block;
}
#video-controls button.pause{
background: none;
#play-pause.play{
display: none;
}
.vjs-big-play-button{
display: none !important;
}
#txt {
position: absolute;
......@@ -185,17 +188,15 @@
<body>
<div id="border">
<a id="click-tag" href="javascript:eyeBuild.doClick(0)">
<a id="click-tag" href="javascript:eyeBuild.doClick(0);">
<img id="txt" src="assets/img/slice.svg" alt="txt">
<video id="video" width="" height="">
<source src="assets/vid.mp4" type="video/mp4">
Your browser doesn't support HTML5 video.
</video>
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
</a>
<div id="video-controls" class="start">
<button type="button" id="play-pause" class="play"></button>
</div>
<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}'>
<source src="../vidA.mp4" type="video/mp4" />
<!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
<!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
</video>
<button id="play-pause" class="pause"></button>
</div>
<!-- jQuery-->
......
......@@ -22,72 +22,77 @@
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<script type="text/javascript">
/**
* This section uses videojs with eyeBuild, tracking plays, clicks, etc.
**/
window.onload = function() {
eyeBuild.initialize();
window.isVideoClick = false;
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
var video = document.getElementById("video");
var videoControls = document.getElementById("video-controls");
//var video = document.getElementsByTagName("video")[0];
var myVideoJsPlayer = videojs('video');
var video = document.querySelector("#video video");
var playButton = document.getElementById("play-pause");
playButton.addEventListener("click", function(e) {
if (video.paused == true) {
play();
videojs(video, {}, function(){
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
video.addEventListener("play", function(e) {
eyeBuild.doIAT(0);
} else {
pause();
videoPlays++;
playButton.setAttribute("class", "play");
});
video.addEventListener("pause", function(e) {
eyeBuild.doIAT(1);
}
});
var play = function(){
video.play();
videoPlays++;
playButton.setAttribute("class", "pause");
videoControls.setAttribute("class", "play");
}
var pause = function(){
video.pause();
playButton.setAttribute("class", "play");
}
video.addEventListener('ended', function(e){
video.currentTime = 0;
pause();
videoControls.setAttribute("class", "start");
playButton.setAttribute("class", "play");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
}, false);
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
playButton.setAttribute("class", "pause");
});
video.addEventListener("ended", function(e) {
video.currentTime = 0;
playButton.setAttribute("class", "pause");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
});
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
}
}
}
}, false);
}, false);
playButton.addEventListener('click', function(e){
myVideoJsPlayer.play();
}, false);
});
/*
var closeButton = document.getElementById("close");
closeButton.addEventListener("click", function(e) {
......@@ -139,36 +144,34 @@
background-size: 561px 250px;
}
#video, #video-controls{
#video, #play-pause{
position: absolute;
width: 382px;
height: 215px;
left:570px;
top:17px;
border:none;
}
#video-controls.start{
background: url(assets/img/poster2.jpg) no-repeat center center;
}
#video-controls.play {
background: none;
}
#video-controls button{
width: 100%;
height: 100%;
background: url(assets/img/play.svg) no-repeat center center;
border: none;
#play-pause{
cursor: pointer;
background: url(assets/img/play.svg) no-repeat center center;
}
#video-controls button.play:hover{
#play-pause.pause:hover{
background-size: 60px 60px;
}
#video-controls button.play{
background: url(assets/img/play.svg) no-repeat center center;
#play-pause.pause:active{
background-size: 50px 50px;
}
#play-pause.pause{
background-size: 55px 55px;
display: block;
}
#video-controls button.pause{
background: none;
#play-pause.play{
display: none;
}
.vjs-big-play-button{
display: none !important;
}
#txt {
position: absolute;
......@@ -185,17 +188,15 @@
<body>
<div id="border">
<a id="click-tag" href="javascript:eyeBuild.doClick(0)">
<a id="click-tag" href="javascript:eyeBuild.doClick(0);">
<img id="txt" src="assets/img/slice.svg" alt="txt">
<video id="video" width="" height="">
<source src="assets/vid.mp4" type="video/mp4">
Your browser doesn't support HTML5 video.
</video>
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
</a>
<div id="video-controls" class="start">
<button type="button" id="play-pause" class="play"></button>
</div>
<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}'>
<source src="../vidA.mp4" type="video/mp4" />
<!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
<!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
</video>
<button id="play-pause" class="pause"></button>
</div>
<!-- jQuery-->
......
......@@ -22,72 +22,77 @@
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<script type="text/javascript">
/**
* This section uses videojs with eyeBuild, tracking plays, clicks, etc.
**/
window.onload = function() {
eyeBuild.initialize();
window.isVideoClick = false;
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
var video = document.getElementById("video");
var videoControls = document.getElementById("video-controls");
//var video = document.getElementsByTagName("video")[0];
var myVideoJsPlayer = videojs('video');
var video = document.querySelector("#video video");
var playButton = document.getElementById("play-pause");
playButton.addEventListener("click", function(e) {
if (video.paused == true) {
play();
videojs(video, {}, function(){
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
video.addEventListener("play", function(e) {
eyeBuild.doIAT(0);
} else {
pause();
videoPlays++;
playButton.setAttribute("class", "play");
});
video.addEventListener("pause", function(e) {
eyeBuild.doIAT(1);
}
});
var play = function(){
video.play();
videoPlays++;
playButton.setAttribute("class", "pause");
videoControls.setAttribute("class", "play");
}
var pause = function(){
video.pause();
playButton.setAttribute("class", "play");
}
video.addEventListener('ended', function(e){
video.currentTime = 0;
pause();
videoControls.setAttribute("class", "start");
playButton.setAttribute("class", "play");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
}, false);
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
playButton.setAttribute("class", "pause");
});
video.addEventListener("ended", function(e) {
video.currentTime = 0;
playButton.setAttribute("class", "pause");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
});
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
}
}
}
}, false);
}, false);
playButton.addEventListener('click', function(e){
myVideoJsPlayer.play();
}, false);
});
/*
var closeButton = document.getElementById("close");
closeButton.addEventListener("click", function(e) {
......@@ -135,40 +140,38 @@
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
background: url(assets/img/back2.jpg) no-repeat #000;
background: url(assets/img/back3.jpg) no-repeat #000;
background-size: 561px 250px;
}
#video, #video-controls{
#video, #play-pause{
position: absolute;
width: 382px;
height: 215px;
left:570px;
top:17px;
border:none;
}
#video-controls.start{
background: url(assets/img/poster2.jpg) no-repeat center center;
}
#video-controls.play {
background: none;
}
#video-controls button{
width: 100%;
height: 100%;
background: url(assets/img/play.svg) no-repeat center center;
border: none;
#play-pause{
cursor: pointer;
background: url(assets/img/play.svg) no-repeat center center;
}
#video-controls button.play:hover{
#play-pause.pause:hover{
background-size: 60px 60px;
}
#video-controls button.play{
background: url(assets/img/play.svg) no-repeat center center;
#play-pause.pause:active{
background-size: 50px 50px;
}
#play-pause.pause{
background-size: 55px 55px;
display: block;
}
#video-controls button.pause{
background: none;
#play-pause.play{
display: none;
}
.vjs-big-play-button{
display: none !important;
}
#txt {
position: absolute;
......@@ -185,17 +188,15 @@
<body>
<div id="border">
<a id="click-tag" href="javascript:eyeBuild.doClick(0)">
<a id="click-tag" href="javascript:eyeBuild.doClick(0);">
<img id="txt" src="assets/img/slice.svg" alt="txt">
<video id="video" width="" height="">
<source src="assets/vid.mp4" type="video/mp4">
Your browser doesn't support HTML5 video.
</video>
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
</a>
<div id="video-controls" class="start">
<button type="button" id="play-pause" class="play"></button>
</div>
<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}'>
<source src="../vidC.mp4" type="video/mp4" />
<!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
<!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
</video>
<button id="play-pause" class="pause"></button>
</div>
<!-- jQuery-->
......
/*!
* VERSION: 1.0.1
* DATE: 2016-04-28
* VERSION: 1.0.2
* DATE: 2016-05-03
*
* Requires:
* GSAP TweenMax
......@@ -19,6 +19,9 @@
* animateGradient(2); // delay in seconds
* animateFill(2); // delay in seconds
*
* MINIFY:
* http://esprima.org/demo/minify.html
*
**/
......@@ -118,14 +121,7 @@ var initEySvgFrame = function (myWeight, myWidth, myHeight)
" L " + myWeight/2 + " " + (eyAngleHeight+myWeight/2) +
" V " + (myHeight-myWeight-eyDotSpacing)
);
eySvg.appendChild(eyStroke);
//// draw the fill shape for def ////
eyFill = createShape ("ey-gradient", eyColor);
eySvg.appendChild(eyFill);
eySvg.appendChild(eyStroke);
return eySvg;
......@@ -146,6 +142,12 @@ var animateGradient = function (myDelay)
};
var animateFill = function (myDelay)
{
//// draw the fill shape for def ////
if (typeof eyFill === 'undefined' || variable === null) {
// variable is undefined or null
eyFill = createShape ("ey-gradient", eyColor);
eySvg.appendChild(eyFill);
}
tl.fromTo(eyFill, .5, {y:eySvgHeight}, {y:0, ease:Power2.easeIn, delay:myDelay});
};
......
/*!
* VERSION: 1.0.2
* DATE: 2016-05-03
*
* Requires:
* GSAP TweenMax
* GASP drawSVG Plugin ()
* This work is subject to the terms at http://greensock.com/standard-license or for
* Club GreenSock members, the software agreement that was issued with your membership.
*
* @license Copyright (c) 2016, Tenzing Communications Inc. All rights reserved.
*
* @author: Dan Rempel, dan@gotenzing.com
* Usage Example:
* var myEySvg = initEySvgFrame(10, 196, 193); // frame line weight, width, height
* document.getElementById("body").appendChild(myEySvg);
* animateEyFrame(2); // delay in seconds
* animateGradient(2); // delay in seconds
* animateFill(2); // delay in seconds
*
**/
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