YouTube iframe API 不工作

Question

此代码在 jspf 页面中，该页面包含在 jsp 页面中。

如果我创建单独的 html 页面并放置此代码，则它可以正常工作。但是如果我把它放在我的jsp页面中，当你打开模态并播放视频并单击关闭按钮时，视频会在后台继续播放，我将控制台消息放在 onPlayerStateChange 中并且它没有被调用。 Jsp 页面已导入prototype.js（版本1.6.0.1），如果我删除它，我的代码代码将再次开始工作。

我假设 javascript 中存在一些冲突，但不确定它是什么以及如何修复它，这是我的代码：

<style>

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
        rgba(0, 0, 0, 0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@
-webkit-keyframes animatetop {
    from {top: -300px;
    opacity: 0
}

to {
    top: 0;
    opacity: 1
}

}
@
keyframes animatetop {
    from {top: -300px;
    opacity: 0
}

to {
    top: 0;
    opacity: 1
}

}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-body {
    padding: 2px 50px 50px 50px;
}

</style>

<div id="VideoBlock" class="row">
    <div class="twelve columns">
        <div class="panel">
            <p>
                <strong>Please watch the video.   
                <a id="myBtn" style="cursor:pointer">Watch the video now</a>.
                </strong>
            </p>
        </div>
    </div>
</div>



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

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-body">
    <h5 align="center">Video</h5>
        <p align="center">
            <iframe id="player" width="640" height="480" src="https://www.youtube.com/embed/CuyOTJY_fDk?enablejsapi=1&rel=0" style="display:block"></iframe>    
        </p>
        <p>
            <a id="closeBtn" style="float: right;" class="nice small radius blue button">Close</a>
        </p>
    </div>
  </div>

</div>

<script>

    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', {
            playerVars : {
                rel : 0
            },
            events : {
                'onStateChange' : onPlayerStateChange
            }
        });
    }

    function onPlayerStateChange(event) {
        console.log('onPlayerStateChange is called');
        if (event.data == 0) {
            player.seekTo(0, true);
            player.pauseVideo();
        }

    }

    var watchedVideo = false;

    // Get the modal
    var modal = document.getElementById('myModal');

    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");

    // Get the <span> element that closes the modal
    var span = document.getElementById("closeBtn");

    // When the user clicks the button, open the modal 
    btn.onclick = function() {
        modal.style.display = "block";
        watchedVideo = true;
    };

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
        player.pauseVideo();
    };

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
            player.pauseVideo();
        }
    };
</script>

我将代码放在 jsfiddle HERE 中，但关闭按钮也不会暂停视频。如果我不清楚问题描述，请询问我。任何建议将不胜感激。谢谢。

编辑：我用上面的代码创建了简单的 html 文件。代码有效（单击停止按钮时视频暂停）。但后来我从HERE 下载了prototype.js 并添加到我的html 中，按钮停止工作......

Answer 1

我找到了解决这个问题的方法：用更新的版本（1.7）替换了prototype.js（1.6版），它解决了这个问题。