youtube埋め込みタグに再生停止位置と自動再生を追加するツールを作る

先日youtube埋め込みタグに再生停止位置と自動再生を追加するツールを作りました。

Youtube埋め込みタグの再生停止位置と自動再生の設定ツール

Youtubeの共有設定の埋め込みタグは開始位置を設定出来るようになっています。でも停止位置は設定出来ません。自動再生をオンにしておく事も出来ません。そこで停止位置と自動再生を設定出来るサービスを作ってみました。 Youtub...

今回はこのツールの作り方を解説します。

目次（見たい所へGO！）

やりたいこと
1. youtube動画の1部分だけを紹介したい
2. 自動再生させたい
自分でツールを作っちゃえ
どんな関数が必要？
PHPスクリプト全文
解説
フォーム部分のHTMLファイル
あとがき

やりたいこと

youtube動画に対してこんな事出来たらいいのにな〜と思う事があります。

youtube動画の1部分だけを紹介したい

point再生開始位置と停止位置を設定してyoutube動画の1部分だけを紹介したい

youtube動画の1部分だけを紹介したいってことありますよね。
動画の途中の2分間だけでいいんだけどな〜っていうとき。

開始位置はyoutube埋め込みタグを取得するときに設定出来るのでそれを使えば動画の頭から見なくても紹介したい部分から再生スタートさせる事は出来ます。

ただし停止位置の設定は出来ないので自分で止めてもらわなくちゃいけないわけ。
見せたい部分が終わったら自動で停止して欲しい。

停止してくれれば、これが見せたかったんだという事が伝わりやすくなりますよね。

自動再生させたい

point貼り付けたyoutube動画が自動で再生するようにしたい

自分のブログなどにyoutube動画を埋め込んでおいて誰かが見に来てくれたら自動で再生されるようにしたいときもあるでしょ。

この設定もyoutube埋め込みタグ取得時には出来ないんですよ。

いちいち再生ボタンを押してもらわなくちゃいかんのです。

注意Youtube動画を自動再生にしているとそのページを開いたタイミングで再生が始まります。
ページの下の方に設置した場合はユーザーがそこに行く前に再生が終わっていることもあります。
確実に見せたいならページの一番上に置く事をお勧めします。

自分でツールを作っちゃえ

そんじゃ自分でツールを作っちゃえ！

簡単に言うなよ〜。しばらくプログラミングしてないから探しものをたくさんしながら作るしかない、時間かかりそう。

ま〜、しょうがない、やりますか。

PHPで作りますよ。

仕様はどうする？

今回やりたいのはyoutube埋め込みタグのパラメータをいじって停止位置設定と自動再生をオンにするって事。

●youtube埋め込みタグを取得してきて貼り付ける部分
●停止位置を設定出来る部分
●自動再生をオンにする部分

これらが必要ですね。

youtube埋め込みタグを貼り付けて停止位置、自動再生を設定して「設定」ボタンを押したら処理済みのyoutube埋め込みタグが出来ている。
こういう仕様ですな。

youtube埋め込みタグのパラメータ

停止位置

停止位置のパラメータは[end]
end=270
こういう風に秒数で設定します。
4分30秒だったら270秒。

自動再生

自動再生のパラメータは[autoplay]
autoplay=1
これで自動再生オンです。

これらのパラメータをyoutube埋め込みタグ内のurlにクエリとしてくっつけます。

開始位置を設定したyoutube埋め込みタグurl部分を見てみると

src="https://www.youtube.com/embed/qS1BNhqLeAs?start=62"

こんな感じで末尾に[?start=62]って開始位置のパラメータが付いている。
この後ろにくっつければいいんだね。

src="https://www.youtube.com/embed/qS1BNhqLeAs?start=62&end=120&autoplay=1”

こういう風に編集したい。

処理手順

●youtube埋め込みタグの中のurl部分を取り出す。

●urlクエリの末尾に停止位置と自動再生のパラメータを追加する。

おおまかな処理はこれだけ。

どんな関数が必要？

処理を実行していくのにどんなphp関数が必要になるのかみていきましょう。

文字列を区切って配列にする

youtube埋め込みタグは

<iframe src="https://www.youtube.com/embed/qS1BNhqLeAs?start=58" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

こんな感じ。
これを空白で区切って配列にする。

explode()関数を使います。

explode(第一引数,第二引数、第三引数)

