Обработчик событий не запускается при изменении состояния видео Iframe на Youtube - PullRequest
Новая
       9

Обработчик событий не запускается при изменении состояния видео Iframe на Youtube

0 голосов
/ 18 сентября 2018

Мне нужно, чтобы карусель остановилась, когда кто-нибудь щелкнет видео, чтобы воспроизвести его.Что касается документов, мне нужно использовать $ ('. Owl-carousel'). Trigger ('stop.owl.autoplay');

Видео Youtube внедряется через iframe.Я упомянул: Как запустить функцию на конце встроенного YouTube iFrame Но это не работает.В консоли я получаю предупреждение о том, что 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

Есть ли другой способ изменить обработчик триггера в состоянии видео?

Запуск триггера для контейнера iframe срабатывает, если я щелкаю пустое пространство слева и справа от видео Youtube: 

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

Но если я использую API-интерфейс Youtube для запуска обработчикапри изменении состояния воспроизведения видео не работает: 

//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/

...