懶惰加載來自iframe的API的YouTube視頻

我想用iframe API延遲加載YouTube視頻。即。只在一開始加載海報圖像，當用戶點擊它時，只加載實際圖像及其內容。懶惰加載來自iframe的API的YouTube視頻

來源

2016-06-16 madhuhc

現在我想要一些食物，但我必須先尋找它。例如提供一些你已經嘗試過的東西的代碼。 –

你的意思是這樣嗎？ http://www.newmediacampaigns.com/blog/lazyytjs-a-jquery-plugin-to-lazy-load-youtube-videos – Atticweb

我能夠得到它的工作答案是在評論部分。 – madhuhc

-2

最後它的工作，下面的代碼是在angularJS。

HTML

<div data-ng-repeat="video in videoIds track by $index"> 
    <div id="uniQueId" ng-click="playVideo(video, 'player' + $index)"> 
     <div class="video-play-button"></div> 
    </div> 
</div>

$scope.playVideo = function(videoId, id) { 
     $scope.players[id] = new YT.Player(id, { 
      videoId: videoId, 
      width: '400', 
      height: '300', 
      playerVars: { 'autoplay': 1 }, 
      events: { 
       'onStateChange': $scope.onPlayerStateChange 
      } 
     }); 
    };

來源

2016-06-20 19:01:29 madhuhc

它給'YT未定義'errot – lakshay

大部分內容來自youtube page的入門部分。

<!-- 1. The <iframe> (and video player) will replace this <div> tag. --> 
 
    <div id="player"></div> 
 

 
    <script> 
 
     // 2. This code loads the IFrame Player API code asynchronously. 
 
     var tag = document.createElement('script'); 
 

 
     tag.src = "https://www.youtube.com/iframe_api"; 
 
     var firstScriptTag = document.getElementsByTagName('script')[0]; 
 
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
 

 
     // 3. This function creates an <iframe> (and YouTube player) 
 
     // after the API code downloads. 
 
     var player; 
 
     function onYouTubeIframeAPIReady() { 
 
     player = new YT.Player('player', { 
 
      height: '390', 
 
      width: '640', 
 
      videoId: 'M7lc1UVf-VE', 
 
      events: { 
 
      'onReady': onPlayerReady, 
 
      'onStateChange': onPlayerStateChange 
 
      } 
 
     }); 
 
     } 
 

 
     // 4. The API will call this function when the video player is ready. 
 
     function onPlayerReady(event) { 
 
     event.target.playVideo(); 
 
     } 
 

 
     // 5. The API calls this function when the player's state changes. 
 
     // The function indicates that when playing a video (state=1), 
 
     // the player should play for six seconds and then stop. 
 
     var done = false; 
 
     function onPlayerStateChange(event) { 
 
     if (event.data == YT.PlayerState.PLAYING && !done) { 
 
      setTimeout(stopVideo, 6000); 
 
      done = true; 
 
     } 
 
     } 
 
     function stopVideo() { 
 
     player.stopVideo(); 
 
     } 
 
    </script>

這個例子加載視頻時，它已準備就緒。

所以我們改變它有點添加一個佔位符的圖像，並點擊隱藏圖像和播放視頻。

裹在功能

function loadYT() { 
     var tag = document.createElement('script'); 
     tag.src = "https://www.youtube.com/iframe_api"; 
     var firstScriptTag = document.getElementsByTagName('script')[0]; 
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
    }

標籤（步驟2）添加圖像檢查this question關於大小的詳細信息。

<div id="placeholder"> 
    <img src="http://img.youtube.com/vi/M7lc1UVf-VE/sddefault.jpg" /> 
</div>

然後在點擊隱藏佔位符圖像，並加載玩家

document.getElementById("placeholder").addEventListener("click", function(){ 
    this.style.display = 'none'; 
    loadYT() 
});

最終結果可以在下面看到。

<div id="placeholder"> 
 
<img src="http://img.youtube.com/vi/M7lc1UVf-VE/sddefault.jpg" /> 
 
</div> 
 
</div> 
 
