Pergunta

Estou usando o atributo 'pôster' em uma etiqueta de vídeo e a maneira como parece funcionar pelo menos nos navegadores do webkit é que ele carrega a imagem do pôster e, uma vez o suficiente do vídeo carregado, ele substitui esse pôster por um auto- Pôster gerado a partir do próprio arquivo de vídeo.

No entanto, minhas imagens de pôsteres não correspondem aos pôsteres gerados automaticamente, o que resulta em uma experiência estranha de um carregamento de imagem e sendo substituído em alguns segundos pela imagem gerada automaticamente. Existe alguma maneira de impedir que a imagem gerada automaticamente seja usada?

Foi útil?

Solução

Conseguimos contornar isso no JW Player para HTML5. A maneira mais fácil é a seguinte:

  • Se ou003Cvideo> src A propriedade está definida, desvie -a e armazene o local.
  • Adicione um manipulador de clique aou003Cvideo> marcação. Quando for clicado, redefinir ou003Cvideo> Propriedade SRC.

Isso funcionará bem, mas ainda significa que você terá problemas no reprodução, pois a imagem de pôster que reaparece não será a mesma que o original, a menos que você faça mais um pouco de magia do JS.

Também vale a pena notar que você não pode colocar nada em cima dou003Cvideo> Tag no safari móvel. A maneira de contornar isso:

  • Colocou ou003Cvideo> CSS Mostrar nenhum
  • Adicionar outrou003Cdiv> no mesmo local, com as mesmas dimensões que ou003Cvideo> Elemento, com uma imagem de fundo CSS que é a mesma que a imagem do Poser.
  • Adicione um manipulador de clique ao novou003Cdiv> . Quando o novou003Cdiv> é clicado, ocultar o novou003Cdiv> e mostre a tag de vídeo.
  • Quando o vídeo tiver concluído a reprodução, oculte ou003Cvideo> e mostre o novou003Cdiv> .

Espero que isso ajude!

melhor,

Zach

Desenvolvedor, Longtail Video

Outras dicas

É assim que os navegadores do Webkit decidiram implementar as especificações (como citado acima). Concordo com você que não é muito intuitivo e também preferiria manter a imagem de pôster até que o usuário atinja o botão Play. Eu sugiro que você envie um relatório de bug (ou solicitação de recurso) para o Webkit para isso https://bugs.webkit.org/ .

A única opção é garantir que o primeiro quadro do seu vídeo seja o mesmo que o pôster ou não para usá -lo.

"Quando um elemento de vídeo é pausado e a posição de reprodução atual é o primeiro quadro de vídeo, o elemento representa o quadro do vídeo correspondente à posição de reprodução atual ou ao quadro de pôsteres, a critério do agente do usuário". - http://www.w3.org/tr/html5/video.html#attr-video-poster

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top