Skip to main content
adicionou 139 caracteres ao conteúdo
Fonte Link
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 buttonplay = document.getElementById("button""play");
var currentTime = document.getElementById("currentTime");
var duration = document.getElementById("duration");
var timezone = new Date().getTimezoneOffset() * 60 * 1000;

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

video.addEventListener('play', function () {
  buttonplay.valuestyle.display = "Stop";"none";
  } else {);
     
video.pauseaddEventListener();
'pause', function () {
  buttonplay.valuestyle.display = "Play";
  }"inline-block";
});

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

video.addEventListener('ended''timeupdate', function () {
  button.value = "play";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="button"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>

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();
});

video.addEventListener('ended', function () {
  button.value = "play";
});

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="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>

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>

adicionou 977 caracteres ao conteúdo
Fonte Link
Tobias Mesquita
  • 23,1mil
  • 1
  • 32
  • 52
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 =video.addEventListener('ended', function () {
  var timesbutton.value = {"play";
});
  times.pad = "000";
 var times.currentTimetimeToString = newfunction Date((video.currentTimetime) *{
 1000) +var timezone);pad = "000";
  times.durationTimevar tempo = new Date((video.durationtime * 1000) + timezone);
  times.currentMillis = times.currentTime.getMilliseconds().toString();
 var times.durationMillismillis = times.durationTimetempo.getMilliseconds().toString();
  times.currentTime = times.currentTime.toLocaleTimeString();
  times.durationTimetempo = times.durationTimetempo.toLocaleTimeString();  
  times.currentMillismillis = times.pad.substring(0, times.pad.length - times.currentMillismillis.length) + times.currentMillis;millis;
  times.durationMillis = times.pad.substring(0,return times.pad.lengthtempo -+ times.durationMillis".length)" + times.durationMillis;millis;
}
 
var currentTime.textContentupdateDuracao = times.currentTime + "."function +() times.currentMillis;{
  durationcurrentTime.textContent = timestimeToString(video.durationTimecurrentTime);
 + "duration."textContent += timestimeToString(video.durationMillis;duration);
};

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>
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 = {};
  times.pad = "000";
  times.currentTime = new Date((video.currentTime * 1000) + timezone);
  times.durationTime = new Date((video.duration * 1000) + timezone);
  times.currentMillis = times.currentTime.getMilliseconds().toString();
  times.durationMillis = times.durationTime.getMilliseconds().toString();
  times.currentTime = times.currentTime.toLocaleTimeString();
  times.durationTime = times.durationTime.toLocaleTimeString();  
  times.currentMillis = times.pad.substring(0, times.pad.length - times.currentMillis.length) + times.currentMillis;
  times.durationMillis = times.pad.substring(0, times.pad.length - times.durationMillis.length) + times.durationMillis;

  currentTime.textContent = times.currentTime + "." + times.currentMillis;
  duration.textContent = times.durationTime + "." + times.durationMillis;
};

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>
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();
});

video.addEventListener('ended', function () {
  button.value = "play";
});

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="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>
adicionou 977 caracteres ao conteúdo
Fonte Link
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 = {};
  times.pad = "000";
  times.currentTime: = new Date((video.currentTime * 1000) + timezone),;
   times.durationTime duration:= new Date((video.duration * 1000) + timezone);
  }times.currentMillis = times.currentTime.getMilliseconds().toString();
  times.durationMillis = times.durationTime.getMilliseconds().toString();
  currentTimetimes.textContentcurrentTime = times.currentTime.toLocaleTimeString();
  durationtimes.textContentdurationTime = times.durationdurationTime.toLocaleTimeString();  
  times.currentMillis = times.pad.substring(0, times.pad.length - times.currentMillis.length) + times.currentMillis;
  times.durationMillis = times.pad.substring(0, times.pad.length - times.durationMillis.length) + times.durationMillis;

  currentTime.textContent = times.currentTime + "." + times.currentMillis;
  duration.textContent = times.durationTime + "." + times.durationMillis;
};

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>

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>

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 = {};
  times.pad = "000";
  times.currentTime = new Date((video.currentTime * 1000) + timezone);
  times.durationTime = new Date((video.duration * 1000) + timezone);
  times.currentMillis = times.currentTime.getMilliseconds().toString();
  times.durationMillis = times.durationTime.getMilliseconds().toString();
  times.currentTime = times.currentTime.toLocaleTimeString();
  times.durationTime = times.durationTime.toLocaleTimeString();  
  times.currentMillis = times.pad.substring(0, times.pad.length - times.currentMillis.length) + times.currentMillis;
  times.durationMillis = times.pad.substring(0, times.pad.length - times.durationMillis.length) + times.durationMillis;

  currentTime.textContent = times.currentTime + "." + times.currentMillis;
  duration.textContent = times.durationTime + "." + times.durationMillis;
};

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>

adicionou 977 caracteres ao conteúdo
Fonte Link
Tobias Mesquita
  • 23,1mil
  • 1
  • 32
  • 52
Carregando
Fonte Link
Tobias Mesquita
  • 23,1mil
  • 1
  • 32
  • 52
Carregando