有没有人有想法在 slider 中处理 Iframe 视频/音频,并可以滑动它并仍然通过单击来播放它?
我尝试在 iframe 上放置一个覆盖层并将事件分派(dispatch)到 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);
关于javascript - Iframe 视频 (Youtube) 滑动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28406760/