第一引数	区切り文字（例としてスペース（空白）やカンマなど）
第二引数	処理対象の文字列
第三引数	省略出来る。今回使わないので省略。
返り値	処理対象を区切り文字で分割した文字列の配列を返します。

で区切り文字を空白[” “]でyoutube埋め込みタグをexplode処理すると

<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/qS1BNhqLeAs?start=58"
frameborder="0"
（以下省略）

こんな感じで分割されて配列にします。

指定した文字列が含まれている配列の要素を検索

youtube埋め込みタグを分割した配列の要素の中から必要なものを取り出す。

今回必要なものはurlの部分。

src="https://www.youtube.com/embed/qS1BNhqLeAs?start=58"

これです。

[src]が入っているのはこの要素だけ。
つまり[src]という文字列を含んだ要素を検索して取り出す。

strpos( 第一引数,第二引数)を使います。

第一引数	処理する文字列
第二引数	検索する文字列

戻り値は該当する文字列が見つかった位置を数値で返す。見つからなかったらfalseを返す。
strpos(‘abcd’,’ab’)とすると0を返す。
strpos(‘abcd’,’bc’)とすると1を返す。

これを使って[src]という文字列を含んだ要素を検索して取り出します。

再生停止位置と自動再生のパラメータを追加する

[src]という文字列を含んだ要素（文字列）に再生停止位置と自動再生のパラメータ（文字列）を追加していきます。

