Barra de progresso personalizada para um player de vídeo com input range, alguém pode me dar umas dicas, agradeço.
<input type="range" id="progress-bar" min="1" max="100" step="0.1" value="0"/>
Acredito que você quer fazer uma espécie de controle do tempo do seu vídeo.
Levando em conta que seu código está incompleto e por isso deve ser posto a tag vídeo.
A tag vídeo já vem por padrão com alguns controles básicos, sendo escolha sua desabilita-las ou não.
Para desabilitar estes controles padrões do navegador é usado: video.controls = false;
Em seguida eu acrescentei algumas funções para manipular esse tempo do vídeo, para que ao passar o vídeo possa ser alterado no input e para que ao ter mudança no input possa alterar o tempo do vídeo.
O elemento video
possui um evento chamado de timeupdate
que é acionado quando é mudado o tempo no currentTime
do vídeo, que por sua vez é a propriedade que permite alterar ou visualizar o tempo atual do vídeo, o elemento video
possui também a propriedade duration
que mostra em segundos o tempo total do vídeo.
var video = document.querySelector('.video'),
range = document.querySelector('.range');
video.controls = false;
range.addEventListener('mousedown', function (event) {
video.pause();
});
range.addEventListener('change', function (event) {
video.currentTime = range.value / range.max * video.duration;
video.play();
});
video.addEventListener('timeupdate', function (event) {
var position = this.currentTime / this.duration;
range.value = position * 1000;
});
.range {
width: 400px;
}
<video class="video" width="400" src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" autoplay>
Your browser does not support HTML5 video.
</video>
<input class="range" type="range" value="0" max="1000">
Que tal acrescentar mais alguns controles como o de pausar e o de começar...
Vale dá uma olhada em:
http://www.w3schools.com/html/html5_video.asp
http://www.w3schools.com/TAgs/av_prop_controls.asp
http://www.w3schools.com/jsref/dom_obj_video.asp
input[range]
input[type=range] {
-webkit-appearance: none; /* remove estilo padrão do browser */
}
/* estiliza o marcador móvel */
/* Chrome/Safari/Opera */
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; /* remove estilo padrão do browser */
background: red;
height: 15px;
width: 10px;
}
/* Firefox */
input[type=range]::-moz-range-thumb {
background: red;
height: 15px;
width: 10px;
}
/* IE */
input[type=range]::-ms-thumb {
background: red;
height: 15px;
width: 10px;
}
/* estiliza a a barra do slider */
/* Chrome/Safari/Opera */
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
background: blue;
}
/* Firefox */
input[type=range]::-moz-range-track {
width: 100%;
height: 5px;
background: blue;
}
/* IE */
input[type=range]::-ms-track {
width: 100%;
height: 5px;
background: blue;
}
input[range]
que está embutido dentro da tagvideo
ou o elemento é criado por você?