Question

以下是一些代码，当您点击链接/图片时，嵌入的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>

JavaScript的：

对于脚本的第二部分，我复制了覆盖代码并将其称为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>

我想知道是否需要对pauseButton var做什么？

Answer 1

要解决此问题，您似乎需要告诉视频停止播放。当您使用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拉成单个隐藏＆＃39;功能：

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>

将poptping作为叠加层后，将YouTube视频停止播放

1 个答案: