Etapa 2: adicionar controles de vídeo personalizados

Adicione controles de vídeo configurando botões personalizados em seu criativo.

Adicione botões de reprodução de vídeo personalizados

1. Crie dois elementos no criativo usando uma tag
   . Crie os elementos no arquivo HTML e defina o estilo deles no arquivo CSS. Em seguida, atribua IDs diferentes e um nome de classe aos elementos.
   

   Amostra de tags

   no arquivo 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>

   Amostra de seletor de ID e estilo no arquivo 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. Adicione controles de vídeo ao JavaScript.
   
   Poucos recursos de vídeo não estão disponíveis com vídeo HTML5. Encontre soluções alternativas quando necessário.
   

   • Ativar/desativar o som está disponível apenas para desktop. No celular, este recurso é controlado pelo hardware.
   • O método Stop não está disponível. Contorne isso pausando o vídeo e definindo currentTime em zero.
   • O método "Replay" não está disponível. Contorne isso definindo currentTime em zero e reproduzindo o vídeo novamente.
   
   

   Snippet 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) {
       // If paused, then play
       video1.play();
        // Show pause button and hide play button
       pauseBtn.style.visibility = 'visible';
       playBtn.style.visibility = 'hidden';
   } else {
       // If playing, then pause
       video1.pause();
       // Show play button and hide pause button
       pauseBtn.style.visibility = 'hidden';
       playBtn.style.visibility = 'visible';
   }
}

function muteUnmuteHandler(e) {
   if (video1.volume == 0.0) {
       // If muted, then turn it on
       video1.volume = 1.0;
       // Show mute button and hide unmute button
       muteBtn.style.visibility = 'visible';
       unmuteBtn.style.visibility = 'hidden';
   } else {
       // If unmuted, then turn it off
       video1.volume = 0.0;
       // Show unmute button and hide mute button
       muteBtn.style.visibility = 'hidden';
       unmuteBtn.style.visibility = 'visible';
   }
}

function stopHandler(e) {
   // There is no stop method for HTML5 video
   // As a workaround, pause the video
   // and set currentTime to 0
   video1.currentTime = 0;
   video1.pause();
   // Show or hide other video buttons accordingly
}

function replayHandler(e) {
   // There is no replay method for HTML5 video
   // As a workaround, set currentTime to 0
   // and play the video
   video1.currentTime = 0;
   video1.play();
   // Show or hide other video buttons accordingly
}