Question

我有一个嵌入式YouTube视频，但是我想在播放视频的之前和之后使用自己的自定义图片作为视频的脸部（缩略图）。我已经成功地工作到显示自定义图像而不是视频的位置，并且单击该图像时，该图像被删除，并且视频被加载和播放。视频播放完成后，图像将恢复为视频准备播放的状态。

但是，一旦再次单击图像以重播视频，该视频将不再播放。我希望每次从单击事件侦听器调用playYouTubeVideo（）函数时，YT.Player对象都将重置并再次加载，但这是行不通的。

您能提供的任何帮助将不胜感激。

我作为演示创建的stackoverflow片段实际上并没有播放YouTube嵌入内容，因此您需要能够观看视频结尾以了解我的意思，因此我将其包括在内并链接到了一个小提琴好吧：

https://jsfiddle.net/MichaelVanEs/otq74r3w/3/

$(document).ready(function() {
  handleYouTubePlayer();
});
//
function handleYouTubePlayer() {
  // YouTube iPlayer API
  var tag = document.createElement("script");
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  //
  var player;
  var playerContainer = document.getElementById("player");
  var iFrameVideo = document.getElementById("iFrameVideo");
  var thumbnailWrap = document.getElementById("thumbnailWrap");
  //
  thumbnailWrap.addEventListener("click", playYouTubeVideo, false);
  //
  function playYouTubeVideo() {
    console.log("Comes into playYouTubeVideo");
    iFrameVideo.style.display = "block";
    thumbnailWrap.style.display = "none";
    //
    player = null;
    //
    player = new YT.Player("iFrameVideo", {
      playerVars: {
        mute: 1,
        autoplay: 1,
      },
      events: {
        "onReady": onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
    //
    function onPlayerReady(event) {
      console.log("Comes into onPlayerReady");
      event.target.mute();
      event.target.playVideo();
    }
    //
    function onPlayerStateChange(event) {
      if (event.data == YT.PlayerState.ENDED) { // Video has finished playing
        console.log("Comes into PlayerState.ENDED");
        thumbnailWrap.style.display = "block";
        iFrameVideo.style.display = "none";
        //
        event.target.pauseVideo();
        event.target.seekTo(0, true);
      }
    }
  }
}

.imgBrd {
  box-shadow: 0 0 0 1px #ccc;
}

.vid {
  display: block;
  width: 550px;
  height: 309px;
  margin: 0 auto;
}

#player {
  position: relative;
}

#iFrameVideo {
  display: none;
}

#thumbnailWrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#thumbnail {
  position: absolute;
  top: 0;
  left: 0;
}

#youtubeBtn {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 70px;
  color: rgba(40, 40, 40, 0.95);
  height: 100%;
  width: 100%;
  z-index: 2;
}

#youtubeBtn:hover {
  cursor: pointer;
  color: rgba(255, 0, 0, 0.95);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="player" class="vid">
  <div id="thumbnailWrap">
    <img id="thumbnail" class="vid imgBrd" src="https://libapps-au.s3-ap-southeast-2.amazonaws.com/customers/4753/images/dragArticleToGroup-thumb.png" alt="Video thumbnail" />
    <div id="youtubeBtn">
      <i class="fa fa-youtube-play" aria-hidden="true"></i>
    </div>
  </div>
  <iframe id="iFrameVideo" class="vid" src="https://www.youtube-nocookie.com/embed/tgbNymZ7vqY?rel=0&vq=hd720&enablejsapi=1" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Answer 1

请勿创建第二个YT.Player。重用单击缩略图时创建的第一个播放器。

function playYouTubeVideo() {
  ...
  // remove `player = null`
  if (player) {
    player.playVideo();
    return;
  }
  player = new YT.Player("iFrameVideo", {
  ...
}

嵌入式YouTube API的递归自定义缩略图不会重播

1 个答案: