so-zou.jp

動画の再生 | 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 ) 2023/08/15以降、非推奨となり効果はなくなった August 15, 2023 - YouTube Embedded Players and Player Parameters  |  YouTube IFrame Player API  |  Google for Developers	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

• 検索
  • Web検索
    • Custom Search
  • 画像検索
  • 動画検索
  • ローカル検索
  • 地図検索
  • ニュース検索
• 翻訳
• チャート
  • Image (静的)
  • Interactive (動的)
    • Table
    • Geomap
• Google マップ
  • Static Maps
  • ジオコーディング
• 位置情報
• Google サジェスト
• Google Analytics
• YouTube
  • Player API (再生)
  • Data API (検索)
• Web Elements
  • YouTube News Element

• お問い合わせ
• プライバシーポリシー
• サイトマップ