Text on YouTube - YouTube動画上にテキストを表示するjQueryプラグイン
Text on YouTubeは、字幕inやニコニコ動画のようにYouTubeの動画上にテキストを表示させるjQueryプラグインです。 現在ベータ版を公開しています。 YouTubeの字幕機能と違うのは、テキスト表示部分をJavaScriptで制御していることと、 YouTubeにアップロードされている動画なら誰のでも利用できるところです（動画自体を加工するわけではないからです）。 また、テキストの表示にjQueryのEffectsクラスを使用しているので、単純なshow/hideメソッドから、 animateメソッドまで幅広くエフェクトを利用できます。 ただし専用エディタがないので、字幕表示のためにはJavaScriptやJSON文法の理解がある程度必要になります。一方で、簡単なコードを書くだけで手軽にYouTube動画をページ内に埋め込める 仕様になっているので、動画を張りたいだけという人でもこのプラグインは十分役に立ちます。その他、プレイヤーコントロールがYouTubeのではなくjQuery UI仕立てのオリジナルであるため、 好きなテーマを選んでデザインをカスタマイズすることができます。
デモページ一覧
⇒アニメ・ワンピースの予告編を字幕に……
⇒jQuery以外のライブラリを併用するケース
⇒流れる字幕 アニメ・進撃の巨人の主題歌
⇒プログレスバー実装、JSONデータ読み込み、画質選択
⇒動画コメントを読み込んで画面に表示
ダウンロードページ
＜最新バージョン＞
JavaScript バージョン０.９.２／CSS バージョン０.６
jQueryプラグイン ⇒Text on YouTube.js（ベータ版ver 0.9.2 32KB）
CSSファイル ⇒Text on YouTube.css（ver 0.6 2KB）
＜旧バージョン＞
JavaScript バージョン０.９／CSS バージョン０.５
jQueryプラグイン ⇒Text on YouTube.js（ベータ版ver 0.9 30KB）
CSSファイル ⇒Text on YouTube.css（ver 0.5 2KB）
JavaScript バージョン０.８／CSS バージョン０.４
jQueryプラグイン ⇒Text on YouTube.js（ベータ版ver 0.8 30KB）
CSSファイル ⇒Text on YouTube.css（ver 0.4 2KB）
（このバージョンからコメント表示、自動・ループ再生機能が付きました）
JavaScript バージョン０.５／CSS バージョン０.３
jQueryプラグイン ⇒Text on YouTube.js（ベータ版ver 0.5 20KB）
CSSファイル ⇒Text on YouTube.css（ver 0.3 2KB）
JavaScript バージョン０.４／CSS バージョン０.２
jQueryプラグイン ⇒Text on YouTube.js（ベータ版ver 0.4 18KB）
CSSファイル ⇒Text on YouTube.css（ver 0.2 2KB）
まずは前準備
このプラグインはjQueryの最新バージョン1.4以上を必要とします。jQueryライブラリはこちらのページでダウンロードできますが、 ページにインクルードするライブラリすべてをGoogle Libraries APIから利用できるので、いろいろな手間を省く意味でもこちらの利用をお勧めします。 その他にプレイヤーコントロールのデザインのためjQuery UIと、objectタグ埋め込みのためSWFObjectというライブラリが必要です。
HEADタグ内の記述例（圧縮版）
また非圧縮版も用意されているのでデバッグなどの用途に
ライブラリに続けてText on YouTubeのJavaScriptファイルを書き込みます。
CSSファイルは好きなテーマのjQuery UIセットと、Text on YouTubeのCSSファイルをインクルードします。
jQuery UIのテーマ一式はこちらのページで手に入ります。最低限必要なコンポーネントは、
Core
Widget
Mouse
Button
Slider
Progressbar
の六つですが、すべてにチェックを入れてもCSSと画像のサイズはそれほど大きく変わらないので（CSSファイルは約35K）、フルオプションでダウンロードするのがオススメ。また、
Google Libraries APIからjQuery UIのスクリプトファイル（通常フルオプションで200K）を読み込むようにすれば、50K程度まで負荷を減らすことができます。
jQuery UIのファイルを解凍して開けると、CSSというフォルダが入っています。使用するのは、その中のテーマ名（ui-lightnessなど）のついたフォルダなので、
できればそのテーマ名のフォルダごとアップロードするのが手っとり早いでしょう。このなかでHEAD内に記述するのは上記のようにCSSファイルのみです（パスを間違えやすいので注意）。
デモページにテーマ切り替えボタンを設置したので、テーマ選択の参考にしてください。
動画の設置方法
このプラグインはYouTube動画の簡易設置をサポートしています。まずは、動画の設置方法を見ていきましょう。
YouTube動画にはそれぞれ固有のIDがあります。通常動画ページのURLは、
http://www.youtube.com/watch?v=動画ID
このように表されていて、URLからその動画固有のIDを調べることができます。この動画IDをプラグインを呼び出す際に引数として渡すことになります。
先にスクリプト部分を見ていくと、
DOMのロードが終了してからプラグインを呼び出すため、jQueryオブジェクトに渡された無名関数内に記述するという方法をとっています。 ここではショートカットの$を使用していません。これは後々、jQuery以外のライブラリを同一ページで使うことになった場合に備えるためです。 詳しくはこちらのページを見てください。 そして、プラグインの記述コードを見てみると、video_frameというクラス名の要素集合を取得して、プラグインのtextOnYoutubeメソッドを呼び出しているのがわかります。 メソッドのパラメーターは2Op3EBgik9sとなっていますが、これがYouTubeの動画IDにあたります。これがもっとも単純な記述方法です。 このメソッドが呼び出されると、クラス名がvideo_frameの要素集合の最初の要素に動画を埋め込みます。
動画を埋め込む箇所に記述するタグは次のようにシンプルです。クラス名にvideo_frameと入れるのを忘れないでください。 OBJECTタグやPARAMタグ、EMBEDタグなどは使いません。すべてスクリプト側でやってくれます。
もちろん複数の動画を一度に埋め込むこともできます。その場合、動画IDを配列に入れて渡します。
動画IDの配列とマッチした要素集合のインデックス番号は対応します。最初の動画IDは、要素集合の最初の要素に埋め込まれます。
同一ページ内の動画数が変わらないならば、こうした方法で十分なのですが、ブログの場合個別記事のページやカテゴリ別ページなどを見た時に、 ページ内の動画数が変動することがあります。そうすると、インデックス番号で対応させる従来の方法では動画が期待通りの場所に設置されないケースが出てきます。 そこで、動画IDと要素を厳密に結び付ける次のような指定方法を用意しています。オブジェクトのプロパティに動画と要素のIDを指定し配列に入れます。
elementIDプロパティに要素IDを、videoIDプロパティにそれぞれ対応する動画IDを入れる。
ID属性がv1の要素には動画IDが2Op3EBgik9sの動画が埋め込まれる。
この指定方法を使うとその他に動画のサイズを個別に設定することができます。width、heightプロパティにそれぞれ動画の横幅、縦幅を指定します。
その他、forceQualityプロパティを指定すると画質を個別に設定できます。値はhd720（720p）、large（480p）、medium（360p）、
small（240p）のいずれかを選択します。詳しくは下記のページをご覧ください。
バージョン0.8から、showCommentsプロパティを追加。このプロパティにtrueを設定するとコメント付きの動画につき、画面上でコメントを確認できるようになります。
その他、autoplay、loopプロパティを追加しました。autoplayにtrueを指定すると自動再生に。
loopプロパティにtrueを指定するとループ（繰り返し）再生になります。
YouTube JavaScript Player API リファレンス - 再生画質
グローバルオプションとして、すべての動画サイズを一律に設定することもできます。この場合、textOnYoutubeメソッドの第2引数にオプションとして指定します。なお、オプションでサイズを指定しない場合、
デフォルトで640*360のサイズに設定されます。
バージョン0.8から、グローバルオプションにautoplay、loopプロパティの指定ができるようになりました。
テキスト・字幕を入れる
Text on YouTubeは、CSSとJavaScriptを使って見かけ上動画にテキストが表示されているように見せるプラグインです。そのため、動画のサイズや画質、ユーザーのブラウザ環境などによっては
テキストが表示されなかったり、または表示が遅れたりする場合があります。ただし、画像サイズを小さくすることで、これらの問題が解消されることがあります。
字幕を表示するには、textOnYoutubeメソッドの第3引数に、オプションを指定していない場合は第2引数に字幕データを渡します。
データはハッシュ形式で、二つのプロパティからなります。videoIDプロパティに字幕を付ける動画IDを指定し、テキスト表示のタイミングやアニメーションなどの細かい設定は
timelineプロパティに指定します。
なお、字幕データがJSONファイルとしてサーバーに置いてあるならば、ハッシュの代わりにファイルのURL（文字列）を渡すこともできます。
JSONファイルをAjaxでロードする例
下の例では、textOnYoutubeメソッドの第1引数に動画IDを、オプションを省略して第2引数に字幕データを入れています。
これを見るとtimelineプロパティが配列になっているのが分かると思います。この配列には表示時間やテキスト内容などの字幕情報がハッシュ形式で入っています。
もし字幕情報が一つだけならば配列をはずしてオブジェクトを直接入れてもOKです。それでは、timelineプロパティの詳細を見ていきますが、まずtimeプロパティは
文字通りテキスト表示の開始時間を示します。単位は秒です（ミリ秒ではないので注意）。この例を見ると各要素が1.5、3.5、7……というように時系列に並んでいますが、
後からソートを行うので要素の順番は順不同でかまいません。次にtextプロパティにはテキスト内容を入れます。内部的にjQueryのhtmlメソッドを使って
テキストを要素に流し込むので、HTMLタグを含んだ内容でも反映されます。durationプロパティは、表示の持続時間を示し、timeプロパティで指定した時間を起点とします。
このプロパティを省略すると表示時間が1秒に設定されます。また、テキストにリンクを張りたいときは、anchorプロパティにURLを指定します。
cssプロパティではテキストのスタイルを指定します。こちらは内部的にjQueryのcssメソッドを使用するので、いくつかある指定方法のなかから選択できます。
cssメソッドについてはこちらのサイトが参考になると思います。⇒jQuery CSS APIリファレンス
effectsプロパティは字幕の表示方法を指定します。こちらはjQueryのEffects APIをそのまま内部で使用しているため、
従来のjQueryのエフェクトを使用する感覚で設定できます。単純に表示させたいだけならば"show"を指定するだけです。エフェクトにパラメーターをつけたいときは配列にして、
第1要素にエフェクト名（show/fadeInなど）を入れ、第2要素以降、そのエフェクトで指定したいパラメーターを要素に加えていきます。
Effects APIについてはこちらのサイトが参考になると思います。⇒jQuery Effects APIリファレンス
なお、文字サイズやテキスト位置の指定は、できるかぎりemか%を使うことをオススメします。このプラグインは動画の画面サイズに応じて、 ベースとなる文字サイズを決めていて、たとえば横幅320pxのときデフォルトの文字サイズが10pxに。横幅が2倍の640pxのとき、文字サイズも2倍の20pxになります。 そのため、スタイルをemか%で指定していれば、後から画面サイズを変えることになっても文字サイズが連動するため字幕の位置がほとんどずれなくなるわけです。 同様にleft、topプロパティによるテキスト位置指定もまた、%で指定することで画面サイズにかかわらず正しい位置で表示させることができます。 leftプロパティを"0%"とすると、画面右端が表示位置になり、"100%"に指定すると画面左端が基準になります（実際にそうするとテキストが見えなくなってしまいますが）。 topプロパティは"0%"で画面上端、"100%"で画面下端が表示位置になります。
字幕テストはWebサーバー上で
字幕情報の設定が終わったら、テキスト表示のタイミングや位置などが正しいかをチェックしましょう。しかし、ここで面倒なのがファイルをサーバー上に挙げていないと確認ができないという点です。 YouTube Player APIのページを見ると、 動画の呼び出しテストはローカル環境でできないと注意書きしてあります。このためエディタでスクリプトを修正するたびにサーバーへファイルをアップロードしなければなりません。 いずれは当サイトのページで字幕情報の設定ができるエディタを設けようと考えています。
細かいところで注意点。まず重複することはないと思いますが、このプラグインはYouTube Player APIの仕様上、次の4つのグローバル変数を使用しています。 onYouTubePlayerReady, onYoutubeQualityChange, youtubeStateObserver, youtubeErrorChecker
バージョン情報
2010/12/24 ver 0.1
ベータ版最初期のバージョン。不具合多し。なぜこの時期にリリースしたのか不明。
2010/12/26 ver 0.3
ver 0.1よりは安定しているバージョン。
2010/12/27 ver 0.4
画面をクリックすると動画レイヤーとテキストレイヤーが入れ替わる仕様に。要CSS ver 0.2。
2010/12/28 ver 0.5
動画の画質を指定できるように変更。個別の動画に設定できるが、グローバルオプションとして指定できない。
動画ID指定のオブジェクトにforceQualityプロパティを指定し、hd720、large、medium、smallのいずれかのパラメーターを渡す
字幕データとしてJSONファイルのURLを受け取れるように変更。
CSSファイルはCSS ver 0.3で外枠のtext-alignプロパティをleftに。アイコン位置がずれないよう修正。
2011/01/02 ver 0.8
自動再生とループ再生機能を実装。
個別の動画でもグローバルオプションとしても設定でき、autoplayプロパティ、loopプロパティをそれぞれtrueに指定する。
コメント付きの動画の場合、画面上にコメントを表示できるオプション（showComments）を追加。
IEのブラウザ判別に非推奨のjQuery.browserを使っていたので、!jQuery.support.opacityに変更。
ユーザー側から呼び出せる関数destroyYouTubeObject、getYouTubeProperty、setYouTubeProperty、getCurrentState、getRecentErrorを追加。
destroyYouTubeObjectはYouTubeオブジェクトの指定した動画オブジェクトを削除する。
getCurrentStateはプレイヤーの状況を、getRecentErrorは直近のエラーを返す。
getYouTubePropertyはYouTubeオブジェクトの各プロパティを取得する。第1引数に動画ID、第2引数にプロパティ名を入れる。
setYouTubePropertyはYouTubeオブジェクトの各プロパティを設定する。第1引数に動画ID、第2引数にプロパティ名、第3引数に値を入れる。
YouTubeオブジェクトのプロパティ（読み取り専用）のうち、videoReadyプロパティは動画が準備完了したらtrueを返す。
対応するCSSファイルはCSS ver 0.4。
2011/02/24 ver 0.9
動画サイズによってアイコン絵の位置がずれる不具合を修正。
対応するCSSファイルはCSS ver 0.5。
※このプラグインはまだ開発中のベータ版です。不具合等ありましたら、ブログコメントやメール等でお知らせください。
動作確認： Firefox3.6 Chrome7.0 IE8