HTML HTML5 CSS - Duração Vídeo

[guhbrj]

Pessoal, beleza?

Alguém saberia dizer como faz para altera a duração de um vídeo sem que tenha que editá-lo?

Por exemplo:

Tenho um vídeo de 50 segundos de duração, mas quero que execute apenas 35seg.

 <video id="vid" source src="videos/arte.mp4" autoplay loop muted>     
   
  </video>

 

[GabrielSennaMs]

@guhbrj Quado especificando a URI de um elemento <audio> ou <video>, você pode incluir opcionalmente informações adicionais para especificar a parte da mídia a ser reproduzida. 

 

Para fazer isso, use uma hashtag("#") seguida pela descrição do fragmento da mídia.

O intervalo é especificado usando a sintaxe:

#t=[tempoinicial],[tempofinal]

Exemplo:

 <video id="vid" source src="videos/arte.mp4#t=0,35" autoplay loop muted>     
 </video>

Só será reproduzido do 0 ate os 35 segundos de vídeo.

[guhbrj]

Muito obrigado, @GabrielSennaMs !

Funcionou, mas quando chega aos 35 segundos ele para e não volta ao loop.

Alguma dica ?

Valeu!!

[GabrielSennaMs]

Bom a maneira mais fácil, serial você editando o vídeo, caso não seja possível, o único jeito que sobrou é manipular o elemento vídeo usando JS(javascript).

 

Eu criei um script simples para fazer esse loop, porém eu não recomento o uso porque a politica do Chrome não permite.

 

O script vai funcionar de boa em todos os navegadores modernos até mesmo no Chrome, porém eu tive que força a função play() para isso.

<video id="video" source="video/mp4" src="seuvideo.mp4#t=0,5" autoplay muted controls></video>
	<script type="text/javascript">

		window.onload = function(){ // Verificando se a página foi carregada para chamar a função de loop
			loopVideo(0, 5); // Chamando a função, especificando o tempo inicial(TempI) e o tempo final(TempF), o valor deve ser segundos
			// Você também pode colocar o tempo para fazer o loop, porém o tempo tem que ser em milissegundo
		}

		function loopVideo(tempI = 0, tempF = 0, tempLoop = 0){ // Função que vai fazer o loop
			let 
				video = document.getElementById("video"), // Selecionado o elemento video
				tempL = (tempLoop > 0)? tempLoop : (1000 * (tempF - tempI)), // Verificando se um valor de loop foi inserido, caso o valor não tenha sido inserido ele vai subtrair o tempo final com o tempo inicio depois vai mutiplicar esse valor por 1000 assim convertendo em milisegundo
				play = (tempI >= 0 && tempF > 0 && tempI < tempF)? null : false; // Verificando se o tempo inicial é maior que o tempo final, caso o tempo inicial sejá maior que o tempo final ele não vai executar o loop nem o player.
			if(play !== false) // Verificando se o loop pode ocorrer
			{
				video.currentTime = tempI; // Inserindo o tempo inicial no video
				play = video.play(); // Quardando o retorno da função play()
				if(play !== null){ // Verificando se o retorno foi null da função play()
				    play.catch(()=>{video.play()}) // Forçando o play
				}
				setTimeout(function()// Chamando a função novamente de acordo com o tempo do loop
				{ 
					loopVideo(tempI, tempF, tempL); // Chamando a função e repasando os valores tempo inicio, tempo final, tempo de loop
					video.pause(); // Pausando o video
				}, tempL); // Inserindo o tempo de loop
			}
		}

	</script>