0

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

2

2 Respostas 2

2

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

Agora é com você!

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

1
  • mais como faço pra deixar esse input range tipo a barra de progresso do bootstrap ou entao se der pra usar a barra de progresso do bootstrap no lugar do input range. e como seria o codigo pra fazer a barra de progresso bootstrap funcionar
    – matheus
    Commented 25/12/2016 às 22:34
2

Estilizando 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;
}

https://jsfiddle.net/6yop3c7x/1/

2
  • Isso funciona bem em todos os browsers?
    – bfavaretto
    Commented 26/12/2016 às 1:53
  • Apenas em browsers baseados no WebKit. Vou atualizar para os outros.
    – relaxeaza
    Commented 26/12/2016 às 1:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .