Cómo reemplazar el icono de reproducción / pausa alternar con texto

8

Actualmente estoy luchando con una forma de reemplazar los iconos de reproducción / pausa con texto mientras mantengo la animación de alternancia.

Estoy tratando de entender exactamente qué código JS está representando los iconos, y en segundo lugar eliminarlos / ocultarlos, para que puedan ser reemplazados por texto

Todavía soy principiante con JS, cualquier ayuda sería muy apreciada 

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>
Expandir fragmento

javascript  jquery  css 
— glittergirl
fuente

Respuestas:

7 

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>
Expandir fragmento

El icono se implementa con CSS. Para eliminar el icono de Play, por ejemplo, solo necesita eliminar este código:

.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;
}
— lilo.jacob
fuente
1

Simplemente cambie su código CSS con el siguiente código y le ayudará. Además, alineé tanto el texto Playcomo Pausecon el mismo desplazamiento.

Prueba debajo del código

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>
Expandir fragmento

— Shubham Baranwal
fuente
0

Elimine todo el estilo de CSS para estas clases y agregue estos estilos

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

Eliminar: después del pseudo selector para .play-icon y .pause-icon y ya está listo

— Gaurav Chavan
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.