夜の歌

プログラミング、音楽、本について緩く書いていきます。

YouTubeのAPIを使って（８月３日）

どうにかして、YouTubeの動画を再生出来る画面を２つ使いたかった。しかしなかなか、上手くいかず。

そうこうしてる内に、答え発見。

index.html

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script src="script.js"></script>
        <style>
            #player1{
                width: 640px;
                height: 360px;
                background-color: red;
            }

            #player2{
                width: 640px;
                height: 360px;
            }
        </style>
    </head>
    <body>
        <div id="player1"></div>
        <div id="player2"></div>

        <script src="http://www.youtube.com/player_api"></script>
    </body>
</html>

script.js

$(function() {
    var player1;
    var player2;

});
function onYouTubePlayerAPIReady() {
    player1 = new YT.Player('player1', {
        height: 360,
        width: 640,
        videoId: 'nMPUQNZVV44'
    });

    player2 = new YT.Player('player2', {
        height: 360,
        width: 640,
        videoId: 'vEeYksgHACI'
    });
}

onYouTubePlayerAPIReadyメソッドに、playerオブジェクトをもう１つ追加する感じで、作りたい機能は実現できた。

さて、今日も頑張ろう（すでに色々と進んでるw）