iframe 视频 (Youtube) 滑动答案

【问题标题】：Iframe Video (Youtube) swipeiframe 视频 (Youtube) 滑动
【发布时间】：2015-02-09 09:45:38
【问题描述】：

有没有人想到在滑块中处理 Iframe 视频/音频，并有可能滑动它并仍然通过单击它来播放它？

我试图在 iframe 上放置一个叠加层并将事件发送到 iframe，但它似乎不起作用：-/

这是我之前的尝试： http://codepen.io/Anddo0/pen/PwOWxZ

JS部分：

     var iFrameContainer = document.querySelector( '#iFrameContainer' );
     var overlay = document.querySelector( '#overlay' );

     if( iFrameContainer && overlay ){

        overlay.addEventListener( 'click', function(){
            console.log( 'Add event on Overlay' );
            // We transfer the event click to the iframe
            event.target.nextElementSibling.dispatchEvent( cloneMouseEvent( event ) );
        } );

        iFrameContainer.addEventListener( 'click', function(){
            console.log( 'Click in IframeContainer' );
        } );

    }

    function cloneMouseEvent( e ) {
        var evt = document.createEvent( "MouseEvent" );
        evt.initMouseEvent( e.type, e.canBubble, e.cancelable, e.view, e.detail, e.screenX, e.screenY, e.clientX, e.clientY, e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, e.button, e.relatedTarget );
        return evt;
    }

html：

<div style='position: relative; height:300px; width:300px;'>

<div id='overlay' style='width:100%; height:100%; margin-bottom: 20px; height: 100%; position: absolute; overflow: hidden; z-index: 10;'></div>

<div  id='iFrameContainer' style="left: 0px; width: 100%; height: 100%; z-index:9;">

  <iframe allowfullscreen="true" frameborder="0" mozallowfullscreen="true" src="//www.youtube.com/embed/wTcNtgA6gHs?feature=oembed " style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;" webkitallowfullscreen="true">
  </iframe>

</div>

【问题讨论】：

你有没有尝试使用类似的插件：github.com/layalk/FlexSlider
实际上我现在使用github.com/thebird/Swipe 的重写版本作为swipper 我查看了您的插件，似乎他们遇到了同样的问题：flexslider.woothemes.com/video.html 在移动视图中查看此页面并尝试滑动vimeoh 视频不起作用。

标签： javascript iframe video swipe

【解决方案1】：

你可以试试这个解决方案，这就是我解决问题的方法。：

var swiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',
        },
    });
    (function($) {
        jQuery(document).ready(function($) {
            swiper.on("transitionEnd", function(swiper) {
                var currentSlide, slideType, player, command;
                currentSlide = $('.swiper-container').find(".swiper-slide-active");
                previousSlide = $('.swiper-container').find(".swiper-slide-prev");

                slideType = currentSlide.attr("class").split(" ")[1];
                player = currentSlide.find("iframe").get(0);
                command = {
                    "event": "command",
                    "func": "playVideo"
                };
                if (player != undefined) {
                    player.contentWindow.postMessage(JSON.stringify(command), "*");
                }

                slideType = previousSlide.attr("class");
                if(slideType != undefined)
                {   
                    slideType = slideType.split(" ")[1];
                    player = previousSlide.find("iframe").get(0);
                    command = {
                        "event": "command",
                        "func": "pauseVideo"
                    };
         // If you don't using autoplay you should use "stopVideo" instead of "pauseVideo"
                    if (player != undefined) {
                        player.contentWindow.postMessage(JSON.stringify(command), "*");
                    }
                }
            });
        });
    })(jQuery);

【讨论】：

它不只是在滑动器中可见/不可见的视频上播放/暂停实现吗？这并不能解决刷卡问题本身
它对我有用，它应该有用。如果解决方案有问题，能否请您抛出示例代码？
在 YT 视频的桌面上滑动无法正常工作。箭头导航虽然完美。我在 YT 视频上添加了一个叠加层作为解决方法，但失去了控制（播放/暂停除外）
youtube iframe 的更新可能已损坏。我会在第一时间尝试再次测试。

【解决方案2】：

必须在 URL 中包含以下属性。

rel=0&enablejsapi=1

注意：浏览注释行并将这些滑块库文件添加到 head 部分并保存。添加所有内容后，您必须在浏览器中打开文件。您可以看到滑块。如果发现任何问题，请在下方评论。

谢谢，阿南德VK

<!DOCTYPE html>
<html>
<head>
	<!-- Anand VK -->
	
	<!-- Jquery library -->
	<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
	
	<!-- Please include below CDn in head section in html file -->
	<script id="iframe-demo" src="https://www.youtube.com/iframe_api"></script>
	
	<!--please inlcude Slick Slider CSS file here -->
	
	<!--Please include Slick Slider JS file Here  -->
	
	<style>
		.youTubeVideo{position:relative;}
		#wrapper{width: 30%; margin: auto;}
		.slick-list draggable{margin-top: 3%;}
		body{outline: none; background:black;}
		:focus{outline: none;}
		.slick-list.draggable{margin-top: 10px;}
	</style>
	
	
</head>

<body>
<div id="wrapper">
	<div class="slider">
		<div><img src="http://placekitten.com/500/480" alt="" width="500" height="400"></div>
		<div class="youTubeVideo">
			<div class="video"></div>
			<iframe id="videoSwipe" width="465" height="400" src="https://www.youtube.com/embed/exUQkIkyBBI?rel=0&enablejsapi=1"></iframe>
		</div>
		<div><img src="http://placekitten.com/500/480" alt="" width="500" height="400"></div>
		<div><img src="http://placekitten.com/500/460" alt="" width="500" height="400"></div>
		<div><img src="http://placekitten.com/500/440" alt="" width="500" height="400"></div>
		<div><img src="http://placekitten.com/500/420" alt="" width="500" height="400"></div>
	</div>
</div>
	<script type="text/javascript">
	<!-- Anand VK -->
	  $('.slider').slick();
	  var player;
	  function onYouTubeIframeAPIReady() {
		player = new YT.Player('videoSwipe', {
			events: {
			  'onReady': onPlayerReady,
			  'onStateChange': onPlayerStateChange
			}
		});
	  }
	   
	  function onPlayerReady(e) {
		 $('.youTubeVideo').find('.video').addClass('video-overlay');
	  }
	  function OverlayOnVideo(playerStatus) {
		 if (playerStatus == 2) {
			$('.youTubeVideo').find('.video').addClass('video-overlay');
		  } 
	  }
	  
	  function onPlayerStateChange(e) {
		OverlayOnVideo(e.data);
	  }
	  
	  $(document).on("click", ".video-overlay", function(){
		  if(player) {
			 player.playVideo();
			 $('.youTubeVideo').find('.video').removeClass('video-overlay');
		  }
	  });

	</script>
</body>
</html>

【讨论】：

【解决方案3】：

我刚刚在 iframe 中间添加了另一个滑动器，因此 YouTube 控制器仍然可以访问，并使用滑动器控制器同步底层滑动器：https://swiperjs.com/api/#controller

【讨论】：