Question

当我点击打开视频按钮时，会显示一个弹出窗口。但关闭弹出窗口后，视频声音有争议地播放，我想在关闭弹出窗口时停止该视频。

pop_video.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<script type="text/javascript">
    $(function () {

        $('.push').click(function () {

            $.ajax({
                type: 'post',
                url: 'video_pop.html',
                success: function (r) {
                    $('#mymodal').show();
                    $('#details_supp').show().html(r);
                }
            });
        });
    });
    $(document).ready(function () {
        var closevideobutton = '.hidevideo';
        $(closevideobutton).click(function () {
            $('#details_supp').find('iframe').attr('src', '');
        });
    });
</script>
<body>
    <div class="container">
        <button type="button" id="" class="push" data-toggle="modal" data-target="#myModal">Open Video</button>
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close x" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Evelution Of Investing</h4>
                    </div>
                    <div id="details_supp" class="modal-body" style="display: none;">
                    </div>
                    <div class="modal-footer">
                        <button type="button x" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

video_pop.html

<center>
<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>
</center>

Answer 1

这看起来像是一个错字：

$(closevideobutton)并不指向任何事情。

您可能想要更改
var closevideobutton = '.hidevideo';
到
var closevideobutton = '.btn-default, .close';

plunkr （由于plunkr问题，我删除了ajax）

关闭弹出窗口时停止视频

1 个答案: