Lazy iframe APIからYouTube動画をロードする

Question

iframe APIを使用してYouTube動画を怠惰に読み込んでいます。すなわち、最初にポスター画像のみを読み込み、ユーザがそれをクリックすると、実際の画像とそのコンテンツのみが読み込まれます。

Answer 1

最後に、コードの下に、働いていた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> 

JS

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

Answer 2

これのほとんどは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>

この例では、ビデオをロードします。

ここでは、プレースホルダ画像に追加してクリックして画像を非表示にして動画を再生するよう少し変更しています。

機能でラップタグ（ステップ2）

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

はサイズの詳細は画像を確認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>

Answer 3

どのように？

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> 

JS

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

Answer 4

なぜ、ユーザーがそれらを見ているちょうどその時クリックでビデオをロードし、ありませんか？ 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(); 
}); 

これだけです！ iFramesは、ユーザーがスクロールして表示されるたびにロードされます。より多くの就任。here。