Skip to content

Tenzing / banners-with-skip

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

HHF auto play w mute; change play button design

1 parent 0a73167c
Inline Side-by-side
Showing 4 changed files with 70 additions and 26 deletions
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="83.28" height="83.28" viewBox="0 0 83.28 83.28"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>play</title><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><polygon class="cls-3" points="33.38 60.14 33.38 23.68 62.26 41.91 33.38 60.14"/></g></svg>
\ No newline at end of file
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 83.3 83.3" style="enable-background:new 0 0 83.3 83.3;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.75;}
.st1{fill:none;stroke:#FFFFFF;stroke-width:4;stroke-miterlimit:10;}
.st2{fill:#FFFFFF;}
</style>
<title>play</title>
<g class="st0">
<circle class="st1" cx="41.6" cy="41.6" r="37.6"/>
<polygon class="st2" points="29.5,57.3 29.5,26.5 62.3,41.9 "/>
</g>
</svg>
......
......@@ -46,18 +46,6 @@
eyeBuild.doIAT(1);
}
});
var play = function(){
video.play();
videoPlays++;
videoControls.className = ""
toggleClass(videoControls, "playing");
toggleClass(playButton, "playing");
}
var pause = function(){
video.pause();
toggleClass(videoControls, "playing");
toggleClass(playButton, "playing");
}
video.addEventListener('ended', function(e){
video.currentTime = 0;
pause();
......@@ -99,6 +87,25 @@
}
}
}, false);
var play = function(){
video.play();
videoPlays++;
videoControls.className = ""
toggleClass(videoControls, "playing");
toggleClass(playButton, "playing");
}
var pause = function(){
video.pause();
toggleClass(videoControls, "playing");
toggleClass(playButton, "playing");
}
var mute = function(){
video.muted=true;
toggleClass(muteButton, "muted");
}
mute();
play();
}
......
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="83.28" height="83.28" viewBox="0 0 83.28 83.28"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>play</title><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><polygon class="cls-3" points="33.38 60.14 33.38 23.68 62.26 41.91 33.38 60.14"/></g></svg>
\ No newline at end of file
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 83.3 83.3" style="enable-background:new 0 0 83.3 83.3;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.75;}
.st1{fill:none;stroke:#FFFFFF;stroke-width:4;stroke-miterlimit:10;}
.st2{fill:#FFFFFF;}
</style>
<title>play</title>
<g class="st0">
<circle class="st1" cx="41.6" cy="41.6" r="37.6"/>
<polygon class="st2" points="29.5,57.3 29.5,26.5 62.3,41.9 "/>
</g>
</svg>
......
......@@ -46,18 +46,6 @@
eyeBuild.doIAT(1);
}
});
var play = function(){
video.play();
videoPlays++;
videoControls.className = ""
toggleClass(videoControls, "playing");
toggleClass(playButton, "playing");
}
var pause = function(){
video.pause();
toggleClass(videoControls, "playing");
toggleClass(playButton, "playing");
}
video.addEventListener('ended', function(e){
video.currentTime = 0;
pause();
......@@ -99,6 +87,25 @@
}
}
}, false);
var play = function(){
video.play();
videoPlays++;
videoControls.className = ""
toggleClass(videoControls, "playing");
toggleClass(playButton, "playing");
}
var pause = function(){
video.pause();
toggleClass(videoControls, "playing");
toggleClass(playButton, "playing");
}
var mute = function(){
video.muted=true;
toggleClass(muteButton, "muted");
}
mute();
play();
}
......