サビリピ – YouTube Player APIでWEBアプリケーションを作成しました。

またiframe 組み込みの YouTube Player APIのWEBアプリケーションを作ってみました。

 

作成したアプリ

サビリピ – Youtube動画で大好きな曲のサビを無限リピートしよう

Youtubeに投稿されている曲のサビの開始位置を設定すると指定した秒数分無限リピートするアプリです。

開始位置は複数設定可能なので1番のサビと2番のサビを合わせて無限リピートすることができます。

 

サビリピで作成した動画

 


にじいろ – 絢香

 


安室奈美恵 「Hero」

 


宇宙よりも遠い場所「ここから、ここから」

 


AAA – 「No Way Back」

 


華原朋美 – I’m proud



アプリのソース

いつもの様にフロントはbootstrap、Jquery、Javascript、サーバーサイドはPHPです。

 

<?php
    //HTML エンティティに変換
    function h($value){
        return htmlspecialchars($value, ENT_QUOTES, 'UTF-8');
    }
    //各ソーシャルボタンのタイトル、URLの設定
    $site_title='サビリピ';

    $url=$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"];
    //以下のクエリパラメータ削除
    $url=str_replace('&play=1','',$url);
    $url=str_replace('&share-btn=1','',$url);
    $url=str_replace('&share=1','',$url);

    $url.=(empty($_GET['url'])?'':'&share=1');
    $full_url=(empty($_SERVER["HTTPS"]) ? "http://" : "https://").$url
?>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Youtubeに投稿されている曲の開始位置を設定し無限リピートします。大好きな曲の特定のメロディーを流しましょう">
    <!-- 表示領域を端末や ブラウザに合わせ、初期倍率を1に設定 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">


    <!-- honoka css  -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.honokak.osaka/honoka/3.3.7/css/bootstrap.min.css">
    <?php if(empty($_GET['title'])): ?>
        <title><?php echo $site_title ?> - Youtube動画で大好きな曲のサビを無限リピートしよう</title>
    <?php else: ?>
        <title><?php echo h($_GET['title']) ?> - <?php echo $site_title ?></title>
    <?php endif; ?>
</head>
<body>
<!-- ソーシャルボタン用 facebook sdk -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.12&appId=910672038986001&autoLogAppEvents=1';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <a href="/sabi-repeat.php" class="navbar-brand">
                <span class="text-primary"><?php echo $site_title ?></span>
            </a>
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse" id="navbar-main">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="http://it-ti.work">ITモード</a></li>
            </ul>
        </div>
    </div>
</div>
<?php if(empty($_SERVER['QUERY_STRING'])): ?>
    <div class="text-center" style="background:url('http://app.it-ti.work/asset/img/sabi-top.jpg') no-repeat center center;background-size:cover; margin:-24px 0 30px;;padding:68px 0;color:#fff;">
        <h1 style="font-size:50px;"><?php echo $site_title ?></h1>
        <div class="form-group" style="margin-bottom:45px;">
            曲のサビを無限リピートしよう
        </div>
        <div class="form-group">
            <a href="#create-video" class="btn btn-danger">作成済みの曲を聴く</a>
        </div>
        <div class="form-group">
            <button class="btn btn-xs btn-default" id="share" type="button"><span class="glyphicon glyphicon-share-alt"></span> 共有する</button>
        </div>
    </div>
