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的占位符player替换了视频。 YouTube API加载视频后，它将替换此div。我还将类close添加到span中，因此我们可以通过其类而不是标记引用它，这将允许您在模态上使用X按钮，但也使用{{1在其他地方标记而不会引起冲突。

span

的JavaScript

我们需要做一些事情：

加载YouTube API

<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>

加载视频

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 player; function onYouTubeIframeAPIReady(){ player = new YT.Player('player', { height: '390', width: '640', videoId: 'JY1ddEDcVV0', rel: '0', controls: '0', showinfo: '0' }); });函数
```
stopVideo()
```
每次关闭模式时都要调用function stopVideo() { player.stopVideo(); }。只需将其添加到“onclick”功能中即可。您也可以使用jQuery专门执行这些类型的函数，我已经通过关闭按钮显示了一个示例。
```
stopVideo()
```

JavaScript一起

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

Answer 3

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

时

when(mockedMergeContext.createNewEntityOfType(IService.class)).thenAnswer(invocation -> new ServiceMock());

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

当模态关闭时，视频仍在播放

3 个答案:

HTML

的JavaScript

JavaScript一起