How to replace play/pause icon toggle with text
var tl = new TimelineMax(),
$videoContainer = $('.cb-video-container'),
$video = $videoContainer.find('.video'),
$playPauseClickArea = $videoContainer.find('.play-pause--click-area'),
$playPauseContainer = $videoContainer.find('.play-pause--container'),
$playIcon = $videoContainer.find('.play-icon'),
$pauseIcon = $videoContainer.find('.pause-icon'),
iconIsToggled = false,
iconEase = Back.easeInOut.config(1.7),
iconDuration = 0.3;
setupVideo();
// functions
function setupVideo() {
TweenMax.set($pauseIcon, {
autoAlpha: 0,
scale: 0
});
TweenMax.set($playPauseClickArea, {
backgroundColor: 'rgba(0, 0, 0, 0.5)'
})
};
function showPaused() {
iconIsToggled = true;
tl.play();
tl.to($playIcon, iconDuration, {
autoAlpha: 0,
scale: 0,
ease: iconEase
}, 0);
tl.to($pauseIcon, iconDuration, {
autoAlpha: 1,
scale: 1,
ease: iconEase
}, 0);
TweenMax.to($playPauseClickArea, iconDuration, {
backgroundColor: 'rgba(0, 0, 0, 0)'
}, 0)
console.log('playing - show pause');
$video.get(0).play();
}
function showPlay() {
iconIsToggled = false;
tl.reverse();
TweenMax.to($playPauseClickArea, iconDuration, {
backgroundColor: 'rgba(0, 0, 0, 0.5)'
}, 0)
console.log('paused - show play');
$video.get(0).pause();
}
// event handlers
$playPauseClickArea.on('click', function() {
!iconIsToggled ? showPaused() : showPlay();
});
$playPauseClickArea.on('mouseleave', function() {
if (iconIsToggled === true) TweenMax.to($playPauseContainer, iconDuration, {
autoAlpha: 0
}, 0);
console.log('mouseleave');
});
$playPauseClickArea.on('mouseenter', function() {
TweenMax.to($playPauseContainer, iconDuration, {
autoAlpha: 1
}, 0);
console.log('mouseenter');
});
$video.on('ended', function() {
// TODO: showReplay()
console.log('video ended')
});
* {
color: #fff;
}
.cb-video-container {
position: relative;
padding: 0;
}
.video {
display: block;
width: 100%;
margin: 0;
padding: 0;
}
.play-pause--click-area {
width: 100%;
height: 100%;
top: 0;
position: absolute;
}
.play-pause--container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
}
.play-pause--container .play-pause--icon {
margin: auto;
right: 0;
left: 0;
position: absolute;
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}
.play-pause--container .play-icon:after {
content: 'Play';
font-size: 2.2rem;
line-height: 0.3;
background: inherit;
width: 10px;
height: 30px;
left: 15px;
position: absolute;
}
.play-pause--container .pause-icon:after {
content: 'Pause';
font-size: 2.2rem;
line-height: 1.2;
background: inherit;
width: 10px;
height: 30px;
left: 15px;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<div class="cb-video-container">
<video loop class="video" preload="auto">
<source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4" />
Your browser does not support HTML5 video.
</video>
<div class="play-pause--click-area">
<div class="play-pause--container center-xy">
<div class="play-pause--icon play-icon"></div>
<div class="play-pause--icon pause-icon"></div>
</div>
</div>
</div>
The icon is implemented with CSS. To remove Play icon, for example, you just need to remove this code:
.play-pause--container .play-icon {
width: 0;
height: 0;
border: 0 solid transparent;
border-bottom-width: 15px;
border-top-width: 15px;
border-left: 25px solid #fff;
}