嵌入的 Youtube 视频需要点击两次才能在移动端播放答案

【问题标题】：Embedded Youtube video needs two clicks to play on mobile view嵌入的 Youtube 视频需要点击两次才能在移动端播放
【发布时间】：2018-07-04 13:04:44
【问题描述】：

我试图创建一个延迟加载的嵌入式 youtube 视频，其中包含自定义图标作为播放按钮。它已成功创建，甚至在桌面视图中也可以正常工作。视频开始播放后，我在桌面上单击播放按钮。

但是，当我在移动视图上打开页面并单击播放按钮时，它不会播放，而且在第一次单击后它显示的是 youtube 默认播放按钮。之后，当我点击 Youtube 默认播放按钮时，它开始播放视频。

我只想单击一次以在移动设备上播放视频。请帮我纠正它，让我知道我在代码中到底哪里错了。

(function() {
  var youtube = document.querySelectorAll(".youtube");
  for (var i = 0; i < youtube.length; i++) {
    var source = "https://img.youtube.com/vi/" + youtube[i].dataset.embed + "/sddefault.jpg";
    var image = new Image();
    image.src = source;
    image.addEventListener("load", function() {
      youtube[i].appendChild(image);
    }(i));
    youtube[i].addEventListener("click", function() {
      var iframe = document.createElement("iframe");
      iframe.setAttribute("frameborder", "0");
      iframe.setAttribute("allowfullscreen", "");
      iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.embed + "?rel=0&showinfo=0&controls=0&autoplay=1");
      this.innerHTML = "";
      this.appendChild(iframe);
    });
  };

})();

.youtube {
  background-color: #000;
  margin-bottom: 30px;
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  cursor: pointer;
}

.youtube img {
  width: 100%;
  top: -16.84%;
  left: 0;
  opacity: 0.7;
}

.youtube .play-button {
  width: 90px;
  height: 60px;
  background-color: #333;
  box-shadow: 0 0 30px rgba( 0, 0, 0, 0.6);
  z-index: 1;
  opacity: 0.8;
  border-radius: 6px;
}

.youtube .play-button:before {
  content: "";
  border-style: solid;
  border-width: 15px 0 15px 26.0px;
  border-color: transparent transparent transparent #fff;
}

.youtube img,
.youtube .play-button {
  cursor: pointer;
}

.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
  position: absolute;
}

.youtube .play-button,
.youtube .play-button:before {
  top: 50%;
  left: 50%;
  transform: translate3d( -50%, -50%, 0);
}

.youtube iframe {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

<div class="youtube" data-embed="AqcjdkPMPJA">
  <!-- (2) the "play" button -->
  <div class="play-button"></div>
</div>

【问题讨论】：

移动设备上没有自动播放功能。如果您只是加载具有该属性的视频，则视频将无法启动。看看stackoverflow.com/questions/15090782/…

标签： javascript jquery html css youtube

【解决方案1】：

我不确定这个问题的作者是否想要自动播放功能。

不管怎样，我设法嵌入了 YouTube 视频，您只需在播放器上单击一次即可在移动设备上播放视频。在我看来，这是正确嵌入来自 YT 的 IFrame 播放器的问题，以便您可以使用 onYouTubeIframeAPIReady 函数。

这里的一切都很好地描述了：YouTube Player API Reference for iframe Embeds

做了一个小提琴，而不是循环，但你会明白的： JSFiddle

【讨论】：

我不想自动播放，而是希望我的视频在有人在移动视图上单击一次时播放，并且它应该使用延迟加载功能，以便页面在浏览器上加载得更快。跨度>
是的，我是这么认为的。我在回复中添加了一个 JSFiddle，也许你会发现它很有用。
请在答案中包含来自 JSFiddle 的代码，以符合站点规则并防止链接失效。

【解决方案2】：

除了添加了onPlayerReady 函数之外，我设法让视频只需在桌面/移动设备上单击即可播放，其 JavaScript 与您的非常相似：

function onPlayerReady(event) {
    event.target.playVideo();
}

如果您使用 WordPress，我已经使用它制作了一个 YouTube 延迟加载插件。更多信息+演示在这里https://thinksmall.me/

如果您不在 WordPress 上，请随时打开插件并查看其代码。代码与循环非常接近。您将了解如何使用 onPlayerReady 函数使其工作。

【讨论】：

【解决方案3】：

延迟加载意味着允许在移动设备中自动播放，而不是将延迟加载仅添加到大型设备，使用以下媒体查询删除移动设备等小型设备的延迟加载。

if($(window).width() < 767)
{
   // change functionality for smaller screens
} else {
   // change functionality for larger screens
}

【讨论】：