Question

我有一个网页，我为它制作了一个视频。使用HTML5格式（webm，ogg，mp4）只能正确使用Chrome。视频播放完毕后，我可以使用JavaScript隐藏视频。我以为我可以使用youtube播放器，（自动播放，隐藏控件等），但是当它完成时我无法隐藏它。我找到了＆＃34; onStateChange功能，但我无法使用它。有什么想法吗？

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

Answer 1

在调用YouTube Iframe Player API时，您需要使用YT.PlayerState.ENDED检查（1）视频是否已结束（onPlayerStateChange），以及（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/

Answer 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>';
}

播放后隐藏YouTube视频

2 个答案: