1

Estoy mostrando un video que se reproduce al cargar la pagina, este se muestra en un modal de boostrap, el video se reproduce sin problemas pero sin audio, se de las restricciones por parte de chrome pero debe haber alguna manera de reproducir un audio de forma automatica. Lo que he intentado es lo siguiente.

<audio id="player" autoplay loop>
    <source src="https://resources.com/burbujas_audio.mp3" type="audio/mpeg">
         Your browser does not support the audio element.
</audio>
<video id="video_burbujas"
        class="video-js vjs-default-skin vjs-big-play-centered"
        controls
        autoplay="true"
        preload="auto"
        poster="https://resources.com/poster-burbujas-video.jpg"
        data-setup='{"fluid": true}'
      >
        <source src="https://resources.com/burbujas.mp4" type="video/mp4" />
        <p class="vjs-no-js">
          To view this video please enable JavaScript, and consider upgrading to a
          web browser that
          <a href="https://videojs.com/html5-video-support/" target="_blank"
            >supports HTML5 video</a
          >
        </p>
    </video>

<script>
    var x = document.getElementById('player'); 

    $(window).on('load',function(){
        x.play();
        $("#video_burbujas_mdl").modal('show');
    })  
    var player = videojs('video_burbujas');
    player.ready(function() {
      setTimeout(function() {
        player.autoplay('muted');
        player.fluid('true')
      }, 1000);
    });
</script>

Come mencione al cargar la pagina se abre un modal en donde se encuentra el video, agredeceria cualquier sugerencia o comentario.

1
  • No es posible, el usuario obligatoriamente debe interactuar con la página antes. Y yo cada mañana agradezco a dios por ello.
    – Yussef
    el 25 mar. a las 0:04

2 respuestas 2

3

Una manera en la que el navegador lo permite es si hay una interacción previa con el usuario. Puedes poner un diálogo que tenga algún texto de bienvenida, y que, al pulsar en cualquier parte de la ventana, se cierre y reproduzca el video (por ejemplo: si el objeto tiene id miVideo, entonces hacer document.getElementById('miVideo').play()). Es la unica forma que he encontrado.

0

Yo solucioné este error con este trozo de código:

audio.src = song;
urlsong = song;
audio.load();

setTimeout(function() {
  audio.play();
}, 0);

La variable song es getAttribute('href').

Quiere decir que es una URL, por ejemplo: ./archivo_de_musica.mp3.

Probado navegador: chrom GitExample: sinuhemelis/reprductoraudioJs

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.