Javascript 在弹出一个覆盖层后停止youtube视频_Javascript_Video_Youtube

Javascript 在弹出一个覆盖层后停止youtube视频

javascript video youtube

Javascript 在弹出一个覆盖层后停止youtube视频,javascript,video,youtube,Javascript,Video,Youtube,下面是一些代码，当你点击一个链接/图像时，一个嵌入的youtube视频显示为一个覆盖，类似于灯箱效果当我设置了一个视频时，当我点击“x”关闭弹出/覆盖时，视频将停止播放如果我添加更多视频，视频将继续在后台播放。覆盖已隐藏，但音频仍在运行你能帮我找出如何停止录像吗？我需要一个页面上共6个视频 HTML: <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4"> <a onclick="star

下面是一些代码，当你点击一个链接/图像时，一个嵌入的youtube视频显示为一个覆盖，类似于灯箱效果

当我设置了一个视频时，当我点击“x”关闭弹出/覆盖时，视频将停止播放

如果我添加更多视频，视频将继续在后台播放。覆盖已隐藏，但音频仍在运行

你能帮我找出如何停止录像吗？我需要一个页面上共6个视频

HTML:

       <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
            <a onclick="startoverlay()" href="#" title="Watch video" class="flex-item box-link bg-lightgrey fg-darkgrey">
                <div class="tiled-image" id="img0">
                    <div class="tiled-overlay">
                        <h3 class="sm-title hblack text-uppercase"><strong class="fg-white"> <span class="fa fa-play" aria-label="Play"></span> </strong></h3> </div>
                </div>
                <div class="tiled-body">
                    <p>text</p>
                </div>
            </a>
        </div>
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
            <a onclick="startoverlay2()" href="#" title="Watch video" class="flex-item box-link bg-lightgrey fg-darkgrey">
                <div class="tiled-image" id="img0">
                    <div class="tiled-overlay">
                        <h3 class="sm-title hblack text-uppercase"><strong class="fg-white"> <span class="fa fa-play" aria-label="Play"></span> </strong></h3> </div>
                </div>
                <div class="tiled-body">
                    <p>text</p>
                </div>
            </a>
        </div>

<!-- VIDEO ONE OVERLAY-->
<div id="overlay" class="modal" role="dialog" aria-labelledby="modal-video-label">
    <div class="modal-dialog modal-full" role="document">
        <div class="modal-content">
            <div class="modal-header text-right">
                <button type="button" class="close" id="close-button" onclick="startoverlay()" aria-label="Close"> <span aria-hidden="true">×</span> </button>
            </div>
            <div class="modal-body">
                <div class="modal-video">
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe id="video" class="embed-responsive-item" src="https://www.youtube.com/embed/6HOlHZfqzxk?enablejsapi=1" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- VIDEO TWO OVERLAY-->
<div id="overlay2" class="modal" role="dialog" aria-labelledby="modal-video-label">
    <div class="modal-dialog modal-full" role="document">
        <div class="modal-content">
            <div class="modal-header text-right">
                <button type="button" class="close" id="close-button" onclick="startoverlay2()" aria-label="Close"> <span aria-hidden="true">×</span> </button>
            </div>
            <div class="modal-body">
                <div class="modal-video">
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe id="video" class="embed-responsive-item" src="https://www.youtube.com/embed/o1aVMcrb4aE?enablejsapi=1" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="modal-backdrop" class="modal-backdrop fade in"></div>

覆盖层：

       <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
            <a onclick="startoverlay()" href="#" title="Watch video" class="flex-item box-link bg-lightgrey fg-darkgrey">
                <div class="tiled-image" id="img0">
                    <div class="tiled-overlay">
                        <h3 class="sm-title hblack text-uppercase"><strong class="fg-white"> <span class="fa fa-play" aria-label="Play"></span> </strong></h3> </div>
                </div>
                <div class="tiled-body">
                    <p>text</p>
                </div>
            </a>
        </div>
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
            <a onclick="startoverlay2()" href="#" title="Watch video" class="flex-item box-link bg-lightgrey fg-darkgrey">
                <div class="tiled-image" id="img0">
                    <div class="tiled-overlay">
                        <h3 class="sm-title hblack text-uppercase"><strong class="fg-white"> <span class="fa fa-play" aria-label="Play"></span> </strong></h3> </div>
                </div>
                <div class="tiled-body">
                    <p>text</p>
                </div>
            </a>
        </div>

