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

Question

I am currently struggling with a way to replace the play/pause icons with text while still maintaining the toggle animation.

I am trying to understand exactly which JS code is rendering the icons, and secondly remove/ hide them, so they can be replaced by text

I am still beginner level with JS, any help would be much appreciated

 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>

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

Answer 2

Just change you CSS code with the below code and it helps you. Also, I have aligned both text Play and Pause with same offset.

Try below code-

 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

Remove all the styling from CSS for these classes and add these styling

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

Remove:after pseudo selector for both.play-icon and.pause-icon and you are good to go