Iframe Video（Youtube）swipe

有沒有人有一個想法來處理滑塊中的iframe視頻/音頻，並獲得可能性刷卡並仍然通過單擊它來播放它？Iframe Video（Youtube）swipe

我試圖把覆蓋在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>

來源

2015-02-09 Anddo0

具有u嘗試使用插件如：https://github.com/layalk/FlexSlider – abhiklpm 2015-02-09 09:57:43

其實我用現在的swipper重寫版本的https://github.com/thebird/Swipe 我看着你的插件，看起來他們得到了同樣的問題： http://flexslider.woothemes.com/video.html看看這個頁面的移動視圖和嘗試刷在Vimeoh視頻不工作。 – Anddo0 2015-02-09 10:02:07

其必須在URL中包含以下屬性。

相對= 0 & enablejsapi = 1

注：通過註釋行去，並在頭部添加這些滑塊庫文件並將其保存。一旦添加了所有內容，您必須在瀏覽器中打開該文件。您可以看到滑塊。如果發現任何問題，請在下面評論。

感謝，阿南德VK

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

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

 
\t </script> 
 
</body> 
 
</html>

來源

2017-06-26 06:42:38

Iframe Video（Youtube）swipe

回答

相關問題