<div id="player"></div> 
 

 
<script> 
 

 
document.getElementById("placeholder").addEventListener("click", function(){ 
 
    this.style.display = 'none'; 
 
    loadYT() 
 
}); 
 
    // 2. This code loads the IFrame Player API code asynchronously. 
 
    function loadYT() { 
 
    var tag = document.createElement('script'); 
 
    tag.src = "https://www.youtube.com/iframe_api"; 
 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
 
    } 
 

 
    // 3. This function creates an <iframe> (and YouTube player) 
 
    // after the API code downloads. 
 
    var player; 
 

 
    function onYouTubeIframeAPIReady() { 
 
    player = new YT.Player('player', { 
 
     height: '390', 
 
     width: '640', 
 
     videoId: 'M7lc1UVf-VE', 
 
     events: { 
 
     'onReady': onPlayerReady, 
 
     'onStateChange': onPlayerStateChange 
 
     } 
 
    }); 
 
    } 
 

 
    // 4. The API will call this function when the video player is ready. 
 
    function onPlayerReady(event) { 
 
    event.target.playVideo(); 
 
    } 
 

 
    // 5. The API calls this function when the player's state changes. 
 
    // The function indicates that when playing a video (state=1), 
 
    // the player should play for six seconds and then stop. 
 
    var done = false; 
 

 
    function onPlayerStateChange(event) { 
 
    if (event.data == YT.PlayerState.PLAYING && !done) { 
 
     setTimeout(stopVideo, 6000); 
 
     done = true; 
 
    } 
 
    } 
 

 
    function stopVideo() { 
 
    player.stopVideo(); 
 
    } 
 

 
</script>

來源

2016-06-16 10:58:25 ak85

這個怎麼樣？

HTML

<div class="wrapper"> 
    <ul> 
     <li><a title="video 1" data-video="http://www.youtube.com/embed/X0DeIqJm4vM">Motherlover</a></li> 
     <li><a title="video 2" data-video="http://www.youtube.com/embed/GI6CfKcMhjY">Jack Sparrow</a></li> 
     <li><a title="video 3" data-video="http://www.youtube.com/embed/TcK0MYgnHjo">Ras trent</a></li> 
     <li><a title="video 4" data-video="http://www.youtube.com/embed/8yvEYKRF5IA">Boombox</a></li> 
     <li><a title="video 5" data-video="http://www.youtube.com/embed/6_W_xLWtNa0">Shy Ronnie 2</a></li> 
    </ul> 
    <iframe id="videoArea" width="350" height="250" src="http://www.youtube.com/embed/X0DeIqJm4vM" frameborder="0" allowfullscreen></iframe> 
</div>

var initVideos = function() { 
    var videoArea = $("#videoArea"), 
     divs = $("ul li a"); // or some other data format 

    // bind your hover event to the divs 
    divs.click(function(ev) { 
     ev.preventDefault(); 
     videoArea.prop("src", $(this).data('video')); 
     divs.removeClass("active"); 
     $(this).addClass("active"); 
    }); 
}; 

// once the DOM is ready 
$(function() { 
    initVideos(); 
});

DEMO

來源

2016-06-17 21:00:16

爲什麼加載上點擊視頻，而不僅僅是當用戶看到他們？使用jQuery.Lazy，你沒有更多的事情要做。:)

插件添加到您的網頁：（您需要的jQuery或的Zepto以及）

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazy/1.7.1/jquery.lazy.min.js"></script> 
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazy/1.7.1/plugins/jquery.lazy.youtube.min.js"></script>

準備好您的iFrame：（注意data-loader和data-src屬性）

<iframe data-loader="youtube" data-src="1AYGnw6MwFM" width="560" height="315"></iframe>

並開始使用Lazy：

$(function() { 
    $("iframe[data-src]").Lazy(); 
});

就是這樣！只要用戶通過滾動到達他們，iFrame就會被加載。更多信息here。

來源

2016-06-22 10:36:33 eisbehr

懶惰加載來自iframe的API的YouTube視頻

回答

相關問題