Ekko-Lightbox無法播放YouTube視頻/鏈接圖像時出現問題

我正在學習/弄清楚如何成功地使用ekko-lightbox插件屬性在Bootstrap模式中播放YouTube視頻。我設法讓Vimeo鏈接工作，但YouTube鏈接不會檢索視頻，並且不會顯示按鈕圖像（外部鏈接）。我的工作文件保存在我的桌面/本地。我是否需要將我的文件上傳到ISP才能使YouTube和圖像鏈接起作用？我也想知道如何讓視頻在模式中播放，而不必依賴互聯網。這樣，如果我想介紹一個網站的概念，並沒有互聯網接入，我仍然可以有功能。Ekko-Lightbox無法播放YouTube視頻/鏈接圖像時出現問題

下面是我的索引文件中顯示的代碼。只有Vimeo視頻鏈接和靜態瀑布圖像鏈接工作。按鈕圖像鏈接也不會出現。請幫忙！！！

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Mixed Lightbox Gallery in Bootstrap</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link href="css/bootstrap.min.css" rel="stylesheet"> 
     <link href="css/ekko-lightbox.css" rel="stylesheet"> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-10 col-md-offset-1"> 


        <h3 class="page-header" id="mixed-gallery">Mixed gallery</h3> 
        <div class="row"> 
         <div class="col-md-offset-1 col-md-10"> 
          <div class="row"> 
           <a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4"> 
            <img src="//i1.ytimg.com/vi/yP11r5n5RNg/mqdefault.jpg" class="img-responsive"> 
           </a> 
           <a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4"> 
            <img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive"> 
           </a> 
           <a href="http://vimeo.com/80629469" data-remote="http://player.vimeo.com/video/80629469" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4"> 
            <img src="//b.vimeocdn.com/ts/458/070/458070637_200.jpg" class="img-responsive"> 
           </a> 
          </div> 
         </div> 
        </div> 



          </div> 
         </div> 
        </div> 



     <script src="js/jquery.js"></script> 
     <script src="js/bootstrap.min.js"></script> 
     <script src="js/ekko-lightbox.js"></script> 

     <script type="text/javascript"> 
      $(document).ready(function ($) { 
       // delegate calls to data-toggle="lightbox" 
       $(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) { 
        event.preventDefault(); 
        return $(this).ekkoLightbox({ 
         onShown: function() { 
          if (window.console) { 
           return console.log('Checking our the events huh?'); 
          } 
         }, 
         onNavigate: function(direction, itemIndex) { 
          if (window.console) { 
           return console.log('Navigating '+direction+'. Current item: '+itemIndex); 
          } 
         } 
        }); 
       }); 

       //Programatically call 
       $('#open-image').click(function (e) { 
        e.preventDefault(); 
        $(this).ekkoLightbox(); 
       }); 
       $('#open-youtube').click(function (e) { 
        e.preventDefault(); 
        $(this).ekkoLightbox(); 
       }); 

       // navigateTo 
       $(document).delegate('*[data-gallery="navigateTo"]', 'click', function(event) { 
        event.preventDefault(); 

        var lb; 
        return $(this).ekkoLightbox({ 
         onShown: function() { 

          lb = this; 

          $(lb.modal_content).on('click', '.modal-footer a', function(e) { 

           e.preventDefault(); 
           lb.navigateTo(2); 

          }); 

         } 
        }); 
       }); 


      }); 
     </script> 
    </body> 
</html>

來源

2016-04-02 r2opus2

是的，你需要有一個服務器上的文件，而不是本地的Youtube視頻和圖像工作。我也經歷過這種情況，通過檢查代碼，我看到了JavaScript的編寫方式，這些資產在本地工作時稱爲file：//而不是http：//。我想也許它與相對鏈接有關，但即使使用絕對URL也是如此。

由於Youtube是依賴於互聯網連接，我想不到一種方式來加載這些視頻沒有互聯網。如果您只是想出點什麼，請嘗試使用本地存儲的視頻而不是Youtube視頻。

來源

2016-06-02 19:09:08 Holly

Ekko-Lightbox無法播放YouTube視頻/鏈接圖像時出現問題

回答

相關問題