動画の再生 | YouTube Player API (SWFObject)

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>

Google AJAX APIから読み込む場合

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
    google.load( 'swfobject', '2.2' );
</script>

Flash Playerのバージョン確認

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 の状況確認で確認できます。

YouTubeプレーヤーの埋め込み

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」はオブジェクトを引数にとります。
embedSWF - SWFObject JavaScript API documentation

再生する動画の画質だけは、再生時に指定できません。よってプレーヤーの準備完了を待ってから、画質を設定します。

FlashファイルのURL (swfUrlStr)

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 動画コントロールを自動で隠す方法。
  • 0 … 隠さない
  • 1 … つねに自動で隠す。
  • 2 … プレーヤーのアスペクト比が16:9または4:3ならば、プログレスバーと動画コントロールを自動で隠す。さもなくば隠さない。
HTML5ではこれは無効となり、つねに自動で隠される Keeping youtube controls always visible in HTML5 iframe [autohide=0 depreciated] - Stack Overflow
2 ×
controls 動画コントロールを表示するかどうかと、iframe埋め込み版でコントロールの表示とプレーヤーの読み込みタイミングの定義。
  • 0 … コントロールを表示しない。iframeでは、すぐに読み込む。
  • 1 … コントロールを表示する。iframeでは、すぐに読み込む。
  • 2 … コントロールを表示する。iframeでは、ユーザーが再生を開始した後に読み込む。
1  
theme 動画コントロールの色。'dark'または'light' dark ×
autoplay 1ならば、読み込み時に自動的に再生する。

モバイル ブラウザでは機能しないことがある。モバイルの注意事項

ブラウザによっては、再生リストに対しては機能しないことがある。

0
cc_load_policy クローズド キャプション (字幕) を、
  • 0 … ユーザー設定に基づいて表示
  • 1 … 既定で表示
0  
iv_load_policy 動画アノテーションを、
  • 1 … 既定で表示
  • 3 … 既定では表示しない
1
color プログレスバーの色。'red'または'white' red  
disablekb 1ならば、キーボードによる操作が無効となる。 0  
end 再生を停止する秒数      
fs 1ならば、フルスクリーンボタンが表示される。 1  
listType プレーヤーに読み込む動画の決定方法を指定する。
  • playlist
  • search
  • user_uploads
     
list listTypeパラメータの値によって、ぞれぞれ次の意味となる。
  • playlist … YouTubeの再生リストID
  • search … 検索キーワード
  • user_uploads … YouTubeのユーザー
     
playlist 再生するビデオのIDのリスト。カンマで区切って複数指定できる。 VIDEO_IDも指定されている場合は、ここで指定するリストはその後に並ぶ。 VIDEO_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 ウィンドウの表示モード   ? ?
YouTube Embedded Players and Player Parameters - YouTube | Google Developers (英語)
YouTube 埋め込みプレーヤーとプレーヤーのパラメータ - YouTube | Google Developers (日本語)
AS2プレーヤー専用 (非推奨)
パラメータ 説明 既定値
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 クローズド キャプションを表示するかどうか  
YouTube 埋め込みプレーヤーのパラメータ - YouTube | Google Developers

埋め込みオブジェクトのパラメータ (parObj)

swfobjectのスクリプトを外部のサーバから読み込んで使用する場合には、埋込みオブジェクトのパラメータparObj{ allowScriptAccess: "always" }としてJavaScriptからの呼び出しを許可する必要があります。

パラメータ 有効な値 説明 既定値
play
  • true
  • false
動画の読み込み時にすぐに再生するかどうか true
loop
  • true
  • false
動画をくり返し再生するかどうか true
menu
  • true
  • false
   
quality
  • low
  • high
  • autolow
  • autohigh
  • best
レンダリングの質

(再生画質とは異なる)

 
scale
  • showall
  • noborder
  • exactfit
  • noscale
   
salign
  • l
  • t
  • r
  • tl
  • tr
   
wmode
  • window
  • opaque
  • transparent
ウィンドウの表示モード  
bgcolor #RRGGBB    
base   相対パスの基準となるディレクトリまたはURL  
swliveconnect
  • true
  • false
   
