- バックアップ一覧
- 差分 を表示
- 現在との差分 を表示
- ソース を表示
- ValidかつアクセシブルにYouTube（Flash）をHTMLに埋め込む方法 へ行く。
- 1 (2009-09-03 (木) 12:09:30)
ValidかつアクセシブルにYouTube（Flash）をHTMLに埋め込む方法
ValidかつアクセシブルにYouTube（Flash）をHTMLに埋め込む方法 †
ビデオの埋め込みなど用途が増えてきたので、あらためて検証してみました。
FlashをHTMLに埋め込むときの問題点： †
- Web標準的な問題
- IEではFlashを表示するには、embedタグを使用する。
- ただしこのembedタグは、Web標準的に非推奨の要素で、Validatorエラーになってしまう。代替テキスト用であるnoembedも同様。
- 代替テキストの問題
- アクセシビリティ的には、Objectタグ内に代替テキストを入れる必要がある。
- が、単にObjectタグ内に入れるだけだと、IEではそのまま表示されてしまう。（Flashと代替表示が並んで表示されてしまう）
- JavaScriptで書き出す場合の問題
- クリックしないとアクティブにならない問題があった（現在は解消されてきているらしい）ことから、JSで書き出す方法が主流になった背景がある。
- ただし、JSがオンでないと何も表示されず、アクセシブルではない。
- noscript内に静的に書けばよいのだが、最初のWeb標準的な問題がそのまま残る。。
SWFObject 2を使う †
SWFObject
http://code.google.com/p/swfobject/
SWFObjectは、JSで書き出すタイプのライブラリ。
現在のところこのタイプの事実上標準であるらしいです。
以前のバージョンだと、JSで書き出す仕様上、JSが必ずオンでないとFlashが表示されない状態でしたが、バージョン2になってからはJSオフの状態も考慮されており、上記をクリアする内容になっています。
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&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>
- 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>
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>
参考サイト †