<!-- VIDEO ONE OVERLAY-->
<div id="overlay" class="modal" role="dialog" aria-labelledby="modal-video-label">
    <div class="modal-dialog modal-full" role="document">
        <div class="modal-content">
            <div class="modal-header text-right">
                <button type="button" class="close" id="close-button" onclick="startoverlay()" aria-label="Close"> <span aria-hidden="true">×</span> </button>
            </div>
            <div class="modal-body">
                <div class="modal-video">
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe id="video" class="embed-responsive-item" src="https://www.youtube.com/embed/6HOlHZfqzxk?enablejsapi=1" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- VIDEO TWO OVERLAY-->
<div id="overlay2" class="modal" role="dialog" aria-labelledby="modal-video-label">
    <div class="modal-dialog modal-full" role="document">
        <div class="modal-content">
            <div class="modal-header text-right">
                <button type="button" class="close" id="close-button" onclick="startoverlay2()" aria-label="Close"> <span aria-hidden="true">×</span> </button>
            </div>
            <div class="modal-body">
                <div class="modal-video">
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe id="video" class="embed-responsive-item" src="https://www.youtube.com/embed/o1aVMcrb4aE?enablejsapi=1" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="modal-backdrop" class="modal-backdrop fade in"></div>


× 
×

JavaScript:

       <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
            <a onclick="startoverlay()" href="#" title="Watch video" class="flex-item box-link bg-lightgrey fg-darkgrey">
                <div class="tiled-image" id="img0">
                    <div class="tiled-overlay">
                        <h3 class="sm-title hblack text-uppercase"><strong class="fg-white"> <span class="fa fa-play" aria-label="Play"></span> </strong></h3> </div>
                </div>
                <div class="tiled-body">
                    <p>text</p>
                </div>
            </a>
        </div>
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
            <a onclick="startoverlay2()" href="#" title="Watch video" class="flex-item box-link bg-lightgrey fg-darkgrey">
                <div class="tiled-image" id="img0">
                    <div class="tiled-overlay">
                        <h3 class="sm-title hblack text-uppercase"><strong class="fg-white"> <span class="fa fa-play" aria-label="Play"></span> </strong></h3> </div>
                </div>
                <div class="tiled-body">
                    <p>text</p>
                </div>
            </a>
        </div>

<!-- VIDEO ONE OVERLAY-->
<div id="overlay" class="modal" role="dialog" aria-labelledby="modal-video-label">
    <div class="modal-dialog modal-full" role="document">
        <div class="modal-content">
            <div class="modal-header text-right">
                <button type="button" class="close" id="close-button" onclick="startoverlay()" aria-label="Close"> <span aria-hidden="true">×</span> </button>
            </div>
            <div class="modal-body">
                <div class="modal-video">
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe id="video" class="embed-responsive-item" src="https://www.youtube.com/embed/6HOlHZfqzxk?enablejsapi=1" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- VIDEO TWO OVERLAY-->
<div id="overlay2" class="modal" role="dialog" aria-labelledby="modal-video-label">
    <div class="modal-dialog modal-full" role="document">
        <div class="modal-content">
            <div class="modal-header text-right">
                <button type="button" class="close" id="close-button" onclick="startoverlay2()" aria-label="Close"> <span aria-hidden="true">×</span> </button>
            </div>
            <div class="modal-body">
                <div class="modal-video">
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe id="video" class="embed-responsive-item" src="https://www.youtube.com/embed/o1aVMcrb4aE?enablejsapi=1" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="modal-backdrop" class="modal-backdrop fade in"></div>

对于脚本的第二部分，我复制了覆盖代码并将其称为startoverlay2-我不确定这是否正确

    <script type="text/javascript">a
    var player;

    function onYouTubePlayerAPIReady() {
        player = new YT.Player('video', {
            events: {
                'onReady': onPlayerReady
            }
        });
    }

    function onPlayerReady(event) {
        var pauseButton = document.getElementById('close-button');
        pauseButton.addEventListener('click', function() {
            player.pauseVideo();
        });
    }
    var tag = document.createElement('script');
    tag.src = '//www.youtube.com/player_api';
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    </script>
    <!--  /* overlays */ -->

    <!-- /*    OVERLAY 1     */ -->
    <script type="text/javascript">
    function startoverlay() {
        el = document.getElementById("overlay");
        el.style.display = (el.style.display == "block") ? "none" : "block";
        els = document.getElementById("modal-backdrop");
        els.style.display = (els.style.display == "block") ? "none" : "block";
    }
    </script>

    <!-- /*    OVERLAY 2     */ -->
    <script type="text/javascript">
    function startoverlay2() {
        el = document.getElementById("overlay2");
        el.style.display = (el.style.display == "block") ? "none" : "block";
        els = document.getElementById("modal-backdrop");
        els.style.display = (els.style.display == "block") ? "none" : "block";
    }

