YouTube Player API で念写を再現しよう。

ジョジョの奇妙な冒険第三部にはテレビをつかった念写のシーンがあります。

言葉では非常に説明しにくいのですが、
テレビに念を込めると、次々とチャンネルが変わっていき、

「ーわれわれのー」
「中に」
「裏」
「切り」
「者」
「－がいる」
「カ」
「キョー」
「イン！」
「に！」
「気を」
「つけろ」
「DI」
「O」
「の」
「手下」
「だ！」

というメッセージを流すというシーンです。（詳しくはこちら）

実際に放送されているTV番組のセリフをこうもうまくつなげるものなのだろうか。
と。このシーンをはじめてみたときはそう感じました。

しかし、昨今動画共有まっしぐらの時代。YouTubeのように録画された映像が莫大にストックされている環境があれば話は別です。
YouTube Player APIをつかえばスタンド能力をもっていなくても、もっと簡単にメッセージを伝えることができるのではないでしょうか。
そんなこんなで、さっそくつくってみることにしました。

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>YouTube Player API テスト</title>
    </head>
    <body>
        <div id="wrapper">
            <div id="player"></div>
            <p id="txt" class="txt"></p>
        </div>
        <script>
            var win   = window,
                doc   = document,
                txt   = doc.getElementById("txt"),
                index = 0, 
                queue = [
                    {
                        videoId:      "iAn2lSYpAlA",
                        startSeconds: 94.2, // 再生開始時間
                        endSeconds:   95.7, // 再生終了時間
                        _txt:         "我々の"
                    },
                    {
                        videoId:      "cvFNEGD2-fY",
                        startSeconds: 41.1,
                        endSeconds:   41.453,
                        _txt:         "中に"
                    },
                    {
                        videoId:      "-XUxuFS_7sU",
                        startSeconds: 67.8,
                        endSeconds:   71.0,
                        _txt:         "裏切り者がいる"
                    },
                    {
                        videoId:      "n7H4p0ArZUU",
                        startSeconds: 50.5,
                        endSeconds:   51.4,
                        _txt:         "か今日"
                    },
                    {
                        videoId:      "Lho6HhpDSsE",
                        startSeconds: 58.9,
                        endSeconds:   59.4,
                        _txt:         "インに"
                    },
                    {
                        videoId:      "TuNicWcPrGY",
                        startSeconds: 53.4,
                        endSeconds:   55.0,
                        _txt:         "気をつけろ"
                    },
                    {
                        videoId:      "x3cKCMCvt0M",
                        startSeconds: 93.0,
                        endSeconds:   94.0,
                        _txt:         "ディオの"
                    },
                    {
                        videoId:      "-4BrAHSaEGw",
                        startSeconds: 110.3,
                        endSeconds:   110.745,
                        _txt:         "手下"
                    },
                    {
                        videoId:      "jcIOg_m-bp4",
                        startSeconds: 55.0,
                        endSeconds:   57.8,
                        _txt:         "だ"
                    }
                ],
                player;
            
            function onYouTubeIframeAPIReady() {
                player = new YT.Player("player", {
                    height: "276",
                    width: "465",
                    events: {
                        "onReady"       : onPlayerReady,
                        // ステータスが変わった際に発火するコールバック関数を登録
                        "onStateChange" : onPlayerStateChange
                    }
                });
            }
        
            function onPlayerReady(evt) {
                player.loadVideoById(queue[index]);
            }

            // ステータスが変わった際に発火するコールバック関数
            function onPlayerStateChange(evt) {
                if (evt.data === 0) { // 映像が停止した際がevt.data === 0
                    player.stopVideo();
                    if (index < queue.length - 1) {
                        player.loadVideoById(queue[++index]);
                    } else {
                        player.loadVideoById(queue[index = 0]);
                        player.stopVideo();
                    }
                }
                // 字幕の表示
                txt.innerHTML = queue[index]._txt;
            }
        
            function stopVideo() {
                player.stopVideo();
            }
        </script>
        <script src="https://www.youtube.com/iframe_api">
    </body>
</html>

いかがでしょうか。
一部聴き取りにくいところがあったため、全体的に字幕を入れてみました。
これで、裏切り者が誰なのかを余すことなくわかってもらえると思います。

今回は前回のようにプレイリストを配列で渡すのではなく、
自前でキューを用意して、その中身を1つずつプレイヤーに渡す形で実装しました。
その際、ビデオのIDだけでなく、startSecondsとendSecondsを渡すことによって、再生の開始と終了を指定しています。

みかづきブログその3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

YouTube Player API で念写を再現しよう。