#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&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>
 
 これも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>
 
 - こんな感じ。
 -- 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]]
 
 

トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

アークウェブのサービスやソリューションはこちら