ValidかつアクセシブルにYouTube（Flash）をHTMLに埋め込む方法 †

ビデオの埋め込みなど用途が増えてきたので、あらためて検証してみました。

↑

[edit]

FlashをHTMLに埋め込むときの問題点： †

Web標準的な問題
- IEではFlashを表示するには、embedタグを使用する。
- ただしこのembedタグは、Web標準的に非推奨の要素で、Validatorエラーになってしまう。代替テキスト用であるnoembedも同様。
代替テキストの問題
- アクセシビリティ的には、Objectタグ内に代替テキストを入れる必要がある。
- が、単にObjectタグ内に入れるだけだと、IEではそのまま表示されてしまう。（Flashと代替表示が並んで表示されてしまう）
JavaScriptで書き出す場合の問題
- クリックしないとアクティブにならない問題があった（現在は解消されてきているらしい）ことから、JSで書き出す方法が主流になった背景がある。
- ただし、JSがオンでないと何も表示されず、アクセシブルではない。
- noscript内に静的に書けばよいのだが、最初のWeb標準的な問題がそのまま残る。。

↑

[edit]

SWFObject 2を使う †

SWFObject
http://code.google.com/p/swfobject/

SWFObjectは、JSで書き出すタイプのライブラリ。
現在のところこのタイプの事実上標準であるらしいです。

以前のバージョンだと、JSで書き出す仕様上、JSが必ずオンでないとFlashが表示されない状態でしたが、バージョン2になってからはJSオフの状態も考慮されており、上記をクリアする内容になっています。

↑

[edit]

SWFObject 2 のHTMLソース †

ダウンロードすると、index.html と index_dynamic.html が入っていますが、index_dynamic.html は旧バージョン形式の「jsオン時のみ対応」用なので、index.html を使います。

idは適宜好みで書き換えます。
IE用とそれ以外（Firefox、Safari等）用のObjectを2つ記述するかたちなので、Flashへのパスとサイズも2箇所記述します。
代替テキストも忘れずに書きます。映像の内容をわかりやすく書きます。

<object id="swf" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="480" height="385"> 
	<param name="movie" value="http://www.youtube.com/v/XAKroNeQhf0&amp;hl=ja&amp;fs=1&amp;" /> 
	<!--[if !IE]>--> 
	<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/XAKroNeQhf0&amp;hl=ja&amp;fs=1&amp;" width="480" height="385"> 
	<!--<![endif]--> 
	<div> 
		<h2>Flashプラグインがないユーザへの代替</h2> 
		<p>代替テキスト：かわいい子猫のムービーです。</p>
		<p>ムービーをご覧になるにはFlash Playerのインストールが必要です。</p> 
		<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p> 
	</div> 
	<!--[if !IE]>--> 
	</object> 
	<!--<![endif]--> 
</object>

こんな感じ。
- http://www.ark-web.jp/accessibility/misc/SWFObject2/test1.html

IEでもちゃんと表示されます。代替表示も表示されません。
JSオフのときも問題なく表示
Flashがインストールされていないときは、下記のような代替表示が出るようになります

最後に、

1）YouTubeはビデオのURLに「&」が含まれているので、「&」は

&amp;

と実体参照に置き換えます。
これでHTMLValidatorエラーは消えます。

2）YouTubeのコードにはフルスクリーン化などの制御に使う2つのパラメータがあるので、これを記述します。

<param name="allowFullScreen" value="true"></param> 
<param name="allowscriptaccess" value="always"></param>

ただ、これもIE用とその他で2箇所に書かないとダメみたいでした。

<object id="swf" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="480" height="385">
	<param name="movie" value="http://www.youtube.com/v/XAKroNeQhf0&amp;hl=ja&amp;fs=1&amp;" />
	<param name="allowFullScreen" value="true"></param> 
	<param name="allowscriptaccess" value="always"></param>
	<!--[if !IE]>-->
	<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/XAKroNeQhf0&amp;hl=ja&amp;fs=1&amp;" width="480" height="385">
	<param name="allowFullScreen" value="true"></param> 
	<param name="allowscriptaccess" value="always"></param>
	<!--<![endif]-->
	<div> 
		<h2>Flashプラグインがないユーザへの代替</h2> 
		<p>代替テキスト：かわいい子猫のムービーです。</p>
		<p>ムービーをご覧になるにはFlash Playerのインストールが必要です。</p> 
		<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p> 
	</div> 
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object>

3）なお、このままでも再生に問題ないですが、embedを使っていたときはIEでできていたFlash Playerの自動インストールや自動バージョンアップなどができなくなってしまうので、SWFObjectを使い、head内に以下のように書いておけば、SWFObject側がバージョンチェックをしてくれますので、入れておきましょう。

<script type="text/javascript" src="swfobject.js"></script> 
<script type="text/javascript"> 
swfobject.registerObject("swf", "9.0.0", "expressInstall.swf");
</script>