<?php endif; ?>
<div class="container">
    <div class="row">
        <div class="col-lg-12">

          <div class="panel panel-default">
                <div class="panel-heading text-center">
                    <h4>Youtubeに投稿されている曲の開始位置を設定すると指定した秒数無限リピートします</h4>
                    <?php
                        // スマホ判定用にユーザエージェントを取得
                        $ua=$_SERVER['HTTP_USER_AGENT'];
                    ?>
                    <?php if((strpos($ua, 'iPhone') !== false) || (strpos($ua, 'iPod') !== false) ||(strpos($ua, 'Android') !== false)): ?>
                        (スマホではうまく再生されない場合があります)
                    <?php endif; ?>
                </div>
            <div class="panel-body text-center">
            <!-- YoutubeのIFrameを以下(idがplayer)の要素に設定する -->
                <div id="player" class="hide"></div>
            </div>
            <form method="get">
                <!-- クエリパラメータにshareが設定されている場合、動画設定項目を非表示 -->
                <div class="condition" style="<?php echo empty($_GET['share']) && empty($_GET['share-btn'])?'':'display:none;' ?>">
                    <div class="panel-body">
                        <h4>
                            <span class="label label-primary"><i class="glyphicon glyphicon-flag"></i>STEP1</span>
                            <span class=""> Youtube動画のURLを指定(コピペ)して設定ボタンをクリックしください</span>
                        </h4>
                        <div class="input-group">
                            <span class="input-group-btn">
                            <!-- youtubeサイトのリンク先を指定 -->
                                <a href="https://www.youtube.com/channel/UC-9-kyTW8ZkZNDHQJ6FgpwQ/featured" class="btn btn-default" target="_blank">Yotube動画 <span class="glyphicon glyphicon-new-window"></span></a>
                            </span>
                            <input name="url" class="form-control" id="youtube-url" value="<?php echo empty($_GET['url'])?'':h($_GET['url']) ?>">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" id="video-set"><span class="glyphicon glyphicon-ok"></span> 設定</button>
                            </span>
                        </div>
                    </div>
                    <div class="panel-body">
                        <h4>
                            <span class="label label-primary"><i class="glyphicon glyphicon-flag"></i>STEP2</span>
                             秒(サビの開始位置)を指定してください。
                            <span class="glyphicon glyphicon-question-sign" data-toggle="tooltip" data-html="true"  title="<p>・秒は複数指定が可能です<br />(1番のサビと2番のサビ両方を再生する場合などに使用します)<br>複数指定する場合は<br>「,(カンマ)」区切りで<br>指定してください<br>例)50,120</p><p>・小数点以下一桁まで指定可能<br>例)18.5</p><p>・動画を再生後「秒取得」<br>をクリックすると閲覧中動画の経過時間(秒)を取得し追加します。</p>"></span>
                        </h4>
                        <div class="input-group">
                            <span class="input-group-btn">
                                <button class="btn btn-default start-set" <?= empty($_GET['set'])?'disabled':'' ?> type="button" id="start-set">秒取得 <span class="glyphicon glyphicon-plus-sign"></span></button>
                            </span>
                            <input name="start" class="form-control" id="start" placeholder="開始位置。カンマ区切りで複数指定可能。 例)50,120" value="<?php echo empty($_GET['start'])?'':h($_GET['start']) ?>">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" id="start-clear" title="秒をクリア"><span class="glyphicon glyphicon-remove-sign"></span></button>
                            </span>
                        </div>
                    </div>
                    <div class="panel-body">
                        <h4>
                            <span class="label label-primary"><i class="glyphicon glyphicon-flag"></i>STEP3</span>
                             リピート再生を行う秒数を指定してください
                        </h4>
                        <div class="form-group">
                            <?php $repeat_sec=empty($_GET['repeat-sec'])?30:h($_GET['repeat-sec']) ?>
                            <select class="form-control" id="repeat-sec" name="repeat-sec">
                                <option value="0.5" <?php echo $repeat_sec=='0.5'?'selected':'' ?>>0.5秒</option>
                                <?php for($i=1;$i<=70;$i++): ?>
                                    <option value="<?php echo $i ?>" <?php echo $repeat_sec==$i?'selected':'' ?>><?php echo $i ?>秒</option>
                                <?php endfor; ?>
                            </select>
                        </div>
                    </div>
                    <?php if (!empty($_GET['t'])) : ?>
                        <div class="panel-body title-section">
                            <h4>
                                <i class="glyphicon glyphicon-flag"></i>
                                 4. タイトル(任意入力)
                            </h4>
                            <input name="title" class="form-control" id="title" value="">
                        </div>
                    <?php endif; ?>
                    <div class="panel-body text-center">
                        <button class="btn btn-warning btn-sm" id="confirm" type="button"><span class="glyphicon glyphicon-play"></span> 確認再生</button>
                        <!-- submitタイプを指定 -->
                        <button class="btn btn-warning btn-sm" name="share-btn" value="1" type="submit"><span class="glyphicon glyphicon-share-alt"></span> シェアする</button>
                        <?php if(!empty($_SERVER['QUERY_STRING'])): ?>
                            <a href="<?= $full_url ?>" class="btn btn-sm btn-default"><span class="glyphicon glyphicon-repeat"></span> 取り消し</a>
                        <?php endif; ?>
                    </div>
                </div>
                <!-- クエリパラメータにshare-btnが設定されている場合、動画設定項目を非表示 -->
                <div class="panel-body footer-btn" style="<?php echo empty($_GET['share']) && empty($_GET['share-btn'])?'display:none;':'' ?>">
                    <div class="form-group text-center">
                        <button class="btn btn-large btn-primary" id="play" type="button"><span class="glyphicon glyphicon-play"></span> 再生する</button>
                    </div>
                    <div class="form-group pull-right">
                        <a href="/sabi-repeat.php" class="btn btn-xs btn-success"><span class="glyphicon glyphicon-plus"></span> 作成する</a>
                        <button class="btn btn-xs btn-default" id="customize" type="button"><span class="glyphicon glyphicon glyphicon-cog"></span> 調整</button>
                        <button class="btn btn-xs btn-default" id="stop" type="button"><span class="glyphicon glyphicon glyphicon glyphicon-stop"></span> 停止</button>
                        <button class="btn btn-xs btn-default" id="share" type="button"><span class="glyphicon glyphicon-share-alt"></span> 共有</button>
                    </div>
                </div>
            </form>
          </div>


          <div class="panel panel-default" id="create-video">
            <div class="panel-heading text-center">
                作成したサビリピ
            </div>
            <?php
                $videos[0]['url']="http://app.it-ti.work/sabi-repeat.php?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DjhOVibLEDhA&start=49&title=%E6%98%9F%E9%87%8E%E6%BA%90+-+%E6%81%8B&share=1";
                $videos[0]['image']="http://i.ytimg.com/vi/jhOVibLEDhA/mqdefault.jpg";
                $videos[0]['title']="星野源 - 恋";

                $videos[1]['url']="http://app.it-ti.work/sabi-repeat.php?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dtpk0PxK-c5E&start=81&repeat-sec=40&title=%E5%AE%87%E5%A4%9A%E7%94%B0%E3%83%92%E3%82%AB%E3%83%AB+-+Flavor+Of+Life+-Ballad+Version-&share=1";
                $videos[1]['image']="http://i.ytimg.com/vi/tpk0PxK-c5E/mqdefault.jpg";
                $videos[1]['title']="宇多田ヒカル - Flavor Of Life -Ballad Version-";

                $videos[2]['url']="http://app.it-ti.work/sabi-repeat.php?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DWPH1BLHKOJE&start=108.5&repeat-sec=45&title=%E3%82%B3%E3%83%96%E3%82%AF%E3%83%AD+-+%E8%95%BE&share=1";
                $videos[2]['image']="http://i.ytimg.com/vi/WPH1BLHKOJE/mqdefault.jpg";
                $videos[2]['title']="コブクロ - 蕾";

                $videos[3]['url']="http://app.it-ti.work/sabi-repeat.php?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DA9eJ7HxGUhA&start=96.7&repeat-sec=45&share=1";
                $videos[3]['image']="http://i.ytimg.com/vi/A9eJ7HxGUhA/mqdefault.jpg";
                $videos[3]['title']="Mr.Children - 旅立ちの唄";

                $videos[4]['url']="http://app.it-ti.work/sabi-repeat.php?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DWdhMjzfg6-k&start=59&repeat-sec=35&title=AKB48+-+%E3%83%95%E3%83%A9%E3%82%A4%E3%83%B3%E3%82%B0%E3%82%B2%E3%83%83%E3%83%88+&share=1";
                $videos[4]['image']="http://i.ytimg.com/vi/WdhMjzfg6-k/mqdefault.jpg";
                $videos[4]['title']="AKB48 - フライングゲット";

                $videos[5]['url']="http://app.it-ti.work/sabi-repeat.php?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DOfCeHiQcM4E&start=76.5&repeat-sec=35&title=%E3%81%BC%E3%81%8F%E3%81%AE%E3%82%8A%E3%82%8A%E3%81%A3%E3%81%8F%E3%81%AE%E3%81%BC%E3%81%86%E3%82%88%E3%81%BF+-+SKY%27s+the+limit&share=1";
                $videos[5]['image']="http://i.ytimg.com/vi/OfCeHiQcM4E/mqdefault.jpg";
                $videos[5]['title']="ぼくのりりっくのぼうよみ - SKY's the limit";

                $videos[6]['url']="http://app.it-ti.work/sabi-repeat.php?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DlzAyrgSqeeE&start=59&repeat-sec=30&title=%E7%B1%B3%E6%B4%A5%E7%8E%84%E5%B8%AB+-+orion&share=1";
                $videos[6]['image']="http://i.ytimg.com/vi/lzAyrgSqeeE/mqdefault.jpg";
                $videos[6]['title']="米津玄師 - orion";

                $videos[7]['url']="http://app.it-ti.work/sabi-repeat.php?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DFUmZMrA7ggk&start=101%2C215%2C268%2C293.9&repeat-sec=30&share=1&title=NAO+-+HY";
                $videos[7]['image']="http://i.ytimg.com/vi/FUmZMrA7ggk/mqdefault.jpg";
                $videos[7]['title']="NAO - HY";

                $videos[8]['url']="http://app.it-ti.work/sabi-repeat.php?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DTSlpJaWLcC8&start=47.5&repeat-sec=30&title=%E8%A5%BF%E9%87%8E%E3%82%AB%E3%83%8A+-+%E3%83%91%E3%83%83&share=1";
                $videos[8]['image']="http://i.ytimg.com/vi/TSlpJaWLcC8/mqdefault.jpg";
                $videos[8]['title']="西野カナ - パ";

                $videos[9]['url']="http://app.it-ti.work/sabi-repeat.php?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DLxr9tvYUHcg&start=66.5&repeat-sec=45&title=%E7%99%BB%E7%BE%8E%E4%B8%98%E9%AB%98%E6%A0%A1%E3%83%80%E3%83%B3%E3%82%B9%E9%83%A8+-+%E3%83%90%E3%83%96%E3%83%AA%E3%83%BC%E3%83%80%E3%83%B3%E3%82%B9&share=1";
                $videos[9]['image']="http://i.ytimg.com/vi/Lxr9tvYUHcg/mqdefault.jpg";
                $videos[9]['title']="登美丘高校ダンス部 - パバブリーダンス";

                $videos[10]['url']="http://app.it-ti.work/sabi-repeat.php?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D8PavB1CGZU4&start=115.3%2C227&repeat-sec=48&title=%E8%8F%AF%E5%8E%9F%E6%9C%8B%E7%BE%8E+-+I%27m+proud&share=1";
                $videos[10]['image']="http://i.ytimg.com/vi/8PavB1CGZU4/mqdefault.jpg";
                $videos[10]['title']="華原朋美 - I'm proud";

                $videos[11]['url']="http://app.it-ti.work/sabi-repeat.php?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DeW9YHXfZhGI&start=58&repeat-sec=28&title=AAA+-+No+Way+Back&share=1";
                $videos[11]['image']="http://i.ytimg.com/vi/eW9YHXfZhGI/mqdefault.jpg";
                $videos[11]['title']="AAA - 「No Way Back」";

                $videos[12]['url']="http://app.it-ti.work/sabi-repeat.php?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DkjnKbHvVmZU&start=40&repeat-sec=45&title=TV%E3%82%A2%E3%83%8B%E3%83%A1%E3%80%8C%E5%AE%87%E5%AE%99%E3%82%88%E3%82%8A%E3%82%82%E9%81%A0%E3%81%84%E5%A0%B4%E6%89%80%E3%80%8D%E3%82%A8%E3%83%B3%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%83%86%E3%83%BC%E3%83%9E%E3%80%8C%E3%81%93%E3%81%93%E3%81%8B%E3%82%89%E3%80%81%E3%81%93%E3%81%93%E3%81%8B%E3%82%89%E3%80%8D&share=1";
                $videos[12]['image']="http://i.ytimg.com/vi/kjnKbHvVmZU/mqdefault.jpg";
                $videos[12]['title']="宇宙よりも遠い場所「ここから、ここから」";

                $videos[13]['url']="http://app.it-ti.work/sabi-repeat.php?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D8szBN__ZSQ8&start=54.4%2C96%2C135.7&repeat-sec=30&title=%E5%AE%89%E5%AE%A4%E5%A5%88%E7%BE%8E%E6%81%B5+-%E3%80%8CHero%E3%80%8D&share=1";
                $videos[13]['image']="http://i.ytimg.com/vi/8szBN__ZSQ8/mqdefault.jpg";
                $videos[13]['title']="安室奈美恵 「Hero」";

                $videos[14]['url']="http://app.it-ti.work/sabi-repeat.php?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dw3FY2r1TLLM&start=65.5&repeat-sec=42&title=%E3%81%AB%E3%81%98%E3%81%84%E3%82%8D+-+%E7%B5%A2%E9%A6%99&share=1";
                $videos[14]['image']="http://i.ytimg.com/vi/w3FY2r1TLLM/mqdefault.jpg";
                $videos[14]['title']="にじいろ - 絢香";

                krsort($videos);


            ?>
            <div class="panel-body">
                <div class="row">
                    <?php foreach($videos as $video): ?>
                    <div class="panel-body col-lg-4 text-center">
                        <a href="<?php echo $video['url'] ?>" rel="noopener"><img src="<?php echo $video['image'] ?>" /><br /><?php echo $video['title'] ?></a>
                    </div>
                    <?php endforeach; ?>
                </div>

            </div>
          </div>

        </div>
    </div>
</div>


<!-- 共有ボタンクリック時に表示されるダイアログ -->
<div class="modal fade" id="share_box">
  <div class="modal-dialog">
      <div class="modal-content">


      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">リンクを共有</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
            <input class="form-control" id="link-text" value="<?php echo h($full_url); ?>">
        </div>
        <div class="form-group text-center">
            <ul class="nav nav-pills">
                <li class="list-group-item">
                    <a href="http://b.hatena.ne.jp/entry/<?php $url ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-normal" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
                </li>
                <li class="list-group-item">
                    <div class="fb-like" data-href="<?php echo $full_url ?>" data-layout="box_count" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
                </li>
                <li class="list-group-item">
                    <a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php echo $url ?>" data-text="<?php echo $title.' '.$full_url; ?>">Tweet</a>
                    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
                </li>
                <li class="list-group-item">
                    <div class="line-it-button" data-lang="ja" data-type="like" data-url="<?php echo $full_url ?>" data-share="true" style="display: none;"></div>
                     <script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
                </li>
            </ul>
        </div>
      </div>


    </div>
  </div>
</div>




<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<script>


    //--- 非同期でIFrame Player Apiコードを読み込み ---
    //scriptタグを生成
    var tag = document.createElement('script');

    //生成したscriptのソースを設定
    tag.src = "https://www.youtube.com/iframe_api";

    //先頭のscriptタグを取得
    var firstScriptTag = document.getElementsByTagName('script')[0];

    //先頭のscriptタグの前に生成したscriptタグを挿入
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


    //IFrameを作成します。上記APIコードの読み込みが完了後、呼び出される
    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            width:'100%',
            events: {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange
            }
        });
    }

    //上記で設定したプレーヤーの準備ができたときに実行される
    function onPlayerReady(event) {
        <?php if(isset($_GET['url'])): ?>
            var v=getQueries('v',$('#youtube-url').val());
            //「play」クエリパラメータが設定されているか判定
            <?php if(empty($_GET['play'])): ?>
                //動画を読み込み再生させない
                playVideo(false);
            <?php else: ?>
                //動画を読み込み再生させる
                playVideo(true);
            <?php endif; ?>
        <?php endif; ?>
    }



    var checkID=0; //setIntervalのタイマーID格納用
    var startPos=0; //開始位置配列のインデックス

    //プレーヤーの状態が変更される度に発生
    function onPlayerStateChange(event) {

        if (event.data == YT.PlayerState.PLAYING) {
            if (!$('#start').val()) return;
            var repeat_sec=$('#repeat-sec').val()*1000;

            //画面上で設定された秒数を配列に格納
            var start=$('#start').val();
            var secArr=start.split(',');


            //タイマー処理により再生中の動画を監視
            clearInterval(checkID);
            checkID=setInterval(function(){
                if(player.getPlayerState()==YT.PlayerState.PAUSED){
                    //動画が一時停止、または終了した場合、タイマー処理をクリア
                    clearInterval(checkID);
                    return;
                }

                if (secArr.length -1 > startPos){
                    startPos++;
                }else{
                    startPos=0;
                }
                player.seekTo(secArr[startPos]);


            }, repeat_sec);

        }
    }


    //動画の読み込み、再生
    function playVideo(play){
        clearInterval(checkID);
        startPos=0;

        $('#player').removeClass('hide');
        $('#start-set').prop('disabled',false);

        var videoID = getQueries('v',$('#youtube-url').val());

        var start = $('#start').val();
        var secArr=start.split(',');
        secArr.sort(function(a,b){return a - b;});
        var start=secArr[0];


        if (play){
            player.loadVideoById(videoID, start , "large");
        }else{
            player.cueVideoById(videoID, start, "large");
        }

    }


    //keyで指定したクエリパラメータ取得
    function getQueries(key,url){
        var query = {},
            queries = url.slice(url.indexOf('?') + 1).split('&'), //クエリパラメーターを&で区切り配列に格納
            i = 0;

        //パラメータ名を配列の添え字にし、各パラメータ値を配列に格納
        for(i; i < queries.length; i ++) {
            var t = queries[i].split("=");
            query[t[0]] = t[1];
        }

        //keyで指定されたクエリパラメータを返す
        return (query === null ? null : query[key] ? query[key] : null);

    }

    //入力チェック
    function doValidation(confirm){
        var v=getQueries('v',$('#youtube-url').val());
        if(!$('#youtube-url').val() || !v){
            alert('YoutubeのURLを正しく指定してください');
            return false;
        }

        if((!$('#start').val() && !confirm && $('.condition').is(':visible'))){
            alert('リピートする秒(開始位置)を正しく指定してください');
            return false;
        }

        return true;
    }


    $(function () {
        //bootstrapのツールチップ。「?」マーククリック用
        $('[data-toggle="tooltip"]').tooltip({
            container:'body'
        });

        //共有ボタンクリック用の処理。クエリパラメータにshare-btnが存在する場合、共有ボタンのダイアログを表示
        <?php if(isset($_GET['share-btn'])): ?>
            $('#share_box').modal('show');
        <?php endif; ?>

        //「ビデオ設定」クリック時にURL入力チェックを行い、ビデオを設定
        $('#video-set').on('click',function(e) {

            if (doValidation(1)){
                playVideo(false);
            }

        });

        //「秒取得」クリック時に現在の再生経過時間を設定する
        $('#start-set').on('click',function(e) {
            var current=player.getCurrentTime();
            if($('#start').val()){
                $('#start').val($('#start').val()+','+current.toFixed(1));
            }else{
                $('#start').val(current.toFixed(1));
            }

        });


        //「再生」クリック時に入力チェックを行い、動画を再生する
        $('#confirm').on('click',function(e) {

            if (doValidation(1)){
                playVideo(true);
            }

        });

        //「サビリピ再生」クリック時に入力チェックを行い、動画を再生する
        $('#play').on('click',function(e) {

            if (doValidation(0)){
                playVideo(true);
            }

        });


        //「submit時(シェアする)」クリック時に入力チェックを行う
        $('form').on('submit',function(){

            return doValidation();
        })

        //リンク用テキストボックスクリック時にURLを選択状態にする
        $("#link-text").click(function(){
            $(this).select();
        });

        //「停止」クリック時に動画を停止する
        $("#stop").click(function(){
            startPos=0
            player.stopVideo();
            clearInterval(checkID);
        });

        //「カスタマイズ」クリック時に設定項目を開閉する
        $('#customize').on('click',function(e) {
            if ($('.condition').is(':visible')){
                $('.condition').val()
                $('.condition').slideUp(); //下から上にスライドして閉じる
                $('.footer-btn').show();
            }else{
                $('.condition').slideDown();  //上から下にスライドして開く
                $('.footer-btn').hide();
            }
        });

        //「共有」クリック時に動画を停止する
        $("#share").click(function(){
            $('#share_box').modal('show');
        });


    })


</script>


</body>
</html>

 

ソース内容の解説

1.サビリピのHTMLヘッダー部について

2.Bootstrapグローバルナビゲーション(グローバルナビ Navbar):サビリピ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です