php - iframe 播放按钮用作轮播左指示器

Question

我正在尝试在引导模式中动态地将视频显示为幻灯片。但是当加载视频时，相应的播放按钮用作轮播左指示器。而且视频是自动播放的。我还尝试使用标签，它会停止自动播放，但播放按钮仍然用作轮播左指示器。提前致谢。

下面是我的代码。

<div class="modal fade and carousel slide" id="video">
    <div class="modal-dialog" style="margin-top:250px;" >
    <div class="modal-content">
        <div class="modal-body">
            <div class="carousel-inner">
            <?php 
            $id=$_GET['id'];
            //$i=0;
            $qryr="select * from released_movies where rel_id='$id' ";
            $qryrr=$con->query($qryr);
            while($rrr=$qryrr->fetch_assoc()){
                $film=$rrr['rel_movies'];
                $qq="select * from events where film='$film'";
                $qrr=$con->query($qq);
                while($roo=$qrr->fetch_assoc()){ 
                $rowss[] = $roo;
                }
            ?>
                <ol class="carousel-indicators">
                <?php
                $i = 1; //Counter
                foreach ($rowss as $roo): //Foreach
                $ol_class = ($i == 1) ? 'active' : ''; //Set class active for only indicator which belongs to respective Image
                ?>
                    <!--Here I add the counter to data-slide attribute and add class to indicator-->
                    <li data-target="#video" data-slide-to="<?php echo $i;?>"  class="<?php echo $ol_class; ?>"></li>
                <?php $i++; ?>
                <?php endforeach; ?> <!--Close Foreach-->
                </ol>
                <?php
                $i = 1; //Counter
                foreach ($rowss as $roo): //Foreach
                $item_class = ($i == 1) ? 'item active' : 'item'; //Set class active for image which is showing
                ?>              
                <div class="<?php echo $item_class; ?>"> <!-- Define Active Class Here-->
                    <iframe width="100%" height="500px" src="../AbaamAdmin/Events_Videos/<?php echo $roo['event_videos'];?>" frameborder="0" allowfullscreen></iframe>
                </div>
                <?php $i++; ?>
                <?php endforeach; ?> <!-- Close Foreach-->
            </div> <!-- /.item active-->
            <a class="left carousel-control" href="#video" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <!-- <span class="glyphicons glyphicons-left-arrow"></span>-->
            </a>
            <a class="right carousel-control" href="#video" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <!--<span class="glyphicons glyphicons-right-arrow"></span>-->
            </a>
            <?php } ?>
            </div> <!-- /.carousel-inner -->
        </div><!-- /.modal-body -->
    </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 1

在您的方法中，一些 div 元素、选择器放错了位置并且缺少一个关键的 div，需要进行一些 CSS 更改。

1. "carousel slide"在模态 HTML 中(删除它)
2. <div class="carousel-inner">放错地方了，应该在<ol class="carousel-indicators"></ol>之后
3. 缺少关键轮播元素 <div id="selector" class="carousel slide" data-ride="carousel">在modal-body之后添加
4. 在 Prev和 Next您定位的按钮 href="#video"这是 id模态的
5. 在您定位的轮播指示器中 data-target="#video"这是 id模态的

需要更改 CSS 才能解决单击“播放”/“停止”按钮时导致视频滑动到下一个的问题，原因是“下一个”/“上一个”按钮与视频控件重叠，CSS 中的以下更改将解决此问题

.carousel-control {
    bottom: 55px !important;
}

要停止自动播放，添加 autoplay=false在视频 iframe 中。

最终的 HTML 将是

注意:我将轮播选择器 ID 命名为 videobox

<div class="modal fade and" id="video">
    <div class="modal-dialog" style="margin-top:250px;" >
        <div class="modal-content">
            <div class="modal-body">
                <div id="videobox" class="carousel slide" data-ride="carousel">
                    <?php
                        $id=$_GET['id'];
                        //$i=0;
                        $qryr="select * from released_movies where rel_id='$id' ";
                        $qryrr=$con->query($qryr);
                        while($rrr=$qryrr->fetch_assoc()){
                            $film=$rrr['rel_movies'];
                            $qq="select * from events where film='$film'";
                            $qrr=$con->query($qq);
                            while($roo=$qrr->fetch_assoc()){ 
                                $rowss[] = $roo;
                            }
                        }
                    ?>                  
                    <ol class="carousel-indicators">
                        <?php
                            $i = 1; //Counter
                            foreach ($rowss as $roo):
                            $ol_class = ($i == 1) ? 'active' : '';
                        ?>
                        <li data-target="#videobox" data-slide-to="<?php echo $i;?>"  class="<?php echo $ol_class; ?>"></li>
                        <?php $i++; ?>
                        <?php endforeach; ?>
                    </ol>
                    <div class="carousel-inner">
                    <?php
                        $i = 1; //Counter
                        foreach ($rowss as $roo):
                        $item_class = ($i == 1) ? 'item active' : 'item';
                    ?> 
                    <div class="<?php echo $item_class; ?>">
                        <iframe width="100%" height="500px" src="../AbaamAdmin/Events_Videos/<?php echo $roo['event_videos'];?>" frameborder="0" allowfullscreen autoplay="false"></iframe>
                    </div>
                    <?php $i++; ?>
                    <?php endforeach; ?> 
                    </div> <!-- /.item active-->
                    <a class="left carousel-control" href="#videobox" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                    <!-- <span class="glyphicons glyphicons-left-arrow"></span>-->
                    </a>
                    <a class="right carousel-control" href="#videobox" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                    <!--<span class="glyphicons glyphicons-right-arrow"></span>-->
                    </a>
                </div> <!-- /.carousel-inner -->
            </div><!-- /.modal-body -->
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Fiddle