javascript - 延迟加载时如何自动播放 Wistia 视频？

Question

在下面的代码片段中，我使用 fetch 方法来加载我的资源并播放 Wistia 视频嵌入。我不能做的是在我点击播放后让视频自动开始播放。单击播放会删除初始叠加图像，但需要再次单击才能开始播放视频。

如何设置自动播放以在单击覆盖图像后运行？

let wistiaToken = "b60031b3915341a00bed53e86b2aee38d00f4be12c3146ecb432f1633aa07f23";

// The Logic that loads the Player
let loadPlayer = function(iframe, videoURL){
  iframe.style.zIndex = 2;
  iframe.src = videoURL;
}

Array.from(document.querySelectorAll('.ple_yt-box'))
.map((box)=> {
  let videoURL = box.getAttribute('data-url');
  // Fetch the Video Resources using the Wistia API
  fetch("https://api.wistia.com/v1/medias/"+videoURL+".json?api_password="+wistiaToken)
        .then((res)=> res.json())
        .then((res)=>{
      let thumb = res.thumbnail.url; // Display Thumbnail
            thumb = thumb.replace("resized=200x120","resized=640x360");
            box.querySelector(".ple_yt-thumb").src = thumb;
      box.querySelector(".play").addEventListener('click',(e)=>{
          videoURL = "https://fast.wistia.net/embed/iframe/"+videoURL+"?videoFoam=true&play=true";
        loadPlayer.call(this, box.querySelector('iframe'), videoURL);
      });
        }).catch(console.error);
});

.ple_yt-box {
  width: 640px;
  height: 360px;
  position: relative;
}
.ple_yt-box iframe {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.ple_yt-view {
  width: 100%;
  height: 100%;
  z-index: 2;
  background-color: #000;
  max-width: 100%;
  overflow: hidden;
  position: relative;
}
.ple_yt-thumb {
  bottom: 0;
  display: block;
  left: 0;
  margin: auto;
  max-width: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: auto;
}
.ple_yt-view .play {
  filter: alpha(opacity=80);
  opacity: 0.8;
  height: 77px;
  left: 50%;
  margin-left: -38px;
  margin-top: -38px;
  position: absolute;
  top: 50%;
  width: 77px;
  background: url("data:image/png;base64,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")
    no-repeat;
  transition: transform 0.2s ease-in-out;
  cursor: hand;
  cursor: pointer;
}
.ple_yt-view .play:hover {
  transform: scale(1.1);
}
iframe {
  outline: none;
  border: none;
}

      <div data-url="h16fin8bfq" class="ple_yt-box">
        <div class="ple_yt-view">
          <img src="https://rudysflooring.com/wp-content/uploads/interceramic_pinot_random-1200x675.jpg" class="ple_yt-thumb" />
          <div class="play"></div>
        </div>
        <iframe></iframe>
      </div>