flashvars      
devicefont      
allowscriptaccess
  • always
  • sameDomain
  • never
外部ドメインのスクリプトからのアクセスを許可するかどうか  
seamlesstabbing      
allowfullscreen
  • true
  • false
フルスクリーン モードを有効にするかどうか  
allownetworking      
Flash OBJECT and EMBED tag attributes - Adobe

埋め込みオブジェクトの属性 (attObj)

埋込みオブジェクトの属性attObjでプロパティ名をidとして{ id: "playerID" }とすると、埋込みオブジェクトのid属性がplayerIDとなります。

プレーヤーの準備完了の通知 (onYouTubePlayerReady)

プレーヤーの準備が整うと、onYouTubePlayerReady()という名前のコールバック関数が呼び出されます。よってこれを実装し、プレーヤーへのアクセスはこの関数の呼び出しを待って行います。

onYouTubePlayerReady( playerid )

引数のplayeridには、FlashファイルのURLパラメータplayerapiidで指定した値がURLエンコードされて渡されます。

この関数は、グローバルスコープとして定義する必要があります。

プレーヤーの制御

動画の再生

4つの再生関数の関係
処理方法 \ 指定方法 YouTube動画ID YouTubeプレーヤーURL
読み込みのみ cueVideoById cueVideoByUrl
読み込んで再生 loadVideoById loadVideoByUrl
キュー関数 - YouTube JavaScript Player API Reference | YouTube IFrame API | Google Developers

YouTube動画IDから

指定された動画を読み込んで再生します。

player.cueVideoById(
    videoId : String,          // YouTube動画ID
    startSeconds : Number,     // 再生を開始する位置 [秒]
    suggestedQuality : String  // 動画の推奨再生画質
    )
player.loadVideoById(
    videoId : String,
    startSeconds : Number,
    suggestedQuality : String
    )

YouTubeプレーヤーのURLから

指定された動画のサムネイルを読み込み、再生する準備をします。

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のように、小数点以下の時間も含みます。

getPlayerState

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

再生中の動画の推奨画質を設定し、新しい画質で動画を読み込み直します。設定可能な値は、

  • small
  • medium
  • large
  • hd720
  • hd1080
  • highres
  • default

などで、かつその動画で有効な値である必要があります。

使用可能な画質の取得

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>"

イベント

onStateChange

プレーヤーの状態が変わると発生します。新しい状態は、引数によって再生ステータスの値で渡されます。

onPlaybackQualityChange

動画の再生画質が変わると発生します。新しい再生画質は引数によって渡されます。

これは実際に再生画質が変更された時点で発生するイベントで、

  • ユーザーの操作により、再生画質が変更された。
  • プログラムのsetPlaybackQuality()の呼び出しにより、再生画質が変更された。
  • 新しく再生された動画の再生画質が以前と異なっていた。

のような理由にかかわらず発生します。動画がバッファリングされていると、再生中の動画の画質が変化する前に発生することもあります。

onError

プレーヤーでエラーが起きると発生し、そのエラーの原因は下表のエラーコードで渡されます。

エラーコードの解説
エラーコード 意味
0 不明なエラー。ネットワークに接続されておらず、データを受信できないときにもこのエラーとなる。
(プレーヤーには「エラーが発生しました。後でもう一度お試しください。詳細」と表示される)
2 無効なビデオIDなど、無効なパラメータが含まれる。
5 コンテンツをHTML5プレーヤーで再生できない。またはHTML5プレーヤーに関するエラーが発生した。
100 削除されたか非公開とされているため、動画が見つからない。
101 以下のいずれかの理由。
  • 埋め込みが禁止されている。
  • 視聴地域が制限されている。※1
    (プレーヤーには「この動画はご利用いただけません。」と表示される)
  • 不適切なコンテンツと認定されており、セーフモードが有効となっている。
150
160 ライブイベントが終了している。
※1 視聴地域の制限は、海外のプロキシサーバを経由してアクセスすることで検証できます。それには、たとえばStealthyのようなツールが有用です。
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>

トラブル対処法

再生時に発生したエラーは、ブラウザのコンソールで確認できます。

Ad adLoadError error

広告の読み込みに失敗した場合に発生します。

エラーメッセージ 原因
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