如何使用 vanilla Javascript 暂停嵌入的 Youtube 视频？

Question

我尝试在没有视频相关事件触发器的情况下暂停 iframe 嵌入的 YouTube 视频。

我已经阅读了youtube embedded api、this answer 和 this one，这是我目前所拥有的（由于 CORS 问题，视频无法在 sn-p 中播放，但我想它并不是真的问题。）：

<iframe id="video1" width="560" height="315" src="http://www.youtube.com/embed/JFBUJ6kNl28" frameborder="0" allowfullscreen></iframe>

<script type="text/javascript">
  //youtube api to pause video when changing section
  var tag = document.createElement('script');
  tag.src = "//www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  var player = false

  function onYouTubeIframeAPIReady() {
    player = new YT.Player('video1', {});
  }

  function jump() {
    console.log(player);
    if (player) {
      player.pauseVideo()
    }
  }
</script>
<button type="button" onclick="jump()" name="button">pause button</button>

我错过了什么？当我记录它时播放器对象就在那里，但它给我一个player.pauseVideo() is not a function

Answer 1

我找到了解决方案：如this answer中所述，您需要在视频网址中添加?enablejsapi=1

A：您必须在网址末尾添加?enablejsapi=1：/embed/vid_id?enablejsapi=1

不知何故，它不适用于我的 sn-p，但适用于我的实际情况。

Answer 2

你可以简单地使用：

iframe.contentWindow.postMessage(message, origin);

从 parentWindow 向 iframeWindow 发送消息。所有流行的视频服务都支持收听这些消息。

查看以下链接以查看现场演示：

https://codepen.io/mcakir/pen/JpQpwm

注意：现场演示会检查视频是否在 ViewPort 中。我使用的代码块支持播放/暂停来自 Youtube、vimeo 和 dailymotion（更多将很快添加）的 iframe 视频，而无需使用任何播放器的库或 SDK。

Answer 3

<a onclick="playVideoFunction()">Play video</a>
<a onclick="stopVideoFunction()">Stop video</a>

<iframe id="videoIframe" width="840" height="473" 
src="https://www.youtube.com/embed/dZ0fwJojhrs?feature=oembed" 
frameborder="0" allowfullscreen></iframe>

<script type="text/javascript">
function playVideoFunction() { 
  document.getElementById("videoIframe").src += "&autoplay=1";}

function stopVideoFunction() { 
  var ysrc = document.getElementById("videoIframe").src;    
  var newsrc = ysrc.replace("&autoplay=1", "");
  document.getElementById("videoIframe").src = newsrc;
}
</script>