ValidかつアクセシブルにYouTube(Flash)をHTMLに埋め込む方法 http://www.ark-web.jp/accessibility/2274.html

ValidかつアクセシブルにYouTube(Flash)をHTMLに埋め込む方法
[edit]

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

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

[edit]

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

[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 を使います。

<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> 

cap.png

最後に、

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> 
[edit]

参考サイト

投稿者小森? | パーマリンク

| このエントリをはてなブックマークに登録

添付ファイル: filecap.png 1029件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2009-09-03 (木) 12:22:16 (2522d)

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