Проблема с отображением видео API iframe YouTube в flexslider в Internet Explorer
Мы интегрировали видео фреймворк YouTube iframe в flexslider вместе с некоторыми изображениями.
Он содержит две кнопки, следующую и предыдущую, чтобы перейти к следующему или предыдущему слайду.
Слайдер продолжает скользить автоматически через 5 секунд.
Если на активном слайде есть видео YouTube iFrame iframe, и пользователь воспроизводит видео, мы прекращаем скольжение гибкого слайдера. И после того, как видео закончено, мы снова начинаем скользить.
Если пользователь нажимает кнопку "Следующая" или "Предыдущая", тогда, когда видео находится в состоянии воспроизведения, мы приостанавливаем воспроизведение видео и переходим к следующему или предыдущему слайду.
Этот сценарий прекрасно работает в Google Chrome и Mozilla, но в Internet Explorer, если вы нажмете кнопку "Далее", когда видео находится в состоянии воспроизведения, то он перейдет к следующему слайду, но слайд, в котором присутствует видео YouTube iframe api, станет видимым на левая сторона flex slider. Это происходит только в Internet Explorer.
HTML:
<div class="slider">
<div class="flexslider">
<ul class="slides" style="margin: 0px">
<li>
<asp:Image ID="Image1" runat="server" ImageUrl="/Upload/Videos/TextFlex1.jpg" />
</li>
<li>
<asp:Image ID="Image2" runat="server" ImageUrl="/Upload/Videos/TextFlex2.jpg" />
</li>
<li>
<iframe src="http://www.youtube.com/embed/-0pLDthR3Do?enablejsapi=1&rel=0" style="width: 936px; height: 391px;"></iframe>
</li>
<li>
<asp:Image ID="Image3" runat="server" ImageUrl="/Upload/Videos/TextFlex3.jpg" />
</li>
<li>
<asp:Image ID="Image4" runat="server" ImageUrl="/Upload/Videos/TextFlex4.jpg" />
</li>
<li>
<asp:Image ID="Image5" runat="server" ImageUrl="/Upload/Videos/TextFlex5.jpg" />
</li>
<li>
<asp:Image ID="Image6" runat="server" ImageUrl="/Upload/Videos/TextFlex6.jpg" />
</li>
<li>
<asp:Image ID="Image7" runat="server" ImageUrl="/Upload/Videos/TextFlex7.jpg" />
</li>
<li>
<asp:Image ID="Image8" runat="server" ImageUrl="/Upload/Videos/TextFlex8.jpg" />
</li>
<li>
<asp:Image ID="Image9" runat="server" ImageUrl="/Upload/Videos/TextFlex9.jpg" />
</li>
<li>
<asp:Image ID="Image10" runat="server" ImageUrl="/Upload/Videos/TextFlex10.jpg" />
</li>
</ul>
</div>
<div class="custom-navigation">
<ul>
<li>
<a href="prev" class="flex-previous-slide custom-navigation-left" onclick="return jWDMoveToPreviousSlide();"></a>
</li>
<li>
<a href="next" class="flex-next-slide custom-navigation-right" onclick="return jWDMoveToNextSlide();"></a>
</li>
</ul>
<div style="clear: both"></div>
</div>
</div>
Javascript:
<script type="text/javascript">
// Load the YouTube API. For some reason it's required to load it like this
// -------------------------------------------------------------------------------
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// -------------------------------------------------------------------------------
var player;
// Setup a callback for the YouTube api to attach video event handlers
window.onYouTubeIframeAPIReady = function () {
var flexSliderIframe = $('.flexslider iframe');
// Create a new player pointer; "this" is a DOMElement of the player's iframe
player = new YT.Player($('.flexslider iframe')[0], {
playerVars: {
autoplay: 1,
rel: 0
}
});
$(this).data('player2', player);
// Watch for changes on the player
player.addEventListener("onStateChange", function (state) {
switch (state.data) {
// If the user is playing a video, stop the slider
case YT.PlayerState.PLAYING:
$('.flexslider').flexslider("stop");
break;
// The video is no longer player, give the go-ahead to start the slider back up
case YT.PlayerState.ENDED:
debugger;
$(window).focus();
$('.flexslider').flexslider("play");
break;
}
});
}
window.onload = function () {
var element = $(".flex-active-slide").children();
// check if active slide childern has anchor tag then auto play the video
if (element.is("iframe")) {
player.playVideo();
$('.flexslider').flexslider("pause");
}
}
// this function is used to move to next slide of flex slider
// this will pause all videos which are playing
function jWDMoveToNextSlide() {
$('.flexslider').flexslider('next');
// check if we got function pause video then only proceed further
if (typeof player.playVideo === "function") {
player.pauseVideo();
}
else { // this means that control does not find any function so do nothing
// do nothing
}
$('.flexslider').flexslider("play");
return false;
}
// this function is used to move to previos slide of flex slider
// this will pause all videos which are playing
function jWDMoveToPreviousSlide() {
$('.flexslider').flexslider('prev');
// check if we got function pause video then only proceed further
if (typeof player.playVideo === "function") {
player.pauseVideo();
}
else { // this means that control does not find any function so do nothing
// do nothing
}
$('.flexslider').flexslider("play");
return false;
}
$(function () {
$('.flex-direction-nav').hide();
$('.flex-control-paging').hide();
$('.flex-pauseplay').hide();
$("a.flex-previous-slide").hide();
$("a.flex-next-slide").hide();
$('.flexslider, a.flex-previous-slide, a.flex-next-slide, .custom-navigation').hover(function () {
$("a.flex-previous-slide").show();
$("a.flex-next-slide").show();
},
function () {
$("a.flex-previous-slide").hide();
$("a.flex-next-slide").hide();
});
});
</script>
Лето: нажмите следующую кнопку, когда видео находится в состоянии воспроизведения, затем оно переходит к следующему слайду, но слайд, в котором присутствует видео iframe api youtube, становится видимым с левой стороны flex slider.