Carrousel video autoplay

Question

Carrousel video autoplay

Navigation

#1 by (0 votes)

0

I have a carousel with images and videos I have decided to give autoplay to the videos the problem that I have is that when I load the page in which the carousel is automatically reproduced the video I would need it to be automatically reproduced when it is positioned in its corresponding slide the problem is that I do not know how to do it.

    <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>

html5 bootstrap asp.net video

asked by BigBeowulf 27.04.2017 в 00:19

source

1 answer

Help when deleting a record with ajax and php problem when using ckeditor with jquery

score 0 · Accepted Answer

First of all, when you call the autoplay property of the HTML5 element, you lose control over when to start it. So it will always start when the page is started. Therefore, I would eliminate it, and define when to play and pause the video.

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

Now, when would you want to play or pause the video? Let's say you want it to play when it's positioned on its slide. And pause when the slide changes. For this, Bootstrap offers 2 events:

The first event slid.bs.carousel ( Slid ) when you finished placing a slide in view.

The second event slide.bs.carousel ( Slide ) when you are starting to change the slide.

Using these events, with javascript we can define the 2 behaviors presented here:

If the slide that is showing now is a video , then, run it

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

If the slide that is being left behind is a video , then pause it

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

I enclose an example, in which, I have hard-coded images and videos, since I do not have access to your models. But modifying it to your liking would not present any additional complication.

$('#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>