</script>

a
var播放器；
函数onYouTubePlayerAPIReady（）{
播放器=新的YT.player（'视频'{
活动：{
“onReady”：onPlayerReady
}
});
}
函数onPlayerReady（事件）{
var pauseButton=document.getElementById（'close-button'）；
pauseButton.addEventListener（'click'，函数（）{
player.pauseVideo（）；
});
}
var tag=document.createElement（'script'）；
tag.src='//www.youtube.com/player_api'；
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
函数startoverlay（）{
el=document.getElementById（“覆盖”）；
el.style.display=（el.style.display=“块”）？“无”：“块”；
els=document.getElementById（“模式背景”）；
els.style.display=（els.style.display=“块”）？“无”：“块”；
}
函数startoverlay2（）{
el=document.getElementById（“overlay2”）；
el.style.display=（el.style.display=“块”）？“无”：“块”；
els=document.getElementById（“模式背景”）；
els.style.display=（els.style.display=“块”）？“无”：“块”；
}

我想知道我是否需要对pauseButton变量做些什么？

要解决这个问题，您需要告诉视频停止播放。当您使用YouTube播放器的

iframe

版本时，我们可以用相同的值替换它的

src

标记

// get the video's surrounding overlay
el = document.getElementById("overlay");

// hide the overlay, or show it if it's already hidden
el.style.display = (el.style.display == "block") ? "none" : "block";

// Restart the video (paused)
var videoIFrame = el.querySelector('iframe');
srcUrl = videoIFrame.getAttribute('src');    
videoIFrame.setAttribute('src', srcUrl);

这会导致重新加载视频，使您回到（暂停）开始状态，准备再次打开模式

如果您想在当前位置暂停视频，您将考虑使用API而不是IFRAME选项。

这有点超出了问题的范围，但也可以进行一些重构以减少代码重复，例如将JS拉入单个“隐藏”函数：

function stopAndHide(element) {
    element.style.display = "none";

    // Restart the video (paused)
    var videoIFrame = element.querySelector('iframe');
    srcUrl = videoIFrame.getAttribute('src');    
    videoIFrame.setAttribute('src', srcUrl);

    els = document.getElementById("modal-backdrop");
    els.style.display = "none";
}

然后从HTML调用它，如下所示：

<button type="button" class="close" onclick="stopAndHide(this)" aria-label="Close"> <span aria-hidden="true">×</span> </button>

×

要解决此问题，您需要告诉视频停止播放。当您使用YouTube播放器的

iframe

版本时，我们可以用相同的值替换它的

src

标记

// get the video's surrounding overlay
el = document.getElementById("overlay");

// hide the overlay, or show it if it's already hidden
el.style.display = (el.style.display == "block") ? "none" : "block";

// Restart the video (paused)
var videoIFrame = el.querySelector('iframe');
srcUrl = videoIFrame.getAttribute('src');    
videoIFrame.setAttribute('src', srcUrl);

这会导致重新加载视频，使您回到（暂停）开始状态，准备再次打开模式

如果您想在当前位置暂停视频，您将考虑使用API而不是IFRAME选项。

这有点超出了问题的范围，但也可以进行一些重构以减少代码重复，例如将JS拉入单个“隐藏”函数：

function stopAndHide(element) {
    element.style.display = "none";

    // Restart the video (paused)
    var videoIFrame = element.querySelector('iframe');
    srcUrl = videoIFrame.getAttribute('src');    
    videoIFrame.setAttribute('src', srcUrl);

    els = document.getElementById("modal-backdrop");
    els.style.display = "none";
}

然后从HTML调用它，如下所示：

<button type="button" class="close" onclick="stopAndHide(this)" aria-label="Close"> <span aria-hidden="true">×</span> </button>

×