Skip to main content
2 de 5
adicionou 977 caracteres ao conteúdo
Tobias Mesquita
  • 23,1mil
  • 1
  • 32
  • 52

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 button = document.getElementById("button");
var currentTime = document.getElementById("currentTime");
var duration = document.getElementById("duration");
var timezone = new Date().getTimezoneOffset() * 60 * 1000;

button.addEventListener("click", function () {
  if (video.paused) {
    if (video.ended) 
      video.currentTime = 0;
    video.play();
    button.value = "Stop";
  } else {
    video.pause();
    button.value = "Play";
  }
});

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

var updateDuracao = function () {
  var times = {
    currentTime: new Date((video.currentTime * 1000) + timezone),
    duration: new Date((video.duration * 1000) + timezone)
  };

  currentTime.textContent = times.currentTime.toLocaleTimeString();
  duration.textContent = times.duration.toLocaleTimeString();
};

if (video.readyState > 0) {
  updateDuracao();
} else {
  video.addEventListener('loadedmetadata', updateDuracao);
}
<div>
  <input id="button" type="button" value="Play" />
  <span id="currentTime"></span>/<span id="duration"></span>
</div>
<div>
  <video id="video" 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>

Tobias Mesquita
  • 23,1mil
  • 1
  • 32
  • 52