Create play/pause button

Asked

Viewed 3,367 times

3

I would like to know how I can create a youtube style button from play and pause on top of the video. I wish that when not click on it it gets stopped with the play then click on it it starts the video.

Code:

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

I already have the functionality when click on the video it start to load. I really wanted to know how to put that youtube style play icon.

javascript jquery html5 css3

2 answers

3


Look, you don’t need jQuery for this, Javascript’s own API gives you full control over 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>

  • I put it on top of the video player and when I click on it I want it to disappear and why I gave the play and when I click again that and pause I want it to show what I can implement to do this?

  • Leonardo Costa, you don’t need two button, just toggle the value according to the video status.

  • @Leonardocosta, now the example is complete, take a look.

  • guy I think Voce did not mean I just want that when I click the button it disappear does not appear on the screen when der play not to disturb the video this button I will put on top of the video and when click on it or the video it will disappear for people watch the video without the button on faced in this example Voce gave he will continue on top so this time I just wanted him to hide-if when clicked can help Gradeco and thanks for the reply

  • @Leonardocosta, ready to go.

  • blz worth I had managed before it was only by the onclick but it was worth even so only that it has a problem as I make it appear again if I click on the image or the own button of the player? i only added this in the input: onclick="Document.getElementById('button').style.display = 'None';"

  • @Leonardocosta for that I put in the event pause and ended video, so that whenever the video stops the button play reappear

  • intendi worked out thanks

Show 3 more comments

1

I did it this way placed two buttons in the first DIV, then the video and with the JS I made a function passing as parameter to call the same ID, within the function I created a const video and put the oncontextmenu so the user can not download the video, then just put the querySelector calling the onclick with the attribute and ID, to this way pick up exactly what I want

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

Browser other questions tagged javascript jquery html5 css3

You are not signed in. Login or sign up in order to post.