Estoy tratando de mostrar un video en mi control deslizante usando un video html5. Esto funciona bien con el parámetro controls (que muestra los controles). Pero cuando agrego autoplay no se reproduce automáticamente, así que busqué por qué podría ser y descubrí que chome solo permite la reproducción automática de videos silenciados.

Así que le agregué el parámetro muted, pero cuando lo hago, todo el video se vuelve negro y todavía no se reproduce automáticamente.

¿Por qué podría ser eso?

Mi código:

<div class="r-slider-item">
    <video width="100%" height="100%" autoplay muted loop>
      <source src="assets/watertuin.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <div class="container">
      <div class="r-slider-top-content">
        <h1 class="animated fadeInDown">RESERVEER <span>NU</span></h1>
        <a href="#" class="btn btn-outlined animated fadeInUp"> Reserveren </a>
      </div>
    </div>
</div>

En Firefox e IE 11 funciona bien.

2
twan 16 oct. 2018 a las 10:39

2 respuestas

La mejor respuesta

Según las últimas políticas de Google, los videos silenciados se pueden reproducir automáticamente en Chrome. La reproducción automática con sonido está permitida si:

  • El usuario ha interactuado con el dominio (hacer clic, tocar, etc.).
  • En el escritorio, se ha cruzado el umbral del índice de interacción con los medios del usuario, lo que significa que el usuario ha reproducido previamente vídeo con sonido.
  • En dispositivos móviles, el usuario ha [agregado el sitio a su pantalla de inicio].

Los fotogramas superiores pueden delegar el permiso de reproducción automática a sus iframes para permitir la reproducción automática con sonido.

Además, coloque la siguiente etiqueta después de su etiqueta <source>: -

<source src="assets/watertuin.ogg" type="video/ogg">

Mira, si funciona ahora.

Consulta más información sobre los cambios en la política de reproducción automática de Google en: - https: // developers.google.com/web/updates/2017/09/autoplay-policy-changes

1
Shashankk Shekar Chaturvedi 16 oct. 2018 a las 07:54

Terminé aquí porque estaba teniendo el mismo problema (no hay reproducción automática de mp4 en Chrome a pesar de que funciona en Firefox y Safari). Esto es lo que me lo arregló:

$('#video')[0].load();

Con suerte, esto puede ayudar a alguien más. Mi HTML:

<video id="video" class="video" autoplay muted loop>              
   <source id="video-src" src="img/video.mp4" type="video/mp4">
</video>
2
Sean Doherty 8 feb. 2019 a las 12:05