Pregunta El primer fotograma del video de fondo no se muestra en Android


Tengo el siguiente código:

.background-video {
  position: fixed;
  z-index: -10;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  -webkit-background-size: cover;
  -moz-background-size:cover;
  background: url(video.jpg) no-repeat center center fixed;
  background-size: cover;
}

@media (max-width: 767px) {
  *::-webkit-media-controls-start-playback-button {
    display: none!important;
    -webkit-appearance: none
  }
}
<video autoplay loop class="fillWidth background-video" poster="video.jpg">
  <source src="video.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
  <source src="video.webm" type='video/webm; codecs="vp8.0, vorbis"'/>
  <source src="video.ogg" type='video/ogg; codecs="theora, vorbis"'/>
</video>

Para explicar lo que sucede:

  • En iOS Safari, oculto el botón de reproducción de video y muestra el primer fotograma del video.
  • En el video de escritorio se reproduce en un bucle infinito.
  • Cuando cambio a Android (Oppo R7s ColorOS 5.1.1) en lugar del primer navegador de marcos, aparece el fondo negro.
  • Aunque en el navegador Nexus 5X Android 6.0.1 Chrome para móviles todo funciona bien y puedo ver la imagen de fondo.

Por lo que he encontrado en Internet, el motivo de tal comportamiento podría ser deshabilitar Javascript en el navegador móvil, pero habilitar la funcionalidad de Javascript no ayudó.

Si alguien tiene experiencia con el desarrollo de teléfonos OPPO, indique cómo mostrar la imagen de fondo en lugar de fondo negro en este teléfono.

ACTUALIZAR: A pesar de que la recompensa ha expirado, la pregunta sigue abierta.


10
2017-08-13 11:35


origen


Respuestas:


Sospecho de esta regla:

-webkit-appearance: none;

Retrocedería todo el CSS y lo volvería a agregar una regla a la vez para encontrar la regla individual ofensiva si aún no lo ha hecho. En última instancia, es posible que deba comprometerse en una vista, pero de esta manera usted debería poder minimizar el daño.


3
2017-08-24 20:14