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

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