播放后隐藏 youtube 视频答案

【问题标题】：Hide youtube video after playing播放后隐藏 youtube 视频
【发布时间】：2014-04-25 09:07:56
【问题描述】：

我有一个网页，并为它制作了一个视频。使用 HTML5 格式（webm、ogg、mp4）只能在 Chrome 中正常工作。视频结束后，我可以使用 JavaScript 隐藏视频。我以为我可以使用 youtube 播放器（自动播放、隐藏控件等）制作，但完成后我无法隐藏它。我找到了“onStateChange 函数，但我不能使用它。有什么想法吗？

<iframe width="840" height="630" src="URLrel=0&showinfo=0;&autoplay=1;controls=0" frameborder="0" allowfullscreen></iframe>

【问题讨论】：

标签： javascript jquery html video youtube

【解决方案1】：

您需要使用YouTube Iframe Player API 来检查 (1) 调用 onPlayerStateChange 时视频是否已结束 (YT.PlayerState.ENDED)，以及 (2) 删除/隐藏包含视频的 DOM 元素，即iframe。

function onPlayerStateChange(event) {
    // check if video ended and remove player
    if (event.data == YT.PlayerState.ENDED) {
      console.log($('#player').remove());
      done = true;
    }
  }

这里有一个完整的解决方案：http://jsfiddle.net/jibietr/ua57A/1/

【讨论】：

【解决方案2】：

当用户使用 onclick 事件关闭视频时，一个快速而肮脏的解决方案是使用 innerHTML 覆盖 iframe。如果 iframe 被包裹在一个 id = "iframeDiv" 的内部，您可以在关闭视频按钮的点击时调用以下函数：

function hideIframe() {
    document.getElementById("iframeDiv").innerHTML = '';
}

当用户打开视频时 iframe 会重新出现：

function showIframe() {
    document.getElementById("iframeDiv").innerHTML = '<iframe width="840" height="630" src="URLrel=0&showinfo=0;&autoplay=1;controls=0" frameborder="0" allowfullscreen></iframe>';
}

【讨论】：