Paso 2: añadir controles de vídeo personalizados

Añada controles de vídeo mediante la configuración de botones personalizados en la creatividad.

Cómo añadir botones personalizados de reproducción de vídeo

1. Cree dos elementos en la creatividad utilizando una etiqueta <div>. Créelos en el archivo HTML y asígneles un estilo en el archivo CSS. A continuación, asigne ID diferentes y un nombre de clase a los elementos.
   

   Etiquetas <div> de ejemplo en el archivo HTML

   <div id="play-btn" class="video-controls">PLAY</div>
<div id="pause-btn" class="video-controls">PAUSE</div>
<div id="mute-btn" class="video-controls">MUTE</div>
<div id="unmute-btn" class="video-controls">UNMUTE</div>
<div id="stop-btn" class="video-controls">STOP</div>
<div id="replay-btn" class="video-controls">REPLAY</div>

   Estilo de muestra y selector de ID en el archivo CSS

   .video-controls {
   position: absolute;
   width: 50px;
   height: 20px;
   cursor: pointer;
   background-color: #FFF;
   border: 1px solid #000;
}

#play-btn {
   left: 5px;
}

#pause-btn {
   left: 5px;
}

#mute-btn {
   left: 60px;
}

#unmute-btn {
   left: 60px;
}

#stop-btn {
   left: 115px;
}

#replay-btn {
   left: 115px;
}
2. Añada controles de vídeo al JavaScript.
   
   Algunas funciones de vídeo no están disponibles con el vídeo de HTML5. Por tanto, asegúrese de solucionarlo.
   

   • La opción de activar/silenciar el sonido solo está disponible para escritorios. En móviles, el hardware controla esta opción.
   • El método de detención no está disponible. Puede solucionarlo deteniendo el vídeo y estableciendo currentTime como 0.
   • El método de volver a reproducir no está disponible. Puede solucionarlo estableciendo currentTime como 0 y reproduciendo el vídeo de nuevo.
   
   

   Fragmento de código

   var playBtn = document.getElementById('play-btn');
var pauseBtn = document.getElementById('pause-btn');
var muteBtn = document.getElementById('mute-btn');
var unmuteBtn = document.getElementById('unmute-btn');
var stopBtn = document.getElementById('stop-btn');
var replayBtn = document.getElementById('replay-btn');

playBtn.addEventListener('click', pausePlayHandler, false);
pauseBtn.addEventListener('click', pausePlayHandler, false);
muteBtn.addEventListener('click', muteUnmuteHandler, false);
unmuteBtn.addEventListener('click', muteUnmuteHandler, false);
stopBtn.addEventListener('click', stopHandler, false);

   replayBtn.addEventListener('click', replayHandler, false);

function pausePlayHandler(e) {
   if (video1.paused) {
       // Si está en pausa, reprodúzcalo
       video1.play();
        // Haga que se muestre el botón de pausa y se oculte el botón de reproducción
       pauseBtn.style.visibility = 'visible';
       playBtn.style.visibility = 'hidden';
   } else {
       // Si se está reproduciendo, páuselo
       video1.pause();
       // Haga que se muestre el botón de reproducción y se oculte el botón de pausa
       pauseBtn.style.visibility = 'hidden';
       playBtn.style.visibility = 'visible';
   }
}

function muteUnmuteHandler(e) {
   if (video1.volume == 0.0) {
       // Si está silenciado, active el sonido
       video1.volume = 1.0;
       // Haga que se muestre el botón de silencio y se oculte el botón de activación de sonido
       muteBtn.style.visibility = 'visible';
       unmuteBtn.style.visibility = 'hidden';
   } else {
       // Si el sonido está activado, siléncielo
       video1.volume = 0.0;
       // Haga que se muestre el botón de activación de sonido y se oculte el botón de silencio
       muteBtn.style.visibility = 'hidden';
       unmuteBtn.style.visibility = 'visible';
   }
}

function stopHandler(e) {
   // No hay método de detención para el vídeo en HTML5
   // Como solución, pause el vídeo
   // y establezca currentTime como 0
   video1.currentTime = 0;
   video1.pause();
   // Muestre u oculte otros botones de vídeo según corresponda
}

function replayHandler(e) {
   // No hay método de volver a reproducir en el vídeo en HTML5
   // Como solución, establezca currentTime como 0
   // y reproduzca el vídeo
   video1.currentTime = 0;
   video1.play();
   // Muestre u oculte otros botones de vídeo según corresponda
}