1

Tengo un carousel con imágenes y vídeos he decidido darle autoplay a los vídeos el problema que tengo es que cuando cargo la pagina en la que esta el carousel automáticamente se me reproduce el video necesitaría que este se reproduzca automáticamente cuando este posicionado en su slide correspondiente el problema es que no se como hacerlo.

    <div id="carousel" class="carousel slide" data-ride="carousel">

                <div class="carousel-inner" role="listbox">
                    @{bool Activo = true;}
                    @foreach (var item in Model.ListaImagen)
                    {
                        <div class="item @(Activo ? "active" : "")">
                            <img class="img-responsive center-block" src="/content/images/@(item.Archivo)" alt="">
                        </div>

                        Activo = false;

                    }
                    @foreach (var item in Model.ListaVideo)
                    {
                        <div class="item" style="text-align: center;">
                            <video style="margin-bottom: 100px;" width="auto" height="500px" controls autoplay>
                                <source src="/content/images/@(item.Archivo)" type="video/mp4">
                            </video>
                        </div>

                    }

                </div>


                    <!-- Controls -->
                    <a class="left carousel-control" href="#carousel" role="button" data-slide="prev" ">
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#carousel" role="button" data-slide="next" ">
                        <span class="sr-only">Next</span>
                    </a>

            </div>
2
  • El javascript?, el css?, tienes a añadir todo el código que tenga que ver con lo que estas publicando, que librerías usas, Angular, Jquery?, te invito a que hagas un recorrido para mejorar tu pregunta, que sino te la cierran. el 26 abr. 2017 a las 22:28
  • no tengo mas que eso necesitaria saber al menos que estrategia usar para saber en que slide estoy posicionado o que me expliquen como lo harian ustedes
    – BigBeowulf
    el 26 abr. 2017 a las 22:49

1 respuesta 1

2

Primero en principal, cuando llamas la propiedad autoplay de el elemento HTML5, pierdes control sobre cuando iniciarlo. Por lo que siempre iniciará al arrancar la página. Por lo cual, lo eliminaría, y definiría cuando reproducir y pausar el video.

<video style="margin-bottom: 100px;" width="auto" height="500px">

Ahora, ¿cuando querría reproducir o pausar el video? Digamos que quieres que se reproduzca cuando esté posicionado en su slide. Y se pause cuando cambie el slide. Para esto, Bootstrap ofrece 2 eventos:

  1. El primer evento slid.bs.carousel (Slid) cuando se terminó de colocar una slide a la vista.
  2. El segundo evento slide.bs.carousel (Slide) cuando se está empezando a cambiar de slide.

Usando estos eventos, con javascript podemos definir los 2 comportamientos acá planteados:

Si el slide que se está mostrando ahora, es un video, entonces, ejecutarlo

$('#carousel').on('slid.bs.carousel', function (e) {
   let elemento = $('#carousel .item.active video').first();
   if (elemento.prop("tagName") == "VIDEO") {
     elemento.get(0).play();
   }
});

Si el slide que se está dejando atrás, es un video, entonces, pausarlo

$('#carousel').bind('slide.bs.carousel', function (e) {  
   let elemento = $('#carousel .item.active video').first();
   if (elemento.prop("tagName") == "VIDEO") {
     elemento.get(0).pause();
   }
});

Adjunto un ejemplo, en el cual, tengo las imágenes y videos hardcodeados, ya que no tengo acceso a tus modelos. Pero modificarlo a tu gusto no presentaría alguna complicación adicional.

$('#carousel').on('slid.bs.carousel', function (e) {
   let elemento = $('#carousel .item.active video').first();
   if (elemento.prop("tagName") == "VIDEO") {
     elemento.get(0).play();
   }
});

$('#carousel').bind('slide.bs.carousel', function (e) {  
   let elemento = $('#carousel .item.active video').first();
   if (elemento.prop("tagName") == "VIDEO") {
     elemento.get(0).pause();
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="carousel" class="carousel slide" data-ride="carousel">

  <div class="carousel-inner" role="listbox">

    <div class="item active">
      <img class="img-responsive center-block" src="https://cdn.pixabay.com/photo/2017/04/04/01/08/fruit-2200001_960_720.jpg" alt="" style="width:100%;">
    </div>
    
    <div class="item">
      <video class="img-responsive center-block" style="margin-bottom: 100px;width:100%;height:100%;">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
      </video>
    </div>

    <div class="item">
      <img class="img-responsive center-block" src="https://cdn.pixabay.com/photo/2017/04/14/16/46/red-fox-2230731_960_720.jpg" alt="" style="width:100%;">
    </div>

    <div class="item">
      <video class="img-responsive center-block" style="margin-bottom: 100px;width:100%;height:100%;">
        <source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4">
      </video>
    </div>

  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
    <span class="sr-only">Next</span>
  </a>

</div>

1
  • gracias pruebo y te digo!!
    – BigBeowulf
    el 27 abr. 2017 a las 0:45

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