Create button play / pause

Question

Create button play / pause

Navigation

#1 by (1 votes)

2

I'd like to know how I can create a youtube style button to play and pause on top of the video. I would like that when you do not click on it it will stop with the play and click on it it starts the video.

Code:

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

I already have the functionality of when I click on the video it starts loading. I really wanted to know how to put that youtube-style play icon.

javascript jquery html5 css3

asked by anonymous 27.08.2015 / 12:27

1 answer

Search in mysql database Select PHP in tables with special characters

score 1 · Accepted Answer

Look, you do not need jQuery for this, the JavaScript API itself gives you full control over the 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>