3

Eu gostaria de saber como eu posso criar um botão estilo o do youtube de play e pause encima do vídeo. Gostaria que quando não clicar nele ele fique parado com o play ai clica nele ele inicia o vídeo.

Código:

<video class="video" id="my-video" controls preload="auto" tabindex="0">

Eu já tenho a funcionalidade de quando clicar no video ele começar a carregar. Eu queria mesmo saber como colocar aquele icone do play estilo o do youtube.

2 Respostas 2

3

olha, você não precisa do jQuery para isto, a propria API do JavaScript lhe dá total controle sobre o Video.

var video = document.getElementById("video");
var play = document.getElementById("play");
var currentTime = document.getElementById("currentTime");
var duration = document.getElementById("duration");
var timezone = new Date().getTimezoneOffset() * 60 * 1000;

play.addEventListener("click", function () {
  if (video.ended) 
    video.currentTime = 0;
  video.play();
});

video.addEventListener('play', function () {
  play.style.display = "none";
});

video.addEventListener('pause', function () {
  play.style.display = "inline-block";
});

video.addEventListener('ended', function () {
  play.style.display = "inline-block";
});

video.addEventListener('timeupdate', function () {
  updateDuracao();
});

var timeToString = function (time) {
  var pad = "000";
  var tempo = new Date((time * 1000) + timezone);
  var millis = tempo.getMilliseconds().toString();
  tempo = tempo.toLocaleTimeString();
  millis = pad.substring(0, pad.length - millis.length) + millis;
  return tempo + "." + millis;
}

var updateDuracao = function () {
  currentTime.textContent = timeToString(video.currentTime);
  duration.textContent = timeToString(video.duration);
};

if (video.readyState > 0) {
  updateDuracao();
} else {
  video.addEventListener('loadedmetadata', updateDuracao);
}
<div>
  <input id="play" type="button" value="Play" />
  <span id="currentTime"></span>/<span id="duration"></span>
</div>
<div>
  <video id="video" controls preload="metadata">
    <source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4">
    <source src="http://html5demos.com/assets/dizzy.webm" type="video/webm">
    <source src="http://html5demos.com/assets/dizzy.ogv" type="video/ogg">
  </video>
</div>

8
  • eu coloquei ela encima do player de video e quando eu clicar nela quero q ela some que e por que dei o play e quando clicar de novo que e o pause quero que ela apareca o que posso implementar para fazer isto? Commented 27/08/2015 às 11:31
  • Leonardo Costa, você não precisa dois button, basta alternar o valor de acordo com o estado do video. Commented 27/08/2015 às 11:39
  • @LeonardoCosta, agora o exemplo está completo, dê uma olhada. Commented 27/08/2015 às 11:44
  • cara acho que voce nao intendeu eu so quero que quando eu clicar no botao ele suma nao aparece na tela quandor der play para nao atrapalhar o video esse botao eu vou colocar encima do video e quando clicar nele ou no video ele vai sumir pra pessoa assistir o video sem o botao na frente nesse exemplo que voce deu ele ira continuar encima so que desta vez com o tempo eu so queria que ele esconde-se quando clicado se puder ajudar agradeco e obrigado pela resposta Commented 27/08/2015 às 11:51
  • @LeonardoCosta, pronto. Commented 27/08/2015 às 12:00
1

Fiz deste jeito colocado dois botoes na primeira DIV, depois o video e com o JS eu fiz uma função passando como parametro para chamar a mesma o ID, dentro da função criei uma const video e coloquei o oncontextmenu para o usuario não poder baixar o video, dai só colocar o querySelector chamando o onclick com o atributo e ID, para desta forma pegar exatamente o que quero

<div>
    <button wm-play="meuVideo">Play</button>
    <button wm-pause="meuVideo">Pause</button>
</div>

<video id="meuVideo">
   <source src="http://ovideoquevocequer/video.mp4" type="video/mp4">
</video>

<script>
function configurarVideo(id){
    const video = document.getElementById(id)
    video.oncontextmenu = () => false

    document.querySelector(`[wm-play = ${id}]`).onclick = e => video.play()
    document.querySelector(`[wm-pause = ${id}]`).onclick = e => video.pause()
}
configurarVideo('meuVideo')
</script>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .