Stack Overflow em Português Asked by Leonardo Costa on November 10, 2021
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.
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>
Answered by Flavio Werle on November 10, 2021
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>Answered by Tobias Mesquita on November 10, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP