Question

我有一个带图像和视频的旋转木马，我决定自动播放视频。问题是，当我加载包含轮播的页面时，它会自动重现视频。当我放在相应的幻灯片上时，我需要自动播放视频。问题是我不知道该怎么做。

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

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

                    Active = false;

                }
                @foreach (var item in Model.ListVideo)
                {
                    <div class="item" style="text-align: center;">
                        <video style="margin-bottom: 100px;" width="auto" height="500px" controls autoplay>
                            <source src="/content/images/@(item.File)" 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

Answer 1

我不知道您为旋转木马使用的lib，但是您必须删除所有视频的自动播放属性，并在仅显示当前幻灯片时添加它。

可能你的旋转木马上有回调，以便在显示后更改当前的幻灯片。

编辑：

我看一下bootstrap carousel，你可以使用这个活动：

$('#myCarousel').on('slid.bs.carousel', function () { // function called when the slide is showed
  $('.item video').removeAttr('autoplay'); // To stop all videos
  $('.item.active video').attr('autoplay', 'autoplay'); // To play the current video
});

轮播自动播放视频

1 个答案: