YouTube動画の22のパラメータまとめ+αと埋め込みコードの実例
ここでは、YouTube動画の埋め込みプレーヤーの見た目や機能をカスタマイズするための
「パラメータ」という機能の使い方についてお話します。
また、YouTubeの埋め込み動画プレーヤーをつかうときに前提となる、<iframe>タグや、<object>タグ、HTML5形式の動画プレーヤー、Flash形式の動画プレーヤー、クロムレスプレーヤーなどの情報についてもお話します。
さらに、JavaScriptやActionScriptをつかって動画プレーヤーを自由に制御することができるAPIについてもお話します。
「パラメータ」をつかうと、どんなことができるの?
まず、「パラメータ」をつかってどんなことができるのかを知るために、下の実例を見てください。
実例1: 自動的に再生をはじめ、操作は一時停止しかできない
下の動画は、「パラメータ」をつかってつぎのような設定にしています。
- 自動的に再生をはじめる。
- コントロールバーを非表示にする。
- プログレスバー(シークバー)を非表示にする。
- タイトルバーを非表示にする。
この動画の埋め込みコード
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
実例2: 高画質で再生させ、コントロールバーを自動的に隠す
下の動画は、「パラメータ」をつかってつぎのような設定にしています。
- HDの高画質(1080p)で再生させる。
- コントロールバーを自動的に隠す。
- タイトルバーを非表示にする。
- 全画面表示ボタンを非表示にする。
この動画の埋め込みコード
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
実例3: 複数の動画を連続して再生させ、それを繰り返す
下の動画は、「パラメータ」をつかってつぎのような設定にしています。
- 複数の動画を連続して再生させる。
- すべての動画の再生が終わったら、また最初の動画にもどってそれを繰り返す。
- 画面の下に動画のリストを表示させる。
この動画の埋め込みコード
<param name="movie" value="https://www.youtube.com/v/8Ayz1oxy6pY?hl=ja_JP&playlist=-mkXkHeqLEs,OW37a07RMTs&version=3&showinfo=1&loop=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/8Ayz1oxy6pY?hl=ja_JP&playlist=-mkXkHeqLEs,OW37a07RMTs&version=3&showinfo=1&loop=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
実例4: 一部分だけを再生する
下の動画は、「パラメータ」をつかってつぎのような設定にしています。
- 動画全体のなかの一部分(00:03~00:11)だけを再生する。
- コントロールバーを常に表示させる。
- プログレスバー(シークバー)を常に表示させる。
この動画の埋め込みコード
<param name="movie" value="https://www.youtube.com/v/-mkXkHeqLEs?hl=ja_JP&version=3&start=3&end=11&controls=1&autohide=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/-mkXkHeqLEs?hl=ja_JP&version=3&start=3&end=11&controls=1&autohide=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
これ以降では、まず、YouTubeの埋め込み動画プレーヤーをつかううえでの基本となる、<iframe>タグや、<object>タグ、HTML5形式の動画プレーヤー、Flash形式の動画プレーヤー、クロムレスプレーヤーなどの情報についてお話します。
各種の「パラメータ」についての説明は、それらの基本情報のあとに掲載しています。
もし、「すぐにパラメータの情報が知りたい」という場合や、「基本はすでに知っているという場合」には、それらの基本情報の話を飛ばして、「パラメータ」について話しているところから見ていってください。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
- 「パラメータ」をつかうと、どんなことができるの?
- 埋め込み動画プレーヤーの2つの種類 - 埋め込みプレーヤー(標準)とクロムレスプレーヤー
- 埋め込みコードのHTMLタグの2つの種類 - <iframe>タグと<object>タグ
- 「パラメータ」
- 再生後に表示される「関連動画」を非表示にする - 「rel」(リレイテッドビデオ)
- コントロールバーのYouTubeロゴを非表示にする - 「modestbranding」(モデストブランディング)
- 自動的に再生を始める - 「autoplay」(オートプレイ)
- 繰り返し再生させる - 「loop」(ループ)
- コントロールバーを非表示にする/表示する - 「controls」(コントロールズ)
- コントロールバーとプログレスバー(シークバー)を隠す/常に表示させる - 「autohide」(オートハイド)
- 全画面表示ボタンを非表示にする - 「fs」(フルスクリーン)
- タイトルバーを非表示にする - 「showinfo」(ショウインフォ)
- 最初から高画質/低画質で再生する - 「vq」(ビデオクオリティー)
- 再生を開始する位置を指定する – 「start」(スタート)
- 再生を終了する位置を指定する – 「end」(エンド)
- 「再生リスト」、公開動画リスト、動画検索結果リストを動画プレーヤーとして埋め込む - 「listType」(リストタイプ)&「list」(リスト)
- 複数の動画から「再生リスト」をつくって動画プレーヤーとして埋め込む - 「playlist」(プレイリスト)
- コントロールバーとプログレスバー(シークバー)の色を変える - 「theme」(テーマ)&「color」(カラー)
- 「アノテーション」を非表示にする/表示する – 「iv_load_policy」(ivロードポリシー)
- キーボードからの操作を無効にする – 「disablekb」(ディスエイブルキーボード)
- 字幕を表示させる – 「cc_load_policy」(クローズドキャプションポリシー)
- 「JavaScriptプレーヤーAPI」関連のパラメータ – 「enablejsapi」(イネイブル JS API)&「playerapiid」(プレーヤーAPI ID)&「origin」(オリジン)
- (参考)全画面表示ができないようにする - 「allowfullscreen」(アラウフルスクリーン)
- (参考)周囲に枠線をつける - 「frameborder」(フレームボーダー)
- (参考)非推奨(廃止予定)のパラメータ(「Flash(AS2)プレーヤーAPI」限定)
- 動画プレーヤーを制御するための3つのAPI
- 参考サイト、YouTube公式ヘルプページ
- おもしろい組み合わせ方を思いついたら、ぜひ教えてください
埋め込み動画プレーヤーの2つの種類 - 埋め込みプレーヤー(標準)とクロムレスプレーヤー
YouTube動画の埋め込みプレーヤーには、つぎの2つの種類があります。
- 埋め込みプレーヤー(標準)
- クロムレスプレーヤー
埋め込みプレーヤー(標準)
YouTubeの埋め込み動画プレーヤーでは、YouTubeの動画ページから埋め込みコードを取得することができる埋め込みプレーヤー(エンベッデッドプレーヤー(embedded player))が標準になっています。
ですので、ほとんどの場合、標準となっている普通の埋め込みプレーヤーを利用することになります。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
クロムレスプレーヤー(chromeless player)
クロムレスプレーヤー(chromeless player)というのは、動画を操作するための視覚的要素がなにもついていない動画プレーヤーのことです。
「クロム」(chrome)というのは、動画プレーヤーやウェブブラウザなどを操作するために付いているボタンやスライダーなどの視覚的なインターフェース要素のことです。
そして、「クロムレス」(chromeless)というのは、こうした「クロム」(「操作のための要素」)を取り払った状態を意味する言葉です。
(ちなみに、「クロムレスプレーヤー」という言葉は、YouTube以外のところでも「動画を操作するための視覚的要素がなにもついていない動画プレーヤー」を意味する言葉として一般的につかわれる言葉であり、YouTubeに固有の言葉ではありません。)
YouTubeのクロムレスプレーヤーは、ボタンやスライダーなどの「操作のための視覚的要素」が表示されない埋め込み動画プレーヤーのことです。
クロムレスプレーヤーは、JavaScript(「JavaScriptプレーヤーAPI」)や、ActionScript(「Flash(AS3)プレーヤーPAI」)をつかって、HTMLページや、Flashアプリケーションのなかでカスタマイズしてつかうことができます。
下のクロムレスプレーヤーの実例では、ボタンやスライダーが表示されないと同時に、画面をクリックしても動画を一時停止にすることができなくなっています。
また、クロムレスプレーヤーの画面の右下には、YouTubeのロゴのウォーターマークがリンクとして表示されます。このYouTubeロゴをクリックすると、その動画のYouTubeページに移動します。(ちなみに、「modestbranding」のパラメータの値を「1」にしても、このYouTubeロゴのウォーターマークにはなんの変化もありませんでした。)
<param name="allowScriptAccess" value="always">
</object>
<param name="allowScriptAccess" value="always">
</object>
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
埋め込みコードのHTMLタグの2つの種類 - <iframe>タグと<object>タグ
YouTubeの動画プレーヤーの埋め込みコードのタグには、つぎの2つの種類があります。
- <iframe>タグ(HTML5形式 & Flash形式)
- <object>タグ(Flash形式)
<iframe>タグは、HTML5形式とFlash形式の2種類の動画プレーヤーを表示させることができます。
<object>タグは、Flash形式の動画プレーヤーしか表示させることができません。
YouTubeが推奨しているのは、<iframe>タグの埋め込みコードをつかって、HTML5形式の動画プレーヤーを表示させることです。
その理由は、HTML5形式の動画プレーヤーを利用すると、視聴者の閲覧環境(パソコンやスマートフォンなど)に合わせて適切な設定が自動的に選択されるというメリットや、YouTubeのファイル形式も利用できるというメリットがあるからです。
なお、HTML5形式の動画プレーヤーを利用している場合は、視聴者の閲覧環境(ウェブブラウザ)がHTML5を利用できる環境であればHTML5形式の動画プレーヤーを表示させ、そうでない場合は、代わりにFlash形式の動画プレーヤーを表示させるようになっています。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
HTML5形式の埋め込み動画プレーヤー
HTML5形式の埋め込み動画プレーヤーでは、埋め込みコードの<iframe>タグの「src」の値として指定する「YouTube動画のURL」の形式は、「 http://www.youtube.com/embed/動画ID」という形式になります。
ちなみに、「src」は、「源」や「起源」という意味の「source」(ソース)の略です。
YouTube動画の「動画ID」というのは、YouTube動画の個別視聴ベージのURLのなかの「v=***********」という部分の「***********」の英数字のことです。
下の例でいうと、「DA6x6DpEREA」という部分が、「動画ID」です。
YouTube動画の個別視聴ベージのURLの例
http://www.youtube.com/watch?v=DA6x6DpEREA&feature=player_embedded
HTML5形式の埋め込み動画プレーヤーのURLの実例
「 http://www.youtube.com/embed/動画ID 」
http://www.youtube.com/embed/DA6x6DpEREA
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
Flash形式の埋め込み動画プレーヤー - 「Flash(AS3)プレーヤー」
YouTubeのFlash形式の動画プレーヤーは、「Flash(AS3)プレーヤー」と呼ばれます。
「AS3」というのは、Flashを操作するためにつかわれるプログラミング言語「ActionScript」(アクションスクリプト)のバージョン3.0の略です。
(同様に、「AS2」というものもあります。こちらは、旧式の「ActionScript バージョン2.0」の略です。「AS2」形式の埋め込み動画プレーヤーは、YouTubeでは非推奨(廃止予定)になっています。)
「Flash(AS3)プレーヤー」では、埋め込みコードのなかの「src」の値として指定する「YouTube動画のURL」の形式は、「 http://www.youtube.com/v/動画ID?hl=ja_JP&version=3 」という形式になります。
「version=3」の部分で、「AS3」(「ActionScript バージョン3.0」)を利用するということを指定しています。
「hl=ja_JP」という部分では、動画プレーヤーでつかわれる言語を指定しています。「hl」(言語設定)の値は、「ja_JP」(日本語)にします。
Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)のURLの実例
「 http://www.youtube.com/v/動画ID?hl=ja_JP&version=3 」
http://www.youtube.com/v/DA6x6DpEREA?hl=ja_JP&version=3
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
<iframe>タグ(HTML5形式 & Flash形式)
<iframe>タグは、HTML5形式の動画プレーヤーと、Flash形式の動画プレーヤーの、2種類の動画プレーヤーを表示させることができます。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
<iframe>タグ(HTML5形式の動画プレーヤーの場合)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
<iframe>タグ(Flash形式の動画プレーヤー(「Flash(AS3)プレーヤー」)の場合)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
<object>タグ(Flash形式の動画プレーヤー(「Flash(AS3)プレーヤー」))
<param name="movie" value="http://www.youtube.com/v/動画ID?hl=ja_JP&version=3"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/動画ID?hl=ja_JP&version=3" type="application/x-shockwave-flash" width="横幅" height="縦幅" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
<param name="movie" value="http://www.youtube.com/v/DA6x6DpEREA?hl=ja_JP&version=3"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/DA6x6DpEREA?hl=ja_JP&version=3" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「パラメータ」
YouTubeの動画プレーヤーは、埋め込みコードのなかの「src」の項目の値として指定する「動画のURL」の後ろに、「パラメータ」と呼ばれる文字列をつけることができます。
この「パラメータ」をつけることで、埋め込んだ動画プレーヤーの見た目や機能をカスタマイズすることができます。
表示させるYouTube動画のURLを指定する「src」の項目に設定する値(「動画のURL」)の文字列の最後に「?」をつけて、そのうしろに設定したい機能の「パラメータ」をつけます。
「src」は、「源」や「起源」という意味の「source」(ソース)の略です。
「パラメータ」は複数設定することができます。複数設定するときは、「パラメータ」と「パラメータ」のあいだに「&」(「アンド」マーク(アンパサンド))を入れます。複数の「パラメータ」を並べる順番は、どんな順番でもかまいせん。
なお、「パラメータ」の機能を利用するためには、埋め込む動画プレーヤーの縦横のサイズを、最低でも縦200ピクセル×横200ピクセル以上にする必要があります。
下記は、複数の「パラメータ」をつけたときの埋め込みコードの実例です。
テンプレート
テンプレートに実際の値を入れた実例
上記の埋め込みコードをつかって表示させた動画プレーヤー
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
再生後に表示される「関連動画」を非表示にする - 「rel」(リレイテッドビデオ)
「rel」: 「Related Videos」(「リレイテッドビデオ」(「関連動画」という意味))
「rel」のパラメータを設定することによって、動画の再生が終わったあとに表示される「関連動画」の表示/非表示を指定することができます。
「rel」の値を「0」にすると、「関連動画」を非表示にすることができます。
対象となる動画プレーヤーのタイプ: AS3, AS2, HTML5
設定できる値: 0, 1(初期値は「1」)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「rel=0」(「関連動画」を非表示にする)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「rel=1」(「関連動画」を表示する)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
コントロールバーのYouTubeロゴを非表示にする - 「modestbranding」(モデストブランディング)
「modestbranding」: 「Modest Branding」(「モデストブランディング」(「控えめなブランドアピール」というような意味です。))
「modestbranding」のパラメータを設定することによって、コントロールバーの右端のYouTubeのロゴの表示/非表示を指定することができます。
「modestbranding」の値を「1」にすると、コントロールバーの右端のYouTubeのロゴが表示されなくなります。
その代わり、動画を再生する前や、動画の再生中にマウスを画面の上に移動させた時、動画を一時停止した時に、動画の右上の角に小さな文字で「YouTube」という文字が表示されます。
対象となる動画プレーヤーのタイプ: AS3, HTML5
設定できる値: 0, 1(初期値は「0」)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「modestbranding=1」(コントロールバーのYouTubeロゴを非表示にする)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「modestbranding=0」(コントロールバーのYouTubeロゴを表示する)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
自動的に再生を始める - 「autoplay」(オートプレイ)
「autoplay」: 「Auto Play」(「オートプレイ」(「自動的に再生する」という意味))
「autoplay」の値を「1」にすることで、ウェブページが表示されると同時に、自動的に動画を再生させることができます。
対象となる動画プレーヤーのタイプ: AS3, AS2, HTML5
設定できる値: 0, 1(初期値は「0」)
(下の動画は、音声無しの動画にしています。これは、この動画は自動的に再生されるように設定しているため、このページを読み込んだときに自動的に音が出ると不都合なことがあるかもしれないということを考慮してのことです。)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
繰り返し再生させる - 「loop」(ループ)
「loop」: 「ループ」(「一巡して元にもどる」という意味)
「loop」の値を「1」にすると、その動画を繰り返し再生させることができます。
対象となる動画プレーヤーのタイプ: AS3, HTML5
設定できる値: 0, 1(初期値は「0」)
「再生リスト」(プレイリスト)の埋め込み動画プレーヤーの場合は、「loop」の値を「1」にすると、その「再生リスト」に含まれているすべての動画の再生が終わったあと、また最初の動画にもどって再生が始まるといったぐあいに、「再生リスト」全体が繰り返し再生されることになります。
(「再生リスト」というのは、任意のYouTube動画を集めたリストをつくることができるという、YouTubeの機能のひとつです。「再生リスト」は、「プレイリスト」(playlist)と呼ばれることもあります。)
通常の動画プレーヤーで「loop」をつかう場合
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「再生リスト」の動画プレーヤーで「loop」をつかう場合
「再生リスト」(プレイリスト)の動画プレーヤーには、つぎの2種類があります。
- Flash形式(<object>タグ)の「再生リスト」の動画プレーヤー
- HTML5形式(<iframe>タグ)の「再生リスト」の動画プレーヤー
Flash形式(<object>タグ)の「再生リスト」の動画プレーヤーで「loop」をつかう場合
<param name="movie" value="https://www.youtube.com/v/動画ID?hl=ja_JP&version=3&loop=1&playlist=動画ID"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/動画ID?hl=ja_JP&version=3&loop=1&playlist=動画ID" type="application/x-shockwave-flash" width="横幅" height="縦幅" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
<param name="movie" value="https://www.youtube.com/v/8Ayz1oxy6pY?hl=ja_JP&version=3&loop=1&playlist=8Ayz1oxy6pY"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/8Ayz1oxy6pY?hl=ja_JP&version=3&loop=1&playlist=8Ayz1oxy6pY" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
HTML5形式(<iframe>タグ)の「再生リスト」の動画プレーヤーで「loop」をつかう場合
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
コントロールバーを非表示にする/表示する - 「controls」(コントロールズ)
「controls」: 「Controls」(「コントロールズ」(動画を制御するためのボタンなどの視覚的要素のこと))
「controls」のパラメータを設定することによって、コントロールバーの表示/非表示を指定することができます。また、「Flash(AS3)プレーヤー」の場合は、Flash形式の動画プレーヤーをどのタイミングで読み込むかを指定することができます。
「コントロールバー」というのは、動画の下についている、「再生」ボタンや「一時停止」ボタン、動画再生の進行状況を示す「プログレスバー」(シークバー)、「経過時間表示」、「音量調節」、「全画面表示」ボタンなどがついている、「動画の再生について操作することができる部分」のことです。
ちなみに、「コントロールバー」は、英語では、「player control bar」(プレーヤー・コントロールバー)や「player controls」(プレーヤー・コントロールズ)などと呼ばれます。
「controls」の値を「0」にすると、コントロールバーが非表示になります。「Flash(AS3)プレーヤー」の場合は、Flash形式の動画プレーヤーがただちに読み込まれます。
「controls」の値を「1」にすると、コントロールバーが表示されます。「Flash(AS3)プレーヤー」の場合は、Flash形式の動画プレーヤーがただちに読み込まれます。
「controls」の値を「2」にすると、コントロールバーが表示されます。「Flash(AS3)プレーヤー」の場合は、視聴者が動画の再生を開始したあとで、Flash形式の動画プレーヤーが読み込まれます。
「controls」の値が「1」の場合と「2」の場合をくらべると、動画プレーヤーの見た目はほぼおなじです。「1」と「2」の違いは、値を「2」にした場合のほうが、「1」にした場合よりもパフォーマンスが向上するという点です。
対象となる動画プレーヤーのタイプ: AS3, HTML5
設定できる値: 0, 1, 2(初期値は「1」)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「controls=0」(コントロールバーを非表示にする)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「controls=1」(コントロールバーを表示する)(「Flash(AS3)プレーヤー」形式)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「controls=2」(コントロールバーを表示する & パフォーマンス向上)(「Flash(AS3)プレーヤー」形式)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
コントロールバーとプログレスバー(シークバー)を隠す/常に表示させる - 「autohide」(オートハイド)
「autohide」: 「Auto Hide」(「オートハイド」(「自動的に隠す」という意味))
「autohide」のパラメータを設定することによって、コントロールバーとプログレスバー(シークバー)をスライドアウトさせて隠したり、逆に、常に表示させ続けることができます。
「コントロールバー」というのは、動画の下についている、「再生」ボタンや「一時停止」ボタン、動画再生の進行状況を示す「プログレスバー」(シークバー)、「経過時間表示」、「音量調節」、「全画面表示」ボタンなどがついている、「動画の再生について操作することができる部分」のことです。
「プログレスバー」というのは、動画プレーヤーの下部にある「コントロールバー」についている、「動画全体のなかでいまどこの部分を再生しているのかという進行状況を示す横棒」のことです。「スライド式プログレスバー」や、「シークバー」と呼ばれることもあります。
対象となる動画プレーヤーのタイプ: AS3, AS2, HTML5
設定できる値: 0, 1, 2(初期値は「2」)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「autohide=1」(コントロールバーとプログレスバー(シークバー)が隠れる)
「autohide」の値を「1」にすると、再生が開始された直後に、コントロールバーとプログレスバー(シークバー)がスライドアウトして隠れるようになります。
また、動画の再生前の画面でも、コントロールバーとプログレスバー(シークバー)が表示されなくなります。
マウスカーソルを動画プレーヤーの上に移動させるか、キーボードのキーを押して動画プレーヤーを操作するとコントロールバーとプログレスバー(シークバー)が表示され、マウスカーソルを動画プレーヤーの外に移動させるとコントロールバーとプログレスバー(シークバー)がスライドアウトして隠れます。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
コントロールバーとプログレスバー(シークバー)を完全に非表示にする
「controls」のパラメーターの値を「0」にすると、コントロールバーとプログレスバー(シークバー)が完全に非表示になります。(「autohide」のパラメータをつけなくてもコントロールバーとプログレスバー(シークバー)が非表示になります。)
また、動画の再生前の画面でも、コントロールバーとプログレスバー(シークバー)が表示されなくなります。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「autohide=0」(コントロールバーとプログレスバー(シークバー)を表示させ続ける)
「autohide」の値を「0」にすると、動画が再生されているあいだずっとコントロールバーとプログレスバー(シークバー)が表示されつづけるようになります。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「autohide=2」(プログレスバー(シークバー)が目立たないようになる)
「autohide」の初期値は、「2」です。埋め込みコードのなかに「autohide」のパラメータをいれていない場合は、自動的に「autohide=2」にした状態とおなじ設定になります。
「autohide」の値を「2」にすると、再生が開始された直後に、プログレスバー(シークバー)がスライドアウトして細くなって目立たないようになります。(コントロールバーはずっと表示され続けます。)
マウスカーソルを動画プレーヤーの上に移動させるとプログレスバー(シークバー)が元の太さにもどり、マウスカーソルを動画プレーヤーの外に移動させるとプログレスバー(シークバー)がスライドアウトして細くなります。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
全画面表示ボタンを非表示にする - 「fs」(フルスクリーン)
「fs」: 「Full Screen」(「フルスクリーン」の略)
「fs」の値を「0」にすると、コントロールバーのなかの右端についている「全画面表示」のボタンを非表示にすることができます。
対象となる動画プレーヤーのタイプ: AS3, AS2
設定できる値: 0, 1(初期値は「1」)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「fs=0」(全画面表示ボタンを非表示にする)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「fs=1」(全画面表示ボタンを表示する)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「fs」をHTML5形式の動画プレーヤーでつかう
「fs」のパラメータは、<iframe>タグのHTML5形式の動画プレーヤーでも機能します。
ただ、この場合は、「fs=0」は、あくまでも、「全画面表示ボタンを非表示にする」というだけで、「全画面表示ができないようにする」ということではありません。ですので、「fs」の値を「0」にしても、動画の画面をダブルクリックすると全画面表示にすることができます。
全画面表示ができないようにしたい場合は、埋め込みコードのなかの「allowfullscreen」(「Allow Fullscreen」(「アラウフルスクリーン」))という文字列を消す必要があります。
「fs=0」(全画面表示ボタンを非表示にする)(HTML5形式の動画プレーヤーの場合)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「fs=0」(全画面表示ボタンを非表示にする & 全画面表示ができないようにする)(HTML5形式の動画プレーヤーの場合)
上記の、「fs=0」を設定したHTML5形式の動画プレーヤーの埋め込みコードのなかの「allowfullscreen」(「Allow Fullscreen」(「アラウフルスクリーン」))という文字列を消すと、全画面表示ができないようになります。
なお、埋め込みコードのなかに「allowfullscreen」が入っていない場合は、「fs」の値を「0」に設定しなくても全画面表示ボタンは非表示になります。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
タイトルバーを非表示にする - 「showinfo」(ショウインフォ)
「showinfo」: 「Show Information」(「ショウインフォメーション」)の略(「動画についての情報を表示する」といった意味)
「showinfo」の値を「0」にすると、タイトルバーを非表示にすることができます。
(タイトルバーというのは、動画プレーヤーの画面の上部にあって、「動画タイトル」や、「高評価」、「低評価」、「共有する」、「詳細」のアイコンなどが表示される黒いバーのことです。)
また、YouTube動画の「再生リスト」(プレイリスト)を動画プレーヤーとして埋め込み、なおかつ、明示的に「showinfo」の値を「1」に設定している場合(「showinfo=1」という文字列を埋め込みコードのなかに入れている場合)、動画を再生する前の画面の下部に、その「再生リスト」に含まれている動画の一覧リスト(サムネイル画像)が表示されます。
この機能は、「再生リスト」を読み込むことができる「Flash(AS3)プレーヤー」(Flash形式の動画プレーヤー)の場合だけ利用できます。
(「再生リスト」というのは、任意のYouTube動画を集めたリストをつくることができるという、YouTubeの機能のひとつです。「再生リスト」は、「プレイリスト」(playlist)と呼ばれることもあります。)
対象となる動画プレーヤーのタイプ: AS3, AS2, HTML5
設定できる値: 0, 1(初期値は「1」)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「showinfo=0」(タイトルバーを非表示にする)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「showinfo=1」(「再生リスト」のサムネイルを表示させる)(「再生リスト」の動画プレーヤーの場合)
「再生リスト」(プレイリスト)の動画プレーヤーの場合、埋め込みコードの「list=」の後ろの「リストID」の部分には、表示させたい「再生リスト」の「リストID」をいれます。
表示させたい「再生リスト」の「リストID」を取得するためには、YouTubeのウェブサイト内のその「再生リスト」のページを表示させて、そのページのURLのなかの「list=」という文字よりも後ろの部分の「PL」で始まる文字列を見ます。この「PL」で始まる文字列がその「再生リスト」の「リストID」です。
下の「再生リスト」のページの例でいうと、「PLF12FECA2B7F66C6C」という部分が、この「再生リスト」の「リストID」です。
「再生リスト」(プレイリスト)のページのURLの形式
https://www.youtube.com/playlist?list=リストID
「再生リスト」(プレイリスト)のページのURLの実例
https://www.youtube.com/playlist?list=PLF12FECA2B7F66C6C
「再生リスト」(プレイリスト)を動画プレーヤーとして埋め込むと、コントロールバーのなかに「再生リスト」(「Playlist」)というボタンが表示されます。この「再生リスト」(「Playlist」)ボタンを押すと、その「再生リスト」に含まれている動画の一覧リスト(サムネイル画像)の表示/非表示を切り替えることができます。
<param name="movie" value="https://www.youtube.com/v/videoseries?hl=ja_JP&list=リストID&version=3&showinfo=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/videoseries?hl=ja_JP&list=リストID&version=3&showinfo=1" type="application/x-shockwave-flash" width="横幅" height="縦幅" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
<param name="movie" value="https://www.youtube.com/v/videoseries?hl=ja_JP&list=PLF12FECA2B7F66C6C&version=3&showinfo=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/videoseries?hl=ja_JP&list=PLF12FECA2B7F66C6C&version=3&showinfo=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
(参考)「showinfo」を明示的に設定しない場合(「再生リスト」のサムネイルを表示しない)(「再生リスト」の動画プレーヤーの場合)
下のYouTube動画は、「showinfo」のパラメータを設定していない場合の「Flash(AS3)プレーヤー」形式の「再生リスト」(プレイリスト)の動画プレーヤーの実例です。
「showinfo」の初期値は「1」なので、埋め込みコードのなかに「showinfo=1」という文字列を書き込まなくても、自動的に「showinfo=1」という設定が適用されます。
ですが、「Flash(AS3)プレーヤー」形式の「再生リスト」の動画プレーヤーの場合、再生する前の画面に「再生リスト」に含まれている動画の一覧リスト(サムネイル画像)を表示させるには、明示的に「showinfo」の値を「1」に設定する必要があります(「showinfo=1」という文字列を埋め込みコードのなかに入れる必要があります)。
しかし、下の例では、明示的に「showinfo」の値を「1」に設定していないので(「showinfo=1」という文字列を埋め込みコードのなかに入れていないので)、上の実例のように明示的に「showinfo=1」に設定した場合のものとは違って、こちらの場合は、再生する前の画面に「再生リスト」に含まれている動画の一覧リスト(サムネイル画像)は表示されません。
<param name="movie" value="https://www.youtube.com/v/videoseries?hl=ja_JP&list=リストID&version=3"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/videoseries?hl=ja_JP&list=リストID&version=3" type="application/x-shockwave-flash" width="横幅" height="縦幅" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
<param name="movie" value="https://www.youtube.com/v/videoseries?hl=ja_JP&list=PLF12FECA2B7F66C6C&version=3"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/videoseries?hl=ja_JP&list=PLF12FECA2B7F66C6C&version=3" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
最初から高画質/低画質で再生する - 「vq」(ビデオクオリティー)
「vq」: 「Video Quality」(「ビデオクオリティー」(動画の画質))の略
「vq」のパラメータを設定することによって、動画を最初から高画質や低画質で再生させることができます。
「vq」の値として設定できる値は、つぎのとおりです。(上にあるものほど高画質で、下にあるものほど低画質です。)
- 「vq=hd1080」: 画質1080p(HD画質(高精細度))
- 「vq=hd720」: 画質720p(HD画質(高精細度))
- 「vq=large」: 画質480p
- 「vq=medium」: 画質360p
- 「vq=small」: 画質240p
なお、「vq」のパラメータが指定されていない場合は、初期値である「360p」の画質で再生されます。
(「vq=hd1080」や「vq=hd720」のなかの「hd」というのは、「High Difinition」(ハイデフィニション)の略で、「高精細度」という意味です。この「hd」という言葉の使用例としては、たとえば、「画質がHDの動画」という表現があります。この表現の意味は、「高画質な動画」という意味です。「HD」は、「ハイビジョン画質」や、「HDTV」、「高品位テレビ」などとも呼ばれています。)
(「1080p」などの「p」というのは、「プログレッシブ方式」であるということをあらわしています。)
YouTube動画をHD画質にしたい場合は、YouTubeにアップロードする動画ファイルの映像の縦横の長さと、その比率を一定の数字にする必要があります。
画質を「1080p」にしたい場合は、映像の縦横の長さとその比率を下記の設定にする必要があります。
画質「1080p」
横1920ピクセル × 縦1080ピクセル
(横縦の比率 16:9)
画質を「720p」にしたい場合は、映像の縦横の長さとその比率を下記の設定にする必要があります。
画質「720p」
横1280ピクセル × 縦720ピクセル
(横縦の比率 16:9)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「vq=hd1080」: 画質1080p(HD画質(高精細度))
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「vq=hd720」: 画質720p(HD画質(高精細度))
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「vq=large」: 画質480p
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「vq=medium」: 画質360p
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「vq=small」: 画質240p
僕が試した限りでは、「vq」の値を「small」にしても、なぜか初期状態の画質は「240p」にならず、「360p」になってしまいました。
YouTubeの仕様上は、「vq」の値として「small」という値を設定できるようになっているはずなのですが、なぜかうまく動作しませんでした。
下の動画でも、きちんと設定しているにもかかわらず、初期状態の画質は「240p」ではなく、なぜか「360p」になってしまいます。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
再生を開始する位置を指定する – 「start」(スタート)
「start」: 「スタート」(「開始位置」という意味)
「start」のパラメータを設定することによって、動画の再生が開始される位置をあらかじめ設定しておいて、その位置から再生を開始させることができます。
動画の開始位置の指定は、動画の冒頭から再生を開始させる位置までの経過時間(秒数)で指定します。
なお、動画のキーフレームと経過時間の秒数は完全に一致するわけではないので、場合によっては、指定した位置から再生が開始されるまでに最大で2秒ほどかかることもあります。
対象となる動画プレーヤーのタイプ: AS3, AS2, HTML5
設定できる値: 正の整数(秒数の数字)
下の動画では、「5:25」の時点から再生を開始させているので、「start」の値には「5分25秒」を秒数になおした「325」(秒)という数字を指定しています。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
再生を終了する位置を指定する – 「end」(エンド)
「end」: 「エンド」(「終了位置」という意味)
「end」のパラメータを設定することによって、動画の再生が終了する位置をあらかじめ設定しておいて、その位置で再生を終了させることができます。
動画の終了位置の指定は、動画の冒頭から再生を終了させる位置までの経過時間(秒数)で指定します。
「end」のパラメータがつかえるのは「Flash(AS3)プレーヤー」の場合だけです。
対象となる動画プレーヤーのタイプ: AS3
設定できる値: 正の整数(秒数の数字)
下の動画では、「00:05」の時点で再生を終了させているので、「end」の値には「5」(秒)という数字を指定しています。
<param name="movie" value="https://www.youtube.com/v/動画ID?hl=ja_JP&version=3&end=再生終了位置(秒数)"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/動画ID?hl=ja_JP&version=3&end=再生終了位置(秒数)" type="application/x-shockwave-flash" width="横幅" height="縦幅" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
<param name="movie" value="https://www.youtube.com/v/-mkXkHeqLEs?hl=ja_JP&version=3&end=5"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/-mkXkHeqLEs?hl=ja_JP&version=3&end=5" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「再生リスト」、公開動画リスト、動画検索結果リストを動画プレーヤーとして埋め込む - 「listType」(リストタイプ)&「list」(リスト)
「listType」: 「リストタイプ」(「動画リストの種類」)
「list」: 「リスト」(「(対象となる)動画リスト」)
対象となる動画プレーヤーのタイプ(「listType」): AS3
対象となる動画プレーヤーのタイプ(「list」): AS3
設定できる値(「listType」): playlist, user_uploads, search
設定できる値(「list」): 「再生リスト」の「リストID」, YouTubeユーザー名(半角英数字), 検索キーワード
「listType」と「list」の2つのパラメータをつかうと、つぎのような、複数のYouTube動画をひとつにまとめた動画リストを動画プレーヤーとして埋め込むことができます。
- 「再生リスト」(「playlist」)
- 公開動画リスト(「user_uploads」)
- 動画検索結果リスト(「search」)
「listType」の値を「playlist」(プレイリスト)(「再生リスト」)にして、「list」の値に「再生リスト」の「リストID」をいれると、「再生リスト」を動画プレーヤーとして埋め込むことができます。
「listType」の値を「user_uploads」(「公開動画リスト」)にして、「list」の値にYouTubeユーザー名(半角英数字)をいれると、そのユーザーがYouTubeで公開している動画のリストを動画プレーヤーとして埋め込むことができます。
「listType」の値を「search」(「動画検索結果リスト」)にして、「list」の値に検索キーワードをいれると、そのキーワードでYouTube動画検索をかけた検索結果の動画のリストを動画プレーヤーとして埋め込むことができます。
これらの動画のリストの埋め込みプレーヤーは、「Flash(AS3)プレーヤー」形式にします。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「再生リスト」を動画プレーヤーとして埋め込む
「再生リスト」というのは、任意のYouTube動画を集めたリストをつくることができるという、YouTubeの機能のひとつです。
(「再生リスト」は、「プレイリスト」(playlist)と呼ばれることもあります。)
この「再生リスト」(プレイリスト)を動画プレーヤーとして埋め込むためには、埋め込みコードの「src」の値を「src」の値を下記のような形式にします。
「 https://www.youtube.com/v/videoseries?hl=ja_JP&listType=playlist&list=リストID&version=3 」
このなかの「リストID」の部分には、表示させたい「再生リスト」(プレイリスト)の「リストID」をいれます。
表示させたい「再生リスト」の「リストID」を取得するためには、YouTubeのウェブサイト内のその「再生リスト」のページを表示させて、そのページのURLのなかの「list=」という文字よりも後ろの部分の「PL」で始まる文字列を見ます。この「PL」で始まる文字列がその「再生リスト」の「リストID」です。
下の「再生リスト」のページの例でいうと、「PLF12FECA2B7F66C6C」という部分が、この「再生リスト」の「リストID」です。
「再生リスト」(プレイリスト)のページのURLの形式
https://www.youtube.com/playlist?list=リストID
「再生リスト」(プレイリスト)のページのURLの実例
https://www.youtube.com/playlist?list=PLF12FECA2B7F66C6C
「再生リスト」(プレイリスト)を動画プレーヤーとして埋め込むと、コントロールバーのなかに「再生リスト」(「Playlist」)というボタンが表示されます。この「再生リスト」(「Playlist」)ボタンを押すと、画面の下にその「再生リスト」に含まれている動画の一覧リスト(サムネイル画像)が表示されます。
<param name="movie" value="https://www.youtube.com/v/videoseries?hl=ja_JP&listType=playlist&list=リストID&version=3"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/videoseries?hl=ja_JP&listType=playlist&list=リストID&version=3" type="application/x-shockwave-flash" width="横幅" height="縦幅" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
<param name="movie" value="https://www.youtube.com/v/videoseries?hl=ja_JP&listType=playlist&list=PLF12FECA2B7F66C6C&version=3"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/videoseries?hl=ja_JP&listType=playlist&list=PLF12FECA2B7F66C6C&version=3" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
(参考)「showinfo=1」に設定した場合(「再生リスト」のサムネイルを表示させる)
上記の「再生リスト」(プレイリスト)の動画プレーヤーの埋め込みコードに、「showinfo=1」を書き加えると、動画を再生する前の画面の下部に、その「再生リスト」に含まれている動画の一覧リスト(サムネイル画像)が表示されます。
<param name="movie" value="https://www.youtube.com/v/videoseries?hl=ja_JP&listType=playlist&list=リストID&version=3&showinfo=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/videoseries?hl=ja_JP&listType=playlist&list=リストID&version=3&showinfo=1" type="application/x-shockwave-flash" width="横幅" height="縦幅" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
<param name="movie" value="https://www.youtube.com/v/videoseries?hl=ja_JP&listType=playlist&list=PLF12FECA2B7F66C6C&version=3&showinfo=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/videoseries?hl=ja_JP&listType=playlist&list=PLF12FECA2B7F66C6C&version=3&showinfo=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
(参考)HTML5形式の動画プレーヤー(<iframe>タグ)をつかった「再生リスト」の動画プレーヤー
「再生リスト」(プレイリスト)の動画プレーヤーとして、<iframe>タグの埋め込みコードをつかったHTML5形式の動画プレーヤーをつかうこともできるようです。
下の動画はその実例です。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
特定のユーザーの公開動画のリスト(「アップロード動画」)を動画プレーヤーとして埋め込む
特定のYouTubeユーザーがこれまでにYouTubeにアップロードして公開している「アップロード動画」のリストを動画プレーヤーとして埋め込むこともできます。
「listType」の値には、「user_uploads」をいれます。
「list」の値には、対象となるユーザーの「YouTubeユーザー名」(半角英数字)をいれます。
<param name="movie" value="https://www.youtube.com/v/videoseries?hl=ja_JP&listType=user_uploads&list=YouTubeユーザー名&version=3"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/videoseries?hl=ja_JP&listType=user_uploads&list=YouTubeユーザー名&version=3" type="application/x-shockwave-flash" width="横幅" height="縦幅" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
<param name="movie" value="https://www.youtube.com/v/videoseries?hl=ja_JP&listType=user_uploads&list=YukinobuKurata&version=3"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/videoseries?hl=ja_JP&listType=user_uploads&list=YukinobuKurata&version=3" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
(参考)「showinfo=1」に設定した場合(「アップロード動画」のリストのサムネイルを表示させる)
「アップロード動画」のリストの動画プレーヤーの埋め込みコードに、「showinfo=1」を書き加えると、動画を再生する前の画面の下部に、その「アップロード動画」のリストに含まれている動画の一覧リスト(サムネイル画像)が表示されます。
<param name="movie" value="https://www.youtube.com/v/videoseries?hl=ja_JP&listType=user_uploads&list=YouTubeユーザー名&version=3&showinfo=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/videoseries?hl=ja_JP&listType=user_uploads&list=YouTubeユーザー名&version=3&showinfo=1" type="application/x-shockwave-flash" width="横幅" height="縦幅" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
<param name="movie" value="https://www.youtube.com/v/videoseries?hl=ja_JP&listType=user_uploads&list=YukinobuKurata&version=3&showinfo=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/videoseries?hl=ja_JP&listType=user_uploads&list=YukinobuKurata&version=3&showinfo=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
YouTube動画検索の検索結果の動画のリストを動画プレーヤーとして埋め込む
YouTube検索で特定のキーワードを検索したときの検索結果の動画のリストを動画プレーヤーとして埋め込むこともできます。
「listType」の値には、「search」をいれます。
「list」の値には、「検索キーワード」をいれます。
下の動画では、「larry bird 1985」という検索キーワードをいれています。キーワードのあいだにスペースが入る場合は、キーワードどうしのあいだを「+」の記号でつなぎます。下の動画の場合であれば、「larry+bird+1985」というかたちにします。
なお、検索キーワードとして日本語のキーワードを設定していろいろと実験してみたのですが、残念ながら、検索キーワードを日本語にすると埋め込み動画プレーヤーがうまく動作しませんでした。
<param name="movie" value="https://www.youtube.com/v/videoseries?hl=ja_JP&listType=search&list=検索キーワード&version=3"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/videoseries?hl=ja_JP&listType=search&list=検索キーワード&version=3" type="application/x-shockwave-flash" width="横幅" height="縦幅" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
<param name="movie" value="https://www.youtube.com/v/videoseries?hl=ja_JP&listType=search&list=larry+bird+1985&version=3"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/videoseries?hl=ja_JP&listType=search&list=larry+bird+1985&version=3" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
(参考)「showinfo=1」に設定した場合(動画検索結果のリストのサムネイルを表示させる)
上記の動画検索結果のリストの動画プレーヤーの埋め込みコードに、「showinfo=1」を書き加えると、動画を再生する前の画面の下部に、その動画検索結果のリストに含まれている動画の一覧リスト(サムネイル画像)が表示されます。
<param name="movie" value="https://www.youtube.com/v/videoseries?hl=ja_JP&listType=search&list=検索キーワード&version=3&showinfo=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/videoseries?hl=ja_JP&listType=search&list=検索キーワード&version=3&showinfo=1" type="application/x-shockwave-flash" width="横幅" height="縦幅" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
<param name="movie" value="https://www.youtube.com/v/videoseries?hl=ja_JP&listType=search&list=larry+bird+1985&version=3&showinfo=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/videoseries?hl=ja_JP&listType=search&list=larry+bird+1985&version=3&showinfo=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
複数の動画から「再生リスト」をつくって動画プレーヤーとして埋め込む - 「playlist」(プレイリスト)
「playlist」: 「プレイリスト」(「再生リスト」という意味)
「playlist」のパラメータをつかうと、複数の動画を個別に指定してその場でひとつの「再生リスト」をつくり、その「再生リスト」を動画プレーヤーとして埋め込むことができます。
「playlist」のパラメータは、HTML5形式の動画プレーヤーと「Flash(AS3)プレーヤー」形式の動画プレーヤーの両方でつかうことができます。
対象となる動画プレーヤーのタイプ: AS3, HTML5
設定できる値: 複数の動画の「動画ID」を「,」(カンマ)で区切った文字列
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「playlist」をつかった「再生リスト」の動画プレーヤー(HTML5形式)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「playlist」をつかった「再生リスト」の動画プレーヤー(「Flash(AS3)プレーヤー」形式)、「showinfo=1」に設定した場合(「再生リスト」のサムネイルを表示させる)
下の動画では、「playlist」のパラメータをつかって「再生リスト」(プレイリスト)をつくって「Flash(AS3)プレーヤー」として表示させています。
また、「showinfo=1」を設定して、動画を再生する前の画面の下部に、その「再生リスト」に含まれている動画の一覧リスト(サムネイル画像)を表示させています。
<param name="movie" value="https://www.youtube.com/v/動画ID?hl=ja_JP&playlist=動画ID,動画ID,動画ID,・・・&version=3&showinfo=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/動画ID?hl=ja_JP&playlist=動画ID,動画ID,動画ID,・・・&version=3&showinfo=1" type="application/x-shockwave-flash" width="横幅" height="縦幅" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
<param name="movie" value="https://www.youtube.com/v/JwyPYV8ixnQ?hl=ja_JP&playlist=1fzhkvqg0RE,LQnYmaVUBZ8,MygBaTl1nGE,WvEhWT3Rd_8&version=3&showinfo=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/JwyPYV8ixnQ?hl=ja_JP&playlist=1fzhkvqg0RE,LQnYmaVUBZ8,MygBaTl1nGE,WvEhWT3Rd_8&version=3&showinfo=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
コントロールバーとプログレスバー(シークバー)の色を変える - 「theme」(テーマ)&「color」(カラー)
「theme」(テーマ)は、コントロールバーの色を指定します。「theme」の値は、下の2種類です。
- 「theme=dark」: 黒色
- 「theme=light」: 灰色
「color」(カラー)は、プログレスバー(シークバー)の色を指定します。「color」の値は、下の2種類です。
- 「color=red」: 赤色
- 「color=white」: 白色
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「theme=dark」「color=red」: コントロールバー黒色、プログレスバー(シークバー)赤色
「theme」の値を「dark」にして、「color」の値を「red」にすると、コントロールバーを黒色に、プログレスバー(シークバー)を赤色にすることができます。(初期状態とおなじ配色です。)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「theme=dark」「color=white」: コントロールバー黒色、プログレスバー(シークバー)白色
「theme」の値を「dark」にして、「color」の値を「white」にすると、コントロールバーを黒色に、プログレスバー(シークバー)を白色にすることができます。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「theme=light」「color=red」: コントロールバー灰色、プログレスバー(シークバー)赤色
「theme」の値を「light」にして、「color」の値を「red」にすると、コントロールバーを灰色に、プログレスバー(シークバー)を赤色にすることができます。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「theme=light」「color=white」: コントロールバー灰色、プログレスバー(シークバー)白色
「theme」の値を「light」にして、「color」の値を「white」にすると、コントロールバーを灰色に、プログレスバー(シークバー)を白色にすることができます。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「アノテーション」を非表示にする/表示する – 「iv_load_policy」(ivロードポリシー)
「iv_load_policy」: 「ivロードポリシー」(「アノテーションの表示設定」というような意味)
「iv_load_policy」のパラメータの値を「3」にすると、初期状態で「アノテーション」を非表示に設定することができます。
「iv_load_policy」の値を「1」にすると、初期状態で「アノテーション」を表示する設定にすることができます。
(「iv」というのは「アノテーション」を意味しているようです。)
対象となる動画プレーヤーのタイプ: AS3, AS2, HTML5
設定できる値: 1, 3(初期値は「1」)
下の2つの動画はおなじ動画ですが、上の動画では「アノテーション」を非表示にしています。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「iv_load_policy=3」(「アノテーション」非表示)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「iv_load_policy=1」(「アノテーション」表示)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
キーボードからの操作を無効にする – 「disablekb」(ディスエイブルキーボード)
「disablekb」: 「Disable Keyboard」(「ディスエイブルキーボード」(「キーボードを無効にする」という意味))
「disablekb」のパラメータの値を「1」にすると、キーボードからYouTube動画の埋め込みプレーヤーを操作することができなくなります。
キーボードからの操作方法は、つぎのとおりです。
- スペース キー: 再生/一時停止
- 左矢印キー: 現在の動画を 10% 戻す
- 右矢印キー: 現在の動画を 10% 進める
- 上矢印キー: 音量を上げる
- 下矢印キー: 音量を下げる
対象となる動画プレーヤーのタイプ: AS3, AS2
設定できる値: 0, 1(初期値は「0」)
下の2つの動画はおなじ動画ですが、上の動画ではキーボード操作を無効にしています。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「disablekb=1」(キーボード操作無効)
<param name="movie" value="https://www.youtube.com/v/動画ID?hl=ja_JP&version=3&disablekb=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/動画ID?hl=ja_JP&version=3&disablekb=1" type="application/x-shockwave-flash" width="横幅" height="縦幅" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
<param name="movie" value="https://www.youtube.com/v/DA6x6DpEREA?hl=ja_JP&version=3&disablekb=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/DA6x6DpEREA?hl=ja_JP&version=3&disablekb=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「disablekb=0」(キーボード操作有効)
<param name="movie" value="https://www.youtube.com/v/動画ID?hl=ja_JP&version=3&disablekb=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/動画ID?hl=ja_JP&version=3&disablekb=0" type="application/x-shockwave-flash" width="横幅" height="縦幅" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
<param name="movie" value="https://www.youtube.com/v/DA6x6DpEREA?hl=ja_JP&version=3&disablekb=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/DA6x6DpEREA?hl=ja_JP&version=3&disablekb=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
字幕を表示させる – 「cc_load_policy」(クローズドキャプションポリシー)
「cc_load_policy」: 「Closed Caption Policy」(「クローズドキャプションポリシー」(「字幕の表示設定」というような意味))
「cc_load_policy」のパラメータの値を「1」にすると、たとえ視聴者が字幕をオフにしていたとしても、初期状態で字幕が表示されます。
対象となる動画プレーヤーのタイプ: AS3, AS2
設定できる値: 1(初期値はユーザー設定に基づく)
下の2つの動画はおなじ動画ですが、上の動画では初期状態で字幕を表示させるようにしています。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「cc_load_policy=1」(字幕を表示)
<param name="movie" value="https://www.youtube.com/v/動画ID?hl=ja_JP&version=3&cc_load_policy=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/動画ID?hl=ja_JP&version=3&cc_load_policy=1" type="application/x-shockwave-flash" width="横幅" height="縦幅" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
<param name="movie" value="https://www.youtube.com/v/XOLOLrUBRBY?hl=ja_JP&version=3&cc_load_policy=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/XOLOLrUBRBY?hl=ja_JP&version=3&cc_load_policy=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「cc_load_policy」のパラメータを設定していない場合
<param name="movie" value="https://www.youtube.com/v/動画ID?hl=ja_JP&version=3"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/動画ID?hl=ja_JP&version=3" type="application/x-shockwave-flash" width="横幅" height="縦幅" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
<param name="movie" value="https://www.youtube.com/v/XOLOLrUBRBY?hl=ja_JP&version=3"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/XOLOLrUBRBY?hl=ja_JP&version=3" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「JavaScriptプレーヤーAPI」関連のパラメータ – 「enablejsapi」(イネイブル JS API)&「playerapiid」(プレーヤーAPI ID)&「origin」(オリジン)
「JavaScriptプレーヤーAPI」を利用する場合につかうパラメータとして、つぎのようなパラメータがあります。
(「JavaScriptプレーヤーAPI」を利用すると、JavaScriptをつかって、標準の埋め込みプレーヤーやクロムレスプレーヤーを自由にカスタマイズしたり制御したりすることができます。)
- 「enablejsapi」: 「Enable JS API」(イネイブル JS API)
- 「playerapiid」: 「Player API ID」(プレーヤーAPI ID)
- 「origin」: (オリジン)
「JavaScriptプレーヤーAPI」の詳細については、下のYouTube公式ヘルプページをご覧ください。
YouTube JavaScript Player API Reference - YouTube — Google Developers
https://developers.google.com/youtube/js_api_reference
YouTube JavaScript Player API リファレンス - YouTube — Google Developers
https://developers.google.com/youtube/js_api_reference?hl=ja
上記のページの日本語版です。上記のページとは内容が異なることがあるので注意してください。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「enablejsapi」(イネイブル JS API)
「enablejsapi」の値を「1」にすると、「JavaScriptプレーヤーAPI」が有効になります。
対象となる動画プレーヤーのタイプ: AS3, AS2, HTML5
設定できる値: 0, 1(初期値は「0」)
「playerapiid」(プレーヤーAPI ID)
「playerapiid」の値には、動画プレーヤーを表示させる部分のHTMLタグのIDの文字列(半角英数字)をいれます。
この「playerapiid」の値を設定することで、「どの動画プレーヤーを制御するのか」ということを指定して、「JavaScriptプレーヤーAPI」のJavaScriptにつたえることができるようになります。
対象となる動画プレーヤーのタイプ: AS3, AS2
設定できる値: 半角英数字の文字列(HTMLタグのid名)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「origin」(オリジン)
「origin」のパラメータをつかうと、<iframe>タグ形式の埋め込みコードをつかう場合に、セキュリティーを高めることができます。
(「origin」がつかえるのは、<iframe>タグ形式の埋め込みコードの場合だけです。)
「origin」の値には、動画プレーヤーを埋め込むページのドメイン名をいれます。
YouTubeの公式ヘルプページには、「JavaScriptプレーヤーAPI」をつかって、<iframe>タグ形式の埋め込みコードの動画プレーヤーを制御する場合(「enablejsapi」の値を「1」にしている場合)は、常に「origin」を利用して動画プレーヤーを埋め込むページのドメイン名を指定するべきだと書かれています。
対象となる動画プレーヤーのタイプ: AS3, HTML5
設定できる値: (動画プレーヤーを埋め込むページの)ドメイン名
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
(参考)全画面表示ができないようにする - 「allowfullscreen」(アラウフルスクリーン)
<iframe>タグの埋め込みコードのなかの「allowfullscreen」(アラウフルスクリーン)という項目を削除すると、全画面表示ができないようになります。
なお、埋め込みコードのなかに「allowfullscreen」が入っていない場合は、「fs」の値を「0」に設定しなくても、コントロールバーの右端にある全画面表示ボタンは非表示になります。
下の2つの動画はおなじ動画ですが、上の動画では全画面表示ができないようにしています。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「allowfullscreen」無し(全画面表示ができないようにする)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「allowfullscreen」有り(全画面表示ができるようにする)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
(参考)周囲に枠線をつける - 「frameborder」(フレームボーダー)
<iframe>タグの埋め込みコードのなかの「frameborder」(フレームボーダー)という項目の値を「1」にすると、動画プレーヤーの周囲に灰色の枠線が表示されます。
下の2つの動画はおなじ動画ですが、上の動画では(すこしわかりにくいかもしれませんが)動画プレーヤーの周囲に灰色の枠線を表示させています。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「frameborder="1"」(周囲に枠線をつける)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「frameborder="0"」(周囲に枠線をつけない)
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
(参考)非推奨(廃止予定)のパラメータ(「Flash(AS2)プレーヤーAPI」限定)
下記のパラメータは、非推奨(廃止予定)のパラメータです。
これらのパラメータは、旧式の「ActionScript バージョン2.0」を利用する旧式の「Flash(AS2)プレーヤーAPI」だけでしか利用できません。
- border
- color1, color2
- egm
- hd
- showsearch
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
動画プレーヤーを制御するための3つのAPI
YouTubeの埋め込み動画プレーヤーでは、APIを利用することで、JavaScriptやActionScriptをつかって動画プレーヤーを自由に制御することができます。
ちなみに、「API」というのは、「アプリケーション・プログラミング・インターフェース」(Application Programming Interface)の略です。APIが提供されているウェブサービスでは、そのウェブサービスの機能を自分でカスタマイズして独自の仕組みをつくることができます。
YouTubeの埋め込み動画プレーヤーのAPIには、つぎの3つの種類があります。
- 「IFrameプレーヤーAPI」
- 「Flash(AS3)プレーヤーAPI」
- 「JavaScriptプレーヤーAPI」
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「IFrameプレーヤーAPI」
「IFrameプレーヤーAPI」の仕組みを利用すると、JavaScriptをつかって、動画プレーヤーを制御することができます。
再生、一時停止、音量の調整、再生中の動画についての情報の取得などの操作をおこなうことができます。
「IFrameプレーヤーAPI」がつかえるのは、標準の<iframe>タグ形式の動画プレーヤーだけです。<object>タグ形式の動画プレーヤーや、クロムレスプレーヤーではつかえません。
「IFrameプレーヤーAPI」は、HTML5の<iframe>タグをつかって動画プレーヤーを表示させるようになっているので、プラットフォームの違いに対して柔軟に対応することができます。そのため、Flash形式の動画プレーヤーを表示できないスマートフォンなどのモバイル機器でも、埋め込み動画プレーヤーのYouTube動画を問題なく見ることができます。
また、JavaScriptの「イベントリスナー」の機能をつかうことができるので、動画に関する「イベント」が発生したときに予め指定した動作をさせることもできます。
ここまでお話してきた各種の「パラメータ」をつかうこともできます。
「IFrameプレーヤーAPI」の詳細については、下のYouTube公式ヘルプページをご覧ください。
YouTube Player API Reference for iframe Embeds - YouTube — Google Developers
https://developers.google.com/youtube/iframe_api_reference
下の動画は、「IFrameプレーヤーAPI」を利用した動画プレーヤーの実例です。
<div id="iframe_player_api"></div>
<script>
// YouTubeのウェブサイト上にある「IFrameプレーヤーAPI」のコードを
// 非同期的に読み込む。
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var iframePlayerApiScriptTag = document.getElementsByTagName('script')[0];
iframePlayerApiScriptTag.parentNode.insertBefore(tag, iframePlayerApiScriptTag);
// 「IFrameプレーヤーAPI」のコードが読み込まれた後、
// 「iframe_player_api」というIDがついている<div>タグが
// YouTube動画プレーヤーの<iframe>タグに置き換えられる。
var player;
function onYouTubePlayerAPIReady() {
//ここで指定しているID名(「iframe_player_api」)がついた
//<div>タグ(上記)は、ページが表示される前に
//自動的に<iframe>タグ(動画プレーヤー)に置き換えられます。
player = new YT.Player('iframe_player_api', {
//動画プレーヤーの横幅(width)と縦幅(height)
height: '315',
width: '560',
//表示させるYouTube動画の「動画ID」
videoId: 'DA6x6DpEREA',
//動画プレーヤーの設定をおこなう「パラメータ」
playerVars: {
//左の値は「パラメータの名前」。
//右の値は「パラメータの値」。
'modestbranding': 1,
'vq': 'hd1080'
},
//「イベントリスナー」
events: {
//左の値は「イベントリスナー」。
//右の値はそのイベントが発生した時に実行される関数。
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
//イベントが発生した時に実行される関数の定義
function onPlayerReady(){
}
function onPlayerStateChange(){
}
</script>
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「Flash(AS3)プレーヤーAPI」
「Flash(AS3)プレーヤーAPI」の仕組みを利用すると、ActionScriptをつかって、動画プレーヤーを制御することができます。
再生、一時停止、指定した動画位置のシーク、音量の調整、ミュートなど、関数を呼び出すことでさまざまな操作をおこなうことができます。
「ActionScript」(アクションスクリプト)というのは、Flashを操作するためにつかわれるプログラミング言語です。
(「AS3」というのは、「ActionScript バージョン3.0」の略です。同様に、「AS2」というものもあります。こちらは、旧式の「ActionScript バージョン2.0」の略です。「AS2」形式の埋め込み動画プレーヤーは、YouTubeでは非推奨(廃止予定)になっています。)
「Flash(AS3)プレーヤーAPI」は、標準の埋め込み動画プレーヤーとクロムレスプレーヤーの両方でつかうことができます。
「Flash(AS3)プレーヤーAPI」の詳細については、下のYouTube公式ヘルプページをご覧ください。
YouTube ActionScript 3.0 Player API Reference - YouTube — Google Developers
https://developers.google.com/youtube/flash_api_reference
YouTube ActionScript 3.0 Player API リファレンス - YouTube — Google Developers
https://developers.google.com/youtube/flash_api_reference?hl=ja
上記のページの日本語版です。上記のページとは内容が異なることがあるので注意してください。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「JavaScriptプレーヤーAPI」
「JavaScriptプレーヤーAPI」の仕組みを利用すると、JavaScriptをつかって、動画プレーヤーを制御することができます。
再生、一時停止、指定した動画位置のシーク、音量の調整、ミュートなど、関数を呼び出すことでさまざまな操作をおこなうことができます。
「JavaScriptプレーヤーAPI」は、標準の埋め込み動画プレーヤーとクロムレスプレーヤーの両方でつかうことができます。
「JavaScriptプレーヤーAPI」の詳細については、下のYouTube公式ヘルプページをご覧ください。
YouTube JavaScript Player API Reference - YouTube — Google Developers
https://developers.google.com/youtube/js_api_reference
YouTube JavaScript Player API リファレンス - YouTube — Google Developers
https://developers.google.com/youtube/js_api_reference?hl=ja
上記のページの日本語版です。上記のページとは内容が異なることがあるので注意してください。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
参考サイト、YouTube公式ヘルプページ
下のページはそれぞれ、YouTube公式の開発者用のヘルプページです。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「YouTube埋め込み動画プレーヤーのパラメータ」関連
YouTubeの埋め込み動画プレーヤーの「パラメータ」についてのリファレンスのページです。
YouTube Embedded Players and Player Parameters - YouTube - Google Developers
https://developers.google.com/youtube/player_parameters
YouTube 埋め込みプレーヤーのパラメータ - YouTube — Google Developers
https://developers.google.com/youtube/player_parameters?hl=ja
上記のページの日本語版です。掲載されている情報が古くなっていたり、上記のページとは内容が異なっていることがあるので注意してください。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「YouTubeプレーヤーAPI」関連
「YouTubeプレーヤーAPI」には、つぎの3種類があります。
- IFrameプレーヤーAPI
- Flash(AS3)プレーヤーAPI
- JavaScriptプレーヤーAPI
下のページは、YouTubeのAPIの概要についてのページです。「YouTubeプレーヤーAPI」の概要だけでなく、「YouTubeデータAPI」の概要も掲載されています。
API Overview Guide - YouTube — Google Developers
https://developers.google.com/youtube/getting_started?hl=en
API の概要 - YouTube — Google Developers
https://developers.google.com/youtube/getting_started?hl=ja
上記のページの日本語版です。上記のページとは内容が異なることがあるので注意してください。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「IFrameプレーヤーAPI」のリファレンス
YouTube Player API Reference for iframe Embeds - YouTube — Google Developers
https://developers.google.com/youtube/iframe_api_reference
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「Flash(AS3)プレーヤーAPI」のリファレンス
YouTube ActionScript 3.0 Player API Reference - YouTube — Google Developers
https://developers.google.com/youtube/flash_api_reference
YouTube ActionScript 3.0 Player API リファレンス - YouTube — Google Developers
https://developers.google.com/youtube/flash_api_reference?hl=ja
上記のページの日本語版です。上記のページとは内容が異なることがあるので注意してください。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
「JavaScriptプレーヤーAPI」のリファレンス
YouTube JavaScript Player API Reference - YouTube — Google Developers
https://developers.google.com/youtube/js_api_reference
YouTube JavaScript Player API リファレンス - YouTube — Google Developers
https://developers.google.com/youtube/js_api_reference?hl=ja
上記のページの日本語版です。上記のページとは内容が異なることがあるので注意してください。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
YouTube埋め込み動画プレーヤーの作成ツール/デモ
YouTube Player Demo - YouTube — Google Developers
https://developers.google.com/youtube/youtube_player_demo
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
その他
YouTube 動画を埋め込むには - YouTube ヘルプ
「以前の埋め込みコードを使用する」
http://support.google.com/youtube/bin/answer.py?hl=ja&answer=171780&expand=UseOldEmbedCode#oldcode
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
おもしろい組み合わせ方を思いついたら、ぜひ教えてください
ここまでお話してきたパラメータやAPIは、組み合わせ次第でいろいろな使い方ができます。
これらをうまくつかえば、便利な機能を実現したり、おもしろいアイデアをかたちにすることもできるでしょう。
もし、おもしろい組み合わせ方や活用方法を思いついたときは、ぜひ下のコメント欄で教えてください。
あなたのアイデアで、世の中をもっとおもしろくしてしまいましょう!
d(≧∀≦)b
YouTube APIについての関連記事
下の記事は、「YouTubeのAPI」についての、そのほかの関連記事です。
YouTubeのAPIについてもっと知りたい場合は、下のリンクをクリックして、これらの記事もご覧ください。
- YouTube動画と連動してあらかじめ設定した時間になると購入ボタンが表示される仕組み (HTML、IFrameプレーヤーAPI(JavaScript)、CSS)
- YouTube動画の一時停止ができないようにする仕組み (IFrameプレーヤーAPI(JavaScript))
- YouTube動画の再生終了後にリダイレクトで別のページに自動的に移動させる仕組み (IFrameプレーヤーAPI(JavaScript))
- YouTube動画の一時停止ができないようにする仕組み (Chromeless Player(クロムレスプレーヤー)(JavaScriptプレーヤーAPI))
- YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表
YouTubeのうまい使い方についての関連記事
下の記事は、「YouTubeのうまい使い方」についての関連記事です。
YouTubeのうまい使い方について知りたい場合は、下のリンクをクリックして、これらの記事もご覧ください。
[…] このページに無茶苦茶詳しく載ってました。 http://wisdommingle.com/youtube-embedded-player-parameter-customize/ デフォルトがこれ。 <iframe width="560" height="315" src="http:// […]
[…] YouTubeの動画プレーヤーの「パラメータ」については、下記の「playerVars:」のところで設定できます。「パラメータ」というのは、YouTube動画の埋め込みプレーヤーの見た目や機能をカスタ […]
[…] YouTubeの動画プレーヤーの「パラメータ」については、下の「playerVars:」のところで設定できます。「パラメータ」というのは、YouTube動画の埋め込みプレーヤーの見た目や機能をカスタマ […]
[…] YouTubeの動画プレーヤーの「パラメータ」については、下の「playerVars:」のところで設定できます。「パラメータ」というのは、YouTube動画の埋め込みプレーヤーの見た目や機能をカスタマ […]
[…] 上の実例では、「Chromeless Player」(クロムレスプレーヤー)と「JavaScriptプレーヤーAPI」をつかって、YouTubeの動画プレーヤーを制御しています。 […]
[…] YouTube 埋め込みプレーヤーとプレーヤーのパラメータ | Google Developers YouTube動画の22のパラメータまとめ+αと埋め込みコードの実例 | WisdomMingle.com […]