在视频播放结束后移除嵌入的YouTube播放器

Question

我目前有以下代码，可以在页面上播放YouTube视频。

<div id="player"></div>
<script>
//Load player api asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'JW5meKfy3fY',
      playerVars: { 'autoplay': 1, 'rel': 0, 'showinfo': 0, 'egm': 0, 'showsearch': 0, },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
}
function onPlayerReady(event) {
    event.target.playVideo();
}
function onPlayerStateChange(event) {
    //When the video has ended
    if (event.data == YT.PlayerState.ENDED) {
        //Get rid of the player
    }
}

onPlayerStateChange函数用于判断视频是否播放完毕。那么我该如何让这个播放器消失呢？

- mr.user1065741

---

只需删除id为“player”的元素。 - Rob W

Answer 1

如果您正在使用IFRAME API：

function onPlayerStateChange(event) {
    //When the video has ended
    if (event.data == YT.PlayerState.ENDED) {
        //Get rid of the player
        event.target.destroy();
    }
}

- Pandaiolo

---

这是 API 的文档：https://developers.google.com/youtube/iframe_api_reference#Accessing_and_Modifying_DOM_Nodes - Mathias

Answer 2

也许是这样的

function onPlayerStateChange(event,element) {
    //When the video has ended
    if (event.data == YT.PlayerState.ENDED) {
        //Get rid of the player
        element.style.display = "none";
    }
}

- Matt Gutting