Question

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

我尝试在iframe上放置一个叠加层并将事件发送到iframe，但它似乎无法正常工作： - /

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

Js Part：

     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>

Answer 1

必须在网址中包含以下属性。

相对= 0安培; enablejsapi = 1

注意：浏览注释行并在头部添加滑块库文件并保存。一旦添加了所有内容，您必须在浏览器中打开文件。你可以看到滑块。如果发现任何问题，请在下面评论。

谢谢， Anand 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>

Answer 2

您可以尝试此解决方案，这就是我解决问题的方式。：

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);

Answer 3

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

iframe视频（Youtube）滑动

3 个答案: