Youtube Iframe视频状​​态更改未触发事件处理程序

Question

当有人点击播放视频时，我需要停止轮播。 根据文档，我需要使用     $（'。owl-carousel'）。trigger（'stop.owl.autoplay'）;

Youtube视频是通过iframe嵌入的。 我指的是：How to fire function on Embedded YouTube iFrame's end 但是，它不起作用。我在控制台中收到警告，已弃用webkitURL。

错误日志：

[Deprecation] 'webkitURL' is deprecated. Please use 'URL' instead.
(unknown) [Deprecation] 'webkitURL' is deprecated. Please use 'URL' instead.
(anonymous)
g
z.Y
n
N
d
v
z
e.zKz
e.bg
wf @ www-embed-player.js:405
(anonymous) @ www-embed-player.js:404
f @ www-embed-player.js:377
(anonymous) @ www-embed-player.js:332

是否有其他方法可以在更改视频状态时触发处理程序？

如果我单击Youtube视频左右两侧的空白区域，则触发到iframe容器div的工作正常：

$( ".item" ).click(function() {
//alert( "Handler for .click() called." );
$('.owl-carousel').trigger('stop.owl.autoplay');
});

但是，如果我使用Youtube API在视频播放状态更改时触发处理程序，则它不起作用：

//This code loads the IFrame Player API code asynchronously.
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 player1;
function onYouTubePlayerAPIReady() {
player1 = new YT.Player('ytplayer', {
events: {
'onStateChange': ShowMe
}
});
}

function ShowMe() {
console.log("ShowMe triggered");
alert("ShowMe called");

var sStatus;
sStatus = player.getPlayerState();
if (sStatus == -1) alert("Video has not started.");
else if (sStatus == 0) {  $('#ytplayer').replaceWith('<a href="page/" target="_blank"><img class="special_hover" src="image" alt="" /></a>')
//change above function to react to when the player stops.
}
else if (sStatus == 1) {alert("Video has started.") } //Video is playing
else if (sStatus == 2) {alert("Video has paused.")}  //Video is paused
else if (sStatus == 3) { } //video is buffering 
else if (sStatus == 5) { } //Video is cued.
}

目前，我正在轮播中的第一个视频中对此进行测试：

<div class="owl-carousel">
<div class="item">                   
<iframe id="ytplayer" width="85%" height="220" src="https://www.youtube-nocookie.com/embed/1RA2Zy_IZfQ?rel=0&amp;controls=0&amp;showinfo=0&amp;enablejsapi=1" frameborder="0" allow="encrypted-media"></iframe>              
</div>
<div class="item">
<iframe id="ytplayer1" width="85%" height="220" src="https://www.youtube-nocookie.com/embed/1RA2Zy_IZfQ?rel=0&amp;controls=0&amp;showinfo=0&amp;enablejsapi=1" frameborder="0" allow="encrypted-media"></iframe>  
</div>
<div class="item">
<iframe id="ytplayer2" width="85%" height="220" src="https://www.youtube-nocookie.com/embed/1RA2Zy_IZfQ?rel=0&amp;controls=0&amp;showinfo=0&amp;enablejsapi=1" frameborder="0" allow="encrypted-media"></iframe>  
</div>
<div class="item">
<iframe id="ytplayer3" width="85%" height="220" src="https://www.youtube-nocookie.com/embed/1RA2Zy_IZfQ?rel=0&amp;controls=0&amp;showinfo=0&amp;enablejsapi=1" frameborder="0" allow="encrypted-media"></iframe>  
</div>
</div>

https://jsfiddle.net/shaileshghadge/hoe4jfcp/