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

Question 1

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?

Question 2

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);

Question 3

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.

Question 4

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

Question 5

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.

Question 6

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

Question 7

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

Answer 1

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?

Answer 2

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

Answer 3

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

Answer 4

2

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

Simon Perepelitsa

Answer 5

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

Simon Perepelitsa

Answer 6

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

Jason White

Answer 7

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

Answer 8

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.

Answer 9

@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

Answer 10

existe um fragmento para definir a hora de END?

DGoiko

Answer 11

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

Klesun

Answer 12

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

Answer 13

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

Answer 14

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

Answer 15

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,

Answer 16

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

Answer 17

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,

Answer 18

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

Answer 19

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

Answer 20

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

Answer 21

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,

Answer 22

1

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

Michael Scheper,

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

Respostas: