Iniciar o vídeo HTML5 em uma posição específica ao carregar?

94

Preciso que o vídeo HTML5 comece em determinado ponto. Digamos que 50 segundos em diante.

Eu tentei, mas não está funcionando como esperado. há algo que estou fazendo de errado?

Aqui está o código:

   <video id="vid1" width="640" height="360">
       <source src="file.webm" type="video/webm" /> 
       Your browser does not support the video tag.
   </video>
   <script>
       document.getElementById('vid1').currentTime = 50;
   </script>

Quando a página é carregada, a reprodução começa do início. No entanto, se eu chamar isso durante a reprodução, como depois de algum tempo, funcionará bem. Está faltando alguma coisa?

javascript html5-video

— Johnydep
fonte

2

Quais navegadores? Você tentou atrasar a ligação alguns milissegundos? Talvez esteja demorando um pouco mais para carregar totalmente o elemento de vídeo

— Ortiga

131

Você tem que esperar até que o navegador saiba a duração do vídeo antes de buscar um determinado momento. Então, eu acho que você quer esperar pelo evento 'loadingmetadata' algo assim:

document.getElementById('vid1').addEventListener('loadedmetadata', function() {
  this.currentTime = 50;
}, false);

— Richard M
fonte

2

Isso não funciona no Safari. Eu tentei o evento loaddata também. Alguma ideia?

— Simon Perepelitsa

Deixa pra lá. Este é um problema com o formato WEBM. MP4 funciona bem.

— Simon Perepelitsa

Use o evento 'durationchange' e sempre chame a pausa antes de fazer alterações na reprodução do vídeo

— Jason White

53

Você pode vincular diretamente com o URI de fragmentos de mídia , basta alterar o nome do arquivo para file.webm # t = 50

Aqui está um exemplo

Isso é muito legal, você pode fazer todos os tipos de coisas. Mas não sei o estado atual do suporte do navegador.

— Rlovtang
fonte

O suporte do navegador é bom. Acho que todos os navegadores com suporte a HTML5 também suportam pelo menos os fragmentos de mídia temporal básicos.

— Jim S.

@michaelhanon, seria bastante fácil escrever um polyfill para o IE para conseguir isso. Detectar navegador, se não for compatível, interromper o URL, encontrar o parâmetro de consulta, usar Javascript para alterar a hora do vídeo ... Posso fazer isso se tiver oportunidade

— gdgr

existe um fragmento para definir a hora de END?

— DGoiko

Ele permite até frações de segundo após um ponto: #t=17.79^ _ ^

— Klesun

51

SEM USAR JAVASCRIPT

Basta adicionar #t=[(start_time), (end_time)]ao final do URL de sua mídia. O único contratempo (se você quiser ver dessa forma) é que você precisa saber quanto tempo seu vídeo tem para indicar o horário de término. Exemplo:

<video>
    <source src="splash.mp4#t=10,20" type="video/mp4">
</video>

Notas: Sem suporte no IE

— anita
fonte

o segundo dígito não parece terminar com quanto do vídeo foi carregado para começar ... o primeiro dígito funcionou embora. Alguma ideia?

— Martian2049

isso realmente não funciona bem. o navegador ainda pré-carrega o quanto quiser, talvez apenas comece e termine de onde você decidiu, mas a pré-carga não parou ...

— Martian2049

29

ajustar a hora de início e término do vídeo ao usar a tag de vídeo em html5;

http://www.yoursite.com/yourfolder/yourfile.mp4#t=5,15

onde à esquerda da vírgula é a hora de início em segundos, à direita da vírgula é a hora de término em segundos. solte a vírgula e a hora de término para afetar apenas a hora de início.

— BobK
fonte

o segundo dígito não parece terminar com quanto do vídeo foi carregado para começar ... o primeiro dígito funcionou embora. Alguma ideia?

— Martian2049

Ao trabalhar com navegadores, é sempre melhor verificar as especificações W3C e caniuse.com para ver quão amplamente suportado é um recurso. (As melhores respostas do StackOverflow estão relacionadas às especificações.) Nesse caso, eles são chamados de 'Fragmentos de mídia' e a especificação está aqui. w3.org/TR/media-frags

— Michael Scheper,

3

No Safari Mac para uma fonte HLS, eu precisava usar o evento LoadData em vez do evento de metadados.

— Robert Reinhardt
fonte

Eu acho que os metadados carregados deveriam ser o evento correto, mas eu também estava obtendo searchable.length 0 (somente no Safari no OSX), a menos que tenha ouvido o dataloaded. Obrigado

— Statuswoe

1

Por que isso foi rejeitado? Provavelmente não está diretamente relacionado ao exemplo fornecido pelo OP, mas é factualmente preciso e relevante para o assunto geral da pergunta.

— JayPea

3

Usar um #t=10,20fragmento funcionou para mim.

— Kamila
fonte

1

Esta é apenas uma repetição de duas outras respostas com maior votação que foram escritas cerca de 5 anos antes.

— Michael Scheper,