如何用文本替换播放/暂停图标切换

Question

我目前正在努力寻找一种方法，在保持切换动画的同时，用文本替换播放/暂停图标。

我正试图准确地理解是哪个JS代码在渲染图标，然后删除/隐藏它们，这样它们就可以被文本取代

我仍然是JS的初学者，任何帮助都将不胜感激

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 {
width: 0;
height: 0;
border: 0 solid transparent;
border-bottom-width: 15px;
border-top-width: 15px;
border-left: 25px solid #fff;
}
.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 {
background-color: #fff;
width: 10px;
height: 30px;
left: -10px;
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>

Answer 1

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>

图标是用CSS实现的。例如，要删除播放图标，您只需要删除以下代码：

.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;
}

Answer 2

只需用下面的代码更改CSS代码，它就会对您有所帮助。此外，我已经将文本Play和Pause都对齐为具有相同的偏移量。

尝试以下代码-

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 {
width: 0;
height: 0;
}
.play-pause--container .play-icon:after {
content: 'Play';
font-size: 2.2rem;
line-height: 0.3;
background: inherit;
width: 10px;
height: 30px;
position: absolute;
}
.play-pause--container .pause-icon {
width: 10px;
height: 30px;
left: 0px;
position: absolute;
top: -15px;
}
.play-pause--container .pause-icon:after {
content: 'Pause';
font-size: 2.2rem;
line-height: 1.2;
background: inherit;
width: 10px;
height: 30px;
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>

Answer 3

从CSS中删除这些类的所有样式并添加这些样式

.play-pause--container .play-icon {
content: 'Play';
font-size: 2.2rem;
}
.play-pause--container .pause-icon {
content: 'Pause';
font-size: 2.2rem;
}

删除：在伪选择器后为两个.播放图标和.暂停图标，你很好去