Estoy desarrollando mi portafolio usando React y Gatsby y estoy usando un video para crear una sombra animada. El video está en reproducción automática y funciona bien con las etiquetas de reproducción automática, silenciado y reproducción en línea. Sin embargo, la animación no se reproduce en Safari cuando el modo de bajo consumo está activado.
Reproducción de animación (modo de bajo consumo desactivado)
La animación no se reproduce (modo de bajo consumo activado)
Sé que Apple bloquea el video para ahorrar batería, pero como puedo ver en su sitio web, particularmente en su Pro Display XDR ( https://www.apple.com/pro-display-xdr/ ), usan una alternativa imagen cuando el video no se puede reproducir. Quería saber cuál era la mejor manera de hacer lo mismo usando React.
gracias, tomas
Puede usar el atributo de poster en su etiqueta de video.
<video width="250" height="250" playsinline autoplay muted loop poster="https://via.placeholder.com/250&text=I%20am%20Poster"> <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm"> Sorry, your browser doesn't support embedded videos. </video>Sin fuente o video fallido:
<video playsinline autoplay muted loop width="250" height="250" poster="https://via.placeholder.com/250&text=I%20am%20Poster"> <source src="#" type="video/webm"> Sorry, your browser doesn't support embedded videos. </video>Más información: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-poster