У меня есть встроенное видео на 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>