Linux Blog

CentOS7でLinuxサーバー構築

TOP » WEB開発 »

YouTubeの動画をサムネイルやリンクのクリックで切り替える

まずは実際の動作から。
以下の椎名林檎 - 長く短い祭三代目 J Soul Brothers from EXILE TRIBE / Summer Madness feat. Afrojackのリンクをクリックすると各動画に切り替わります。



ソースは以下の通りです。
①jaueryのロード②YouTubePlayerの処理③YouTubeを設置するdivタグ④リスト(サムネイル)という感じです。

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
  //<![CDATA[
  // YouTubePlayerReady時の処理
  function onYouTubePlayerReady(playerId) {
    "jQuery" in window && (function($) {
      $(function() {
        var ytPlayer = $("#obj-ytplayer").get(0);
        $(".list-movie-01 a").bind("click", function(event) {
          event.preventDefault();
          var videoId = $(this).attr("href").replace(/https?:\/\/[0-9a-zA-Z\.]+\//, "");
          ytPlayer.loadVideoById(videoId);
        });
      });
    }(jQuery));
  }
  //]]>
</script>
<script type="text/javascript">
  var ytPlayer2;
  // Player APIの非同期ロード
  (function (document) {
    var api = document.createElement("script"),
    script;
    api.src = "//www.youtube.com/player_api";
    script = document.getElementsByTagName("script")[0];
    script.parentNode.insertBefore(api, script);
    }(document));
    // Player APIスタンバイ完了時の処理
    function onYouTubePlayerAPIReady() {
      ytPlayer2 = new YT.Player("embed_movie", {
        width: 460,
        height: 350,
        videoId: "tF_fvr4TmpM",
        playerVars: {
        "rel": 0,
        "autoplay": 0,
        "wmode": "opaque"
      }
    });
    }
    // 動画リストクリック時の処理
    $(function () {
      $(".list-movie-02").on("click", "a", function (e) {
      e.preventDefault();
      var videoId = $(this).attr("href").replace(/https?:\/\/[0-9a-zA-Z\.]+\//, "");
      ytPlayer2.loadVideoById(videoId);
    });
  });
</script>
<div id="embed_movie"></div>
<ul class="linkStyle01 list-movie-02">
<li><a href="https://youtu.be/3LVAmMxICoA">椎名林檎 - 長く短い祭M</a></li>
<li><a href="https://youtu.be/tF_fvr4TmpM">三代目 J Soul Brothers from EXILE TRIBE / Summer Madness feat. Afrojack</a></li>
</ul>

コメントを残す