例）
再生停止位置　end=130(2分10秒で停止）
自動再生オン　autoplay=1

これを【&】を使って連結します。

&end=130&autoplay=1

連結したものを

src="https://www.youtube.com/embed/qS1BNhqLeAs?start=58" 
（取り出した要素[文字列]）

これの末尾の【”】の前に挿入します。

 src="https://www.youtube.com/embed/qS1BNhqLeAs?start=58&amp;end=130&amp;autoplay=1”

こんな感じですね。

substr_replace(第一引数、第二引数、第三引数、第四引数)

この関数を使って挿入します。

第一引数	処理する文字列
第二引数	挿入する文字列
第三引数	挿入する場所
第四引数	今回使わないので省略

分割して配列にしたものを連結して元にもどす

パラメータ編集が出来たら分割して配列にしたものを連結して元にもどせば完成です。

それを出力してパラメータ編集されたyoutube埋め込みタグとして表示させる。

ユーザーにそれをコピーしてもらってブログなどに貼り付けもらえば再生停止位置と自動再生オンが設定されている動画が再生されます。

分割して配列にしたものを連結して元にもどすには

implode()この関数を使います。

implode(第一引数、第二引数)

第一引数	区切り文字
第二引数	処理する文字列

$array = [‘メロン, ‘りんご’, ‘オレンジ’];
この配列を区切り文字【/】で処理する。
implode(‘/’、$array)
結果は”メロン/りんご/オレンジ”
こういう文字列になります。

この関数を使って

<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/qS1BNhqLeAs?start=58&end=130&autoplay=1"
frameborder="0"
（以下省略）

このように分割した埋め込みタグを連結して元どおりにしてやります。
区切り文字は【】（空白）です。

完成形は

<iframe src="https://www.youtube.com/embed/qS1BNhqLeAs?start=58&end=130&autoplay=1" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

こうなりますよ。

処理手順の説明はここまでです。
次は実際にスクリプトを組んでいきましょう

PHPスクリプト全文

まずスクリプト全文を見てください。
結構短くまとめました。

<?php 
$clean = array(); 

if( !empty($_POST) ) { 
     foreach( $_POST as $key => $value ) { 
       $clean[$key] = htmlentities($value, ENT_QUOTES, 'UTF-8'); 
       $clean[$key]=stripslashes($clean[$key]);
     } 
     $array = explode(" ", $clean[youtube_tag]);
     $error=""; 
     $stop=(int)$clean[end];
     if(is_int($stop) && $stop!==0){ 
         $error="";
      }else{ 
         $error="1"; 
      } 
 
　　　$end="&end=".$clean[end];
　　　$double_q='&quot;';
　　　$str="";

　　 if(!empty($clean['autoplay']) && $clean['autoplay'] === "on" ){ 
       $end=$end."&autoplay=1&mute=1";
    } 

　　　foreach($array as &$value){
       $position = strpos($value,"src");
       if ($position!== false) { 
         $value=substr_replace($value,$end, strlen($value)-strlen($double_q), 0); 
       } 
　　　} 
　　　unset($value);
　　　$str=implode(" ", $array); 
}
$page_flag = 0;
if( !empty($_POST['btn_confirm']) ) {
　　 $page_flag = 1; 
} 
?>

解説

それではスクリプトの頭からひとつづつ解説していきます。

$clean = array(); //youtube埋め込みタグを分割して格納するための配列を定義。

if( !empty($_POST) ) { //postされた情報の処理をスタート

if( !empty($_POST) )
スクリプトのほとんどがこのif文（条件式）の中に書かれています。

foreach( $_POST as $key => $value ) { 
//htmlentities()でサニタイズ 
$clean[$key] = htmlentities($value, ENT_QUOTES, 'UTF-8'); 
//マジッククォートのバックスラッシュを削除。 
$clean[$key]=stripslashes($clean[$key]);
}

postの中身のkeyと値（サニタイズする）を「配列$clean」に入れていきます。

「マジッククォートのバックスラッシュを削除」はwordpress特有の処理、「postされた文字列中のダブルクォーテーションなどがエスケープされる」、これを回避（元に戻す）ための対策。

wordpressでPOSTした文字列のダブルクォーテーションがエスケープされる問題

フォームに入力された文字列を操作して出力させるスクリプトを作っていたときにwordpressだけで起きる問題について書いていきます。作ったスクリプトを普通にサーバーにアップすると問題なく動作していたものが、wordpress...

//youtube埋め込みタグを空白で分割して配列にしておく。
$array = explode(" ", $clean[youtube_tag]);

youtube埋め込みタグの中のurl部分だけを取り出すために配列にしておく。

//入力された停止位置が整数なのをチェック
$error="";//エラー表示用のフラグ。
//入力された文字列を整数にキャスト。
$stop=(int)$clean[end];
//数の文字ではない場合0を返す。例）abc→0を返す
if(is_int($stop) && $stop!==0){//ゼロが返されたらエラーフラグを立てる。
　　$error="";
}else{ 
　　$error="1";
}

入力された停止位置が整数ではなかったらエラー表示を出すためのスクリプト。

$end="&end=".$clean[end]; //停止位置
$double_q='&quot;';//ダブルクォーテーションのHTML特殊文字

停止位置のパラメータ文字列を用意しておく。

ダブルクォーテーションのHTML特殊文字に関しては後で解説します。

//----自動再生をチェック
if(!empty($clean['autoplay']) && $clean['autoplay'] === "on" ){
$end=$end."&autoplay=1&mute=1";
//自動再生用のパラメータを足す。mute=1は消音、これがないと再生しないブラウザがあるため。
}

自動再生を「する、しない」を判断して必要なら停止位置の後に自動再生用のパラメータを足す。

自動再生をするなら消音設定もしないといけない。

ほとんどのブラウザではいきなり音が鳴るのを嫌って消音にしておかないと自動再生が出来ないからです。

/*----分割したyoutubeタグからsrcという文字列が含まれる配列要素を検索して
「停止位置」と必要によっては「自動再生設定」を付け足す。 */
foreach($array as &$value){
//【&】をつけて参照渡しにして配列の要素を変更する。
　　$position = strpos($value,"src");
　　//srcという文字列が含まれる配列要素を検索。あれば文字が現れる位置を返す。
　　if ($position!== false) {
　　　　/*末尾のダブルクォーテーションの前に停止位置を付け足す*/
　　　　$value=substr_replace($value,$end, strlen($value)-strlen($double_q), 0);
　　}
}
unset($value);
//「参照渡し」をした後はこれをしないと配列の要素がおかしくなる。

分割したyoutubeタグの配列の中からurl部分だけを取り出します。

strpos()関数

ある文字列の中に指定した文字列があればtrueを返す。

url部分には「src」という文字列が含まれているからそれを探す。

みつかったら末尾のダブルクォーテーションの前に「停止位置と必要なら自動再生のパラメータ」を付け足します。

末尾を判断するのにstrlen()で文字列の長さを取得して（文字列の長さ-1）とすれば末尾の1個手前の位置が認識出来る。

しかし今回の末尾【”】ダブルクォーテーションはHTML特殊文字（"）5文字にクォートされている。

それで末尾からダブルクォーテーションHTML特殊文字分だけ遡って位置を割り出す。

その位置にsubstr_replace()でパラメータ文字列を付け足します。

//分割したyoutubeのタグを元通りに連結。
$str=implode(" ", $array);

配列の一部を書き換えた（パラメータ文字列を付け足し）あと最後に分割したyoutubeのタグを元通りに連結します。

ユーザー用にHTMLの方で$strを処理済みyoutube埋め込みタグとして表示します。

}//if( !empty($_POST) )を閉じる。
$page_flag = 0;//変数の初期化。処理前、処理後でフォームの表示を変えるためのフラグ。
if( !empty($_POST['btn_confirm']) ) {
$page_flag = 1;
}

if( !empty($_POST) )の条件式を閉じて、処理前、処理後のフォームの表示を変えるフラグの設定して終わります。

フォーム部分のHTMLファイル

ユーザーに入力をしてもらう表側のHTMLファイルです。

中身だけを書いてます。外側を覆うものは適当に作ってください。

<?php if( $page_flag === 1 ): ?>
<!--ボタンが押された場合に表示する部分-->
<h2 class="youtube-tool">処理済みタグ生成しました</h2>
<form method="post" action="">
<div class="element_wrap">
<label>Youtube<br />埋め込みタグ</label> <?php
if( !empty($clean['youtube_tag']) ){
<!--なにも入力されていなかったらエラー表示を出す。-->
echo "<p>".$str."</p>"; }else{echo "<p class='error'>エラー：youtube埋め込みタグを入れてください。<p>";}
?>
</div>
<!---->
<?php if( !empty($error) ): ?>
<!--なにも入力されていない、もしくは数字以外が入力されていたらエラー表示を出す。-->
<div class="element_wrap">
<label>停止位置</label><p class="error">エラー：1以上の整数を入れてください。</p>
</div><?php endif; ?>
<input class="yt-btn" type="submit" name="btn_back" value="戻る">
</form>
<?php else: ?>
<!--ボタンが押される前、もしくは「戻る」ボタンが押された場合に表示-->
<h2 class="youtube-tool">Youtube再生停止箇所、自動再生を設定</h2>
<form method="post" action="">
<div class="element_wrap">
<label>Youtube<br />埋め込みタグ</label>
<input type="text" name="youtube_tag" value="<?php if( !empty($_POST['youtube_tag']) ){ echo $_POST['youtube_tag']; } ?>">
</div>
<div class="element_wrap">
<label>再生停止位置</label>
<input type="text" name="end" value="<?php if( !empty($_POST['end']) ){ echo $_POST['end']; }
?>">
</div>
<div class="element_wrap">
<label>自動再生ON</label>
<input type="radio" name="autoplay" value="on" <?php if( !empty($clean['autoplay']) && $clean['autoplay'] === "on" ){ echo 'checked'; } ?>>する</label>
<input type="radio" name="autoplay" value="off" <?php if( !empty($clean['autoplay']) && $clean['autoplay'] === "off" ){ echo 'checked'; } ?>>しない</label>
</div>
<input class="yt-btn" type="submit" name="btn_confirm" value="設定">
</form>
<?php endif; ?>

参考のためCSSファイルも載せておきます。

<style>
h2 { color: #209eff;
margin-bottom: 20px;
padding: 20px 0;
font-size: 122%;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
}
input[type=text] {
padding: 5px 10px;
font-size: 86%;
border: none;
border-radius: 3px;
background: #ddf0ff;
}
input[name=youtube_tag]{
width:75%;
}
input[name=start],input[name=end]{
width:100px;
}
input[name=btn_confirm],input[name=btn_back] {
width:90px;
margin-top: 10px;
padding: 5px 20px;
font-size: 100%;
color: #fff;
cursor: pointer;
border: none;
border-radius: 3px;
box-shadow: 0 3px 0 #2887d1;
background: #4eaaf1;}
input[name=btn_back] {
margin-right: 20px;
box-shadow: 0 3px 0 #777;
background: #999;}
.element_wrap {
margin-bottom: 10px;
padding: 10px 0;
border-bottom: 1px solid #ccc;
text-align: left;
}
label {
display: inline-block;
margin-bottom: 10px;
font-weight: bold; width: 150px;
}
.element_wrap p {
display: inline-block;
margin: 0;
text-align: left;
}
.error{color:red;}

</style>