Iframe视频(Youtube）滑动

Iframe Video (Youtube) swipe

本文关键字：滑动 Youtube 视频 Iframe 更新时间：2023-09-26

有没有人想到在滑块中处理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>

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

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

感谢互联网，感谢@halillusion。这让它对我有用。

iFrame:

<iframe allowfullscreen="" allow="autoplay" src="https://www.youtube-nocookie.com/embed/XXXXXXX?enablejsapi=1" tabindex="0"></iframe>

重要信息：

add allow＝"；自动播放"；到iframe
添加参数"；enablejsapi＝1"；到youtube url，以便它响应postMessage
```
            command = {
            "event": "command",
            "func": "playVideo" or "pauseVideo"
        };
```
player.contentWindow.postMessage（JSON.stringfy（命令），"*"）；

有用的答案：https://stackoverflow.com/a/7513356

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

rel＝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>

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