模态关闭时视频仍在播放

Question

当我关闭引导模式时，视频仍在播放。 所以我想要的是：当我关闭引导模式时，视频的声音会停止。

这里是脚本Js

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
    modal.style.display = "block";
}
span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

和 HTML 代码

<img id="myBtn" src="URL of button here" alt="" style="width: 70px; height:70px;" >

<div id="myModal" class="modal">
<!-- Modal content -->
    <div class="modal-content">

        <span class="close">x</span>
        <div class="videoWrapper">
            <p>
                <iframe width="640" height="360" src="https://www.youtube.com/embed/JY1ddEDcVV0?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
            </p>
        </div>
    </div>

</div

Answer 1

好的，这就是如何做到这一点。您将需要完全重写您的 JS。您可以使用iframe.postMessage(); 播放/暂停视频。以下是如何实现它的示例：

<div id="videoWrapper">
   <iframe width="500" height="315" src="https://www.youtube.com/embed/JY1ddEDcVV0?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
   <input onClick="toggleVideo('hide');" type='button'>
</div>


<script>
function toggleVideo(state) {
    var div = document.getElementById("videoWrapper");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = state == 'hide' ? 'none' : '';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}','*');
}
</script>

您还可以轻松地将<input> 更改为您的<img>。

非常感谢How to pause a YouTube player when hiding the iframe?

希望这会有所帮助！

Answer 2

您也可以使用YouTube API 来执行此操作，但这也需要重新编写您的一些代码。我已经根据您的情况调整了链接示例。

HTML

我已将视频替换为占位符 div，ID 为 player。 YouTube API 加载视频后，它将替换此 div。我还将close 类添加到span 中，因此我们可以通过其类而不是标签来引用它，这将允许您在模态框上使用X 按钮，但也可以在其他地方使用span 标签而不会导致冲突。

<img id="myBtn" src="URL of button here" alt="" style="width: 70px; height:70px;" >

<div id="myModal" class="modal">
<!-- Modal content -->
    <div class="modal-content">

        <span class="close">x</span>
        <div class="videoWrapper">
            <p>
                <div id="player"></div>
            </p>
        </div>
    </div>

</div>

JavaScript

我们需要做一些事情：

1. 加载 YouTube API

   var tag = document.createElement('script');
   tag.src = "https://www.youtube.com/iframe_api";
   var firstScriptTag = document.getElementsByTagName('script')[0];
   firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
   

2. 加载视频

   var player;
   function onYouTubeIframeAPIReady(){
       player = new YT.Player('player', {
             height: '390',
             width: '640',
             videoId: 'JY1ddEDcVV0',
             rel: '0',
             controls: '0',
             showinfo: '0'
           });
   });
   

3. 定义stopVideo()函数

   function stopVideo() {
       player.stopVideo();
   } 
   

4. 每次关闭模式时，请致电stopVideo()。只需将其添加到您的“onclick”功能中即可。您也可以使用 jQuery 专门执行这些类型的功能，我已经展示了一个带有关闭按钮的示例。

   $(".close").click(function() {
       modal.style.display = "none";
       stopVideo();
   });
   

JavaScript 一起

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
    modal.style.display = "block";
}
$(".close").click(function() {
    modal.style.display = "none";
    stopVideo();
});
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
        stopVideo();
    }
}
var player;
$( document ).ready(function() {
    player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'JY1ddEDcVV0',
          rel: '0',
          controls: '0',
          showinfo: '0'
        });
});

function stopVideo() {
  player.stopVideo();
}

Answer 3

我发现解决方案非常简单。 我为 span.onclick 添加了 1 行 - 当用户点击 X 时

span.onclick = function() {
modal.style.display = "none";

$('iframe').attr('src', ''); //line added }

但我面临另一个问题：当我关闭模式并再次打开它时，我想让视频再次出现。我得到了一个答案，但对我来说不是很清楚：“我建议您在让文档首先显示它之前（即在它自动播放之前）创建它的克隆” 有人可以帮忙吗？