YouTube JavaScript Player APIは2015/01/27から非推奨となり、以降はiframe APIを使用することとされています。YouTube JavaScript Player API Reference | Google Developers
Flash非対応の環境では、SWFObjectによるFlashの埋め込みは機能しません。そのような環境には、iframe版で対応します。
YouTube Player Demo - YouTube | Google Developersで、このAPIの実行例を確認できます。
swfobjectのダウンロードページからダウンロードしたスクリプトをサーバ上に置いて読み込むか、Google AJAX APIから読み込みます。
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load( 'swfobject', '2.2' ); </script>
YouTube Player APIを使用するには、Flash Playerのバージョン8以上が必要となります。よってその必要要件を満たすか、実行前に確認する必要があります。
swfobject.hasFlashPlayerVersion()メソッドは、そのような確認を簡単に行えます。
if( !swfobject.hasFlashPlayerVersion( '8.0.0' ) ) { alert( 'Flash Player8以上が必要です。' ); }
Flash Playerの詳細なバージョン情報が必要ならば、swfobject.getFlashPlayerVersion()メソッドで取得できます。
var version = swfobject.getFlashPlayerVersion(); var major = version.major; // メジャー var minor = version.minor; // マイナー var release = version.release; // リリース
なお、お使いのブラウザのFlashのバージョンは、Flash Player の状況確認で確認できます。
swfobject.embedSWF( swfUrlStr, // FlashファイルのURL : String replaceElemIdStr, // プレーヤーを埋め込むHTML要素のID : String widthStr, // プレーヤーの幅 : String heightStr, // プレーヤーの高さ : String swfVersionStr, // 動作要件を満たすFlash Playerのバージョン : String xiSwfUrlStr, // Flashファイルを高速インストールするためのURL : String flashvarsObj, // 使用しているFlashVars : Object parObj, // 埋込みオブジェクトのパラメータ : Object attObj // 埋込みオブジェクトの属性 : Object )※接尾辞が「Str」は文字列、「Obj」はオブジェクトを引数にとります。
再生する動画の画質だけは、再生時に指定できません。よってプレーヤーの準備完了を待ってから、画質を設定します。
FlashファイルのURL swfUrlStrでYouTubeのURLを指定することで、YouTubeプレーヤーが使用されます。ここでいうYouTubeのURLとはページのURLではなく、埋め込みに使用されるFlashファイルのURLです。それは、
http://www.youtube.com/v/VIDEO_ID?autoplay=1&enablejsapi=1
のような形式です。URLのVIDEO_IDで再生するYouTubeの動画を指定し、それに続くパラメータでプレーヤーの設定を変更できます。なお、このVIDEO_IDを省略して空のプレーヤーを読み込むことはできません。
パラメータ | 説明 | 既定値 | サポート | ||
---|---|---|---|---|---|
AS3 | AS2 | HTML5 | |||
version | 3を指定することで、AS3プレーヤーとなる。 | ○ | |||
autohide | 動画コントロールを自動で隠す方法。
|
2 | ○ | ○ | × |
controls | 動画コントロールを表示するかどうかと、iframe埋め込み版でコントロールの表示とプレーヤーの読み込みタイミングの定義。
|
1 | ○ | ○ | |
theme | 動画コントロールの色。'dark'または'light' | dark | ○ | ○ | × |
autoplay | 1ならば、読み込み時に自動的に再生する。
モバイル ブラウザでは機能しないことがある。モバイルの注意事項 ブラウザによっては、再生リストに対しては機能しないことがある。 |
0 | ○ | ○ | ○ |
cc_load_policy | クローズド キャプション (字幕) を、
|
0 | ○ | ○ | |
iv_load_policy | 動画アノテーションを、
|
1 | ○ | ○ | ○ |
color | プログレスバーの色。'red'または'white' | red | ○ | ○ | |
disablekb | 1ならば、キーボードによる操作が無効となる。 | 0 | ○ | ○ | |
end | 再生を停止する秒数 | ○ | |||
fs | 1ならば、フルスクリーンボタンが表示される。 | 1 | ○ | ○ | |
listType | プレーヤーに読み込む動画の決定方法を指定する。
|
○ | |||
list | listTypeパラメータの値によって、ぞれぞれ次の意味となる。
|
○ | |||
playlist | 再生するビデオのIDのリスト。カンマで区切って複数指定できる。
ブラウザによっては、この再生リストによる指定だけでは自動再生できない。よってリストの最初の項目は、VIDEO_IDで指定する。 |
○ | ○ | ||
loop | 1ならば、動画をくり返し再生する。再生リストのときはリストの全体をくり返す。 | 0 | ○ | ○ | |
modestbranding | 1ならば、YouTubeロゴをコントロールバーに表示しない。(Modest Branding ) | 0 | ○ | ○ | |
enablejsapi | 1ならば、JavaScript APIが有効となる。 | 0 | ○ | ○ | ○ |
origin | セキュリティを高めるため、IFrameでJavaScript APIを使用するならば埋め込むサイトのドメイン名を指定する | ○ | ○ | ||
playerapiid | JavaScript APIでプレーヤーを埋め込む要素のID。 (Player API ID) | ○ | ○ | ||
rel | 1ならば、最初の動画が終了したときに関連動画を表示する。 | 1 | ○ | ○ | ○ |
showinfo | 1ならば、再生後に動画のタイトルなどの情報を表示する。 | 1 | ○ | ○ | ○ |
start | 動画の再生を開始する位置。[秒] | ○ | ○ | ○ | |
wmode | ウィンドウの表示モード | ? | ? | ○ |
パラメータ | 説明 | 既定値 |
---|---|---|
rel | 関連動画を有効にするかどうか | 1 |
autoplay | 自動再生を有効にするかどうか | 0 |
loop | くり返し再生を有効にするかどうか | 0 |
enablejsapi | JavaScript APIを有効にするかどうか | 0 |
playerapiid | JavaScript APIでプレーヤーを指定する値 | |
disablekb | キーボードによる操作を無効にするかどうか | 0 |
egm | 拡張ジニー メニュー (Enhanced Genie Menu) を有効にするかどうか | 0 |
border | プレーヤーの周りに境界線を表示するかどうか | 0 |
color1 | プレーヤーの境界線のメイン カラー | |
color2 | プレーヤーの背景色と境界線のサブ カラー | |
start | 再生を開始する位置 [秒] | |
fs | フルスクリーンを有効にするかどうか | 0 |
hd | HD再生を有効にするかどうか | 0 |
showsearch | 検索ボックスを表示するかどうか | 1 |
showinfo | タイトルや評価などの情報を無効にするかどうか | 1 |
iv_load_policy | 動画アノテーションを表示するかどうか | 1 |
cc_load_policy | クローズド キャプションを表示するかどうか |
swfobjectのスクリプトを外部のサーバから読み込んで使用する場合には、埋込みオブジェクトのパラメータparObjで{ allowScriptAccess: "always" }
としてJavaScriptからの呼び出しを許可する必要があります。
パラメータ | 有効な値 | 説明 | 既定値 |
---|---|---|---|
play |
|
動画の読み込み時にすぐに再生するかどうか | true |
loop |
|
動画をくり返し再生するかどうか | true |
menu |
|
||
quality |
|
レンダリングの質
(再生画質とは異なる) |
|
scale |
|
||
salign |
|
||
wmode |
|
ウィンドウの表示モード | |
bgcolor | #RRGGBB | ||
base | 相対パスの基準となるディレクトリまたはURL | ||
swliveconnect |
|
||
flashvars | |||
devicefont | |||
allowscriptaccess |
|
外部ドメインのスクリプトからのアクセスを許可するかどうか | |
seamlesstabbing | |||
allowfullscreen |
|
フルスクリーン モードを有効にするかどうか | |
allownetworking |
埋込みオブジェクトの属性attObjでプロパティ名をidとして{ id: "playerID" }
とすると、埋込みオブジェクトのid属性がplayerIDとなります。
プレーヤーの準備が整うと、onYouTubePlayerReady()という名前のコールバック関数が呼び出されます。よってこれを実装し、プレーヤーへのアクセスはこの関数の呼び出しを待って行います。
onYouTubePlayerReady( playerid )
引数のplayeridには、FlashファイルのURLパラメータplayerapiid
で指定した値がURLエンコードされて渡されます。
この関数は、グローバルスコープとして定義する必要があります。
処理方法 \ 指定方法 | YouTube動画ID | YouTubeプレーヤーURL |
---|---|---|
読み込みのみ | cueVideoById | cueVideoByUrl |
読み込んで再生 | loadVideoById | loadVideoByUrl |
指定された動画を読み込んで再生します。
player.cueVideoById( videoId : String, // YouTube動画ID startSeconds : Number, // 再生を開始する位置 [秒] suggestedQuality : String // 動画の推奨再生画質 )
player.loadVideoById( videoId : String, startSeconds : Number, suggestedQuality : String )
指定された動画のサムネイルを読み込み、再生する準備をします。
player.cueVideoByUrl( mediaContentUrl : String, // YouTubeプレーヤーのURL startSeconds : Number // 再生を開始する位置 [秒] )
player.loadVideoByUrl( mediaContentUrl : String, startSeconds : Number )
player.playVideo() : Void再生の制御とプレーヤーの設定 - YouTube JavaScript Player API Reference | YouTube IFrame API | Google Developers
読み込み済みの動画を再生します。
player.pauseVideo() : Void
再生中の動画を一時停止します。
player.stopVideo() : Void
再生中の動画を停止します。動画を読み込み中の場合には、それも停止します。
player.seekTo( seconds : Number, allowSeekAhead : Boolean ) : Void
secondsの位置まで動画を移動します。移動位置までまだ読み込んでいない場合、allowSeekAheadがtrueならばサーバに新しいリクエストを行います。
player.setVolume( volume : Number ) : Void
player.getVolume() : Number
音量は0~100の整数値です。
player.mute() : Void
player.unMute() : Void
player.isMuted() : Boolean
player.getVideoBytesLoaded() : Number
動画を読み込んだサイズを、バイト数で取得できます。
player.getVideoBytesTotal() : Number
動画の全体サイズを、バイト数で取得できます。
player.getVideoStartBytes() : Number
動画の読み込みを開始した位置を、バイト数で取得できます。
player.getCurrentTime() : Number
動画の再生を開始してからの秒数を取得できます。結果は25.355605
のように、小数点以下の時間も含みます。
player.getPlayerState() : Number
プレーヤーの状態を取得できます。この状態が変化した瞬間は、onStateChangeで捕捉できます。
値 | 意味 | 備考 |
---|---|---|
-1 | 未開始 (unstarted) |
|
0 | 終了 (ended) |
再生リストで再生している場合には、リストの最後まで再生が終了したことを意味する。 |
1 | 再生中 (playing) |
|
2 | 一時停止中 (paused) |
|
3 | バッファリング中 (buffering) |
|
5 | 頭出し済み (video cued) |
player.getPlaybackQuality() : String
再生中の動画の画質を取得できます。
player.setPlaybackQuality( suggestedQuality : String ) : Void
再生中の動画の推奨画質を設定し、新しい画質で動画を読み込み直します。設定可能な値は、
などで、かつその動画で有効な値である必要があります。
player.getAvailableQualityLevels() : Array
使用可能な画質の設定文字列を取得できます。戻り値は、
{ 2="small", 1="medium", 0="large"}
の形式です。
player.getDuration() : Number
player.getVideoUrl() : String
読み込み済み、または再生中の動画のYouTubeのURLを取得できます。
例:"http://www.youtube.com/watch?feature=player_embedded&v=xxxxxx"
player.getVideoEmbedCode() : String
読み込み済み、または再生中の動画の埋め込みコードを取得できます。
例:"<iframe src="http://www.youtube.com/embed/xxxxxx" title="YouTube video player" allowfullscreen="1" id="player" frameborder="0" height="240" width="320"></iframe>"
プレーヤーの状態が変わると発生します。新しい状態は、引数によって再生ステータスの値で渡されます。
動画の再生画質が変わると発生します。新しい再生画質は引数によって渡されます。
これは実際に再生画質が変更された時点で発生するイベントで、
のような理由にかかわらず発生します。動画がバッファリングされていると、再生中の動画の画質が変化する前に発生することもあります。
プレーヤーでエラーが起きると発生し、そのエラーの原因は下表のエラーコードで渡されます。
エラーコード | 意味 |
---|---|
0 | 不明なエラー。ネットワークに接続されておらず、データを受信できないときにもこのエラーとなる。 (プレーヤーには「エラーが発生しました。後でもう一度お試しください。詳細」と表示される) |
2 | 無効なビデオIDなど、無効なパラメータが含まれる。 |
5 | コンテンツをHTML5プレーヤーで再生できない。またはHTML5プレーヤーに関するエラーが発生した。 |
100 | 削除されたか非公開とされているため、動画が見つからない。 |
101 | 以下のいずれかの理由。 |
150 | |
160 | ライブイベントが終了している。 |
player.addEventListener( 'onError', 'onPlayerError' ); function onPlayerError( errorCode ) { }
<!-- プレーヤーを埋め込む要素 --> <div id="videoDiv"></div> <!-- Google AJAX API ローダーのライブラリをインクルードする --> <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> var player; var VIDEO_ID = 'xxxxxx' var PLAYER_ID = 'videoDiv'; // プレーヤーの状態が変化した function onPlayerStateChange( newState ) { switch( newState ) { case 0: break; } } // プレーヤーでエラーが発生した function onPlayerError( errorCode ) { switch( errorCode ) { case 100: break; } } // プレーヤーの準備が整った function onYouTubePlayerReady( playerId ) { player = document.getElementById( PLAYER_ID ); player.addEventListener( 'onStateChange', 'onPlayerStateChange' ); player.addEventListener( 'onError', 'onPlayerError' ); } // プレーヤーを読み込む function LoadPlayer() { var swfUrl = 'http://www.youtube.com/v/' + VIDEO_ID + '?enablejsapi=1'; var replaceElemId = PLAYER_ID; var width = '480'; var height = '295'; var swfVersion = '8'; var params = { allowScriptAccess: 'always' }; // 外部のドメインからのアクセスを許可 var atts = { id: replaceElemId }; // 埋め込みプレーヤーのID // YouTubeプレーヤーの埋め込み swfobject.embedSWF( swfUrl, replaceElemId, width, height, swfVersion, null, null, params, atts ); } google.load( 'swfobject', '2.2' ); google.setOnLoadCallback( LoadPlayer ); </script>
再生時に発生したエラーは、ブラウザのコンソールで確認できます。
広告の読み込みに失敗した場合に発生します。
エラーメッセージ | 原因 |
---|---|
Unable to request ads from server. Cause: Error #2048 errorCode: 1103 | 「http://googleads.g.doubleclick.net」への通信がブロックされた場合に発生します。 |
Unable to request ads from server. Cause: Error #2032 errorCode: 1103 | |
No ads were found in the ad response. At least one ad is required to be able to load or play. errorCode: 1001 |