Question

我正在WordPress编辑器中使用以下代码。使用我当前的代码，当我单击图像时，将显示实际的视频，我必须再次单击该视频才能播放它。

我想对其进行更改，以便显示视频图像，然后单击该视频即可开始播放。我只需要单击一次。现在，我必须单击两次，这是糟糕的用户体验。这是减少页面加载时间所必需的。

<div class="youtube" id="PpMS2SP_3Fs" style="width:100%; height: 600px;"></div>
<script>
  var videos = document.getElementsByClassName("youtube");

  for (var i = 0; i < videos.length; i++) {
    var youtube = videos[i];
    var img = document.createElement("img");
    img.setAttribute("src", "https://www.sociosquares.com/wp-content/uploads/2019/04/vid-img1-opti.jpg");
    img.setAttribute("class", "thumb");

    var circle = document.createElement("div");
    circle.setAttribute("class", "circle");

    youtube.appendChild(img);
    youtube.appendChild(circle);

    youtube.onclick = function() {
      var iframe = document.createElement("iframe");
      iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.id + "?autoplay=1&loop=1&playlist=PpMS2SP_3Fs");
      //"https://www.youtube.com/embed/PpMS2SP_3Fs?autoplay=1&loop=1&playlist=PpMS2SP_3Fs");

      iframe.style.width = this.style.width;
      iframe.style.height = this.style.height;

      this.parentNode.replaceChild(iframe, this);
    };
  }
</script>

我希望视频在单击图像后能够自动播放，但是没有，因此我必须再次单击才能播放视频。

Answer 1

jQuery('#image_id').click(function() {
  jQuery(".youtube").attr('src', jQuery(".youtube", parent).attr('src') + '?autoplay=1'); 
});

image_id是您单击的图像元素ID，youtube是嵌入的iframe的类。

单击图像后如何自动播放视频？

1 个答案: