Question

模态视频有轻微问题。我已经完成了3个模态视频，每个视频都有一个单独的链接。但是当我点击bootstrap药丸打开模态所在的区域时，所有3个视频都开始在后台播放，甚至没有打开模态？

我在视频播放后只播放，然后在关闭模式时停止并重置（第一部分我真的找不到答案，而第二部分我看到了答案我可以理解所以它主要是第一部分，我不知道我哪里出错了。）

如果有人有时间帮助我，我会很感激

模态代码

<div class="row">

    <div id="vid1" class="col-xs-12 col-md-4">
        <a href="#" class="launch-modal" data-modal-id="modal-video1">
            <span class="video-link-text">Example 1</span>
        </a>
    </div>

    <div id="vid2" class="col-xs-12 col-md-4">
        <a href="#" class="launch-modal" data-modal-id="modal-video2">
            <span class="video-link-text">Example 2</span>
        </a>
    </div>

     <div id="vid3" class="col-xs-12 col-md-4">
        <a href="#" class="launch-modal" data-modal-id="modal-video3"> 
            <span class="video-link-text">Example 3</span>
        </a>
    </div>

</div>

<!-- Modal Videos -->

<div class="modal fade" id="modal-video1" tabindex="-1" role="dialog" aria-labelledby="modal-video-label">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="modal-video">
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe class="embed-responsive-item" src="../video/example1.mp4" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-video2" tabindex="-1" role="dialog" aria-labelledby="modal-video-label">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="modal-video">
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe class="embed-responsive-item" src="../video/example2.mp4" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-video3" tabindex="-1" role="dialog" aria-labelledby="modal-video-label">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="modal-video">
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe class="embed-responsive-item" src="../video/example3.mp4" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Jquery（仍然是一个菜鸟，所以我道歉）

$('.launch-modal').on('click', function(e){
        e.preventDefault();
        $( '#' + $(this).data('modal-id') ).modal();
    });

Answer 1

在您的代码中，您将视频放在iframe代码中。这样做的副作用是视频会自动播放。

使用iframe代码，而不是使用video代码，您可以选择关闭autoplay。例如（默认情况下autoplay已关闭）

<video width="320" height="240" controls>
  <source src="../video/example2.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

有关video代码here

的更多信息

模态视频问题

1 个答案: