Como desabilito a geração de imagem automática na tag de vídeo?
-
28-09-2019 - |
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?
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