#topicpath
* ValidかつアクセシブルにYouTube（Flash）をHTMLに埋め込む方法 [#ecbee1b2]
ビデオの埋め込みなど用途が増えてきたので、あらためて検証してみました。
** FlashをHTMLに埋め込むときの問題点： [#q0b18a37]
- Web標準的な問題
-- IEではFlashを表示するには、embedタグを使用する。
-- ただしこのembedタグは、Web標準的に非推奨の要素で、Validatorエラーになってしまう。代替テキスト用であるnoembedも同様。
- 代替テキストの問題
-- アクセシビリティ的には、Objectタグ内に代替テキストを入れる必要がある。
-- が、単にObjectタグ内に入れるだけだと、IEではそのまま表示されてしまう。（Flashと代替表示が並んで表示されてしまう）
- JavaScriptで書き出す場合の問題
-- クリックしないとアクティブにならない問題があった（現在は解消されてきているらしい）ことから、JSで書き出す方法が主流になった背景がある。
-- ただし、JSがオンでないと何も表示されず、アクセシブルではない。
-- noscript内に静的に書けばよいのだが、最初のWeb標準的な問題がそのまま残る。。
** SWFObject 2を使う [#be632910]
SWFObject
http://code.google.com/p/swfobject/
SWFObjectは、JSで書き出すタイプのライブラリ。
現在のところこのタイプの事実上標準であるらしいです。
以前のバージョンだと、JSで書き出す仕様上、JSが必ずオンでないとFlashが表示されない状態でしたが、バージョン2になってからはJSオフの状態も考慮されており、上記をクリアする内容になっています。
** SWFObject 2 のHTMLソース [#fa9e1f2e]
ダウンロードすると、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&hl=ja&fs=1&" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/XAKroNeQhf0&hl=ja&fs=1&" 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に「&」が含まれているので、「&」と実体参照に置き換えます。
これでHTMLValidatorエラーは消えます。
2）YouTubeのコードにはフルスクリーン化などの制御に使う2つのパラメータがあるので、これを記述します。
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
これも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&hl=ja&fs=1&" />
<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&hl=ja&fs=1&" 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>
- こんな感じ。
-- http://www.ark-web.jp/accessibility/misc/SWFObject2/test1.html
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>
** 参考サイト [#yd518bb7]
- [[SWFObject v2.0 ドキュメント日本語訳 : Media Technology Labs (MTL) : メディアテクノロジーラボ ブログ>http://mtl.recruit.co.jp/blog/2007/10/swfobject_v20.html]]
-
- [[SWFObject 2を用いたFlash Playerのバージョン検知とSWFファイルの埋め込み | デベロッパーセンター>http://www.adobe.com/jp/devnet/flashplayer/articles/swfobject_print.html]]
- [[swfobject.js の expressInstall.swf 使用法 - 左脳Script>http://n-yagi.0r2.net/script/2009/06/swfobjectjs_expressinstallswf.html]]
- [[小粋空間: YouTube の Embed タグを XHTML valid にする>http://www.koikikukan.com/archives/2007/01/05-003003.php]]
