HOME > Tips > Flash > Flash コンテンツを (X)HTML に埋め込む「SWFObject」

Flash コンテンツを (X)HTML に埋め込む「SWFObject」

  • Author:920

Dreamweaver(CS3)でFlashコンテンツを埋め込むと、「HTML Validator 」で7個のエラーが表示されます。

そこで、代替コンテンツ表示機能などで、Flash 埋め込み方法のデファクトスタンダードになりつつある、「SWFObject」のバージョン2を使用することにします。

「SWFObject」バージョン2には、基本的に2種類の記述の方法があります。

ひとつは、JavaScriptがOFFの場合は、代替コンテンツを表示する従来の方法で、新たにJavaScriptをOFFにされても、表示できる方法が追加されました。

記述は比較的簡単ですし、(X)HTMLとJavaScriptのコードを生成してくれる「SWFObject generator」も配布されています。

「SWFObject generator」は、HTML版とAdobe AIR版があります。

<配布サイト>

swfobject - Google Code

配布サイトは英語ですが、「Media Technology Labs (MTL)」で詳細に解説されています。

「SWFObject generator」で生成したコードの例 1

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  3. <head>
  4. <title></title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.  
  7. <script type="text/javascript" src="js/swfobject.js"></script>
  8. <script type="text/javascript">
  9.   var flashvars = {};
  10.   var params = {};
  11.   var attributes = {};
  12.   swfobject.embedSWF("potato_typo-2.swf", "flash-container", "700", "120", "8.0.0", "expressInstall.swf", flashvars, params, attributes);
  13. </script>
  14.  
  15. </head>
  16. <body>
  17.  
  18. <div id="flash-container">
  19.   <a href="http://www.adobe.com/go/getflashplayer">
  20.     <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
  21.   </a>
  22. </div>
  23.  
  24. </body>
  25. </html>

「SWFObject generator」で生成したコードの例 2

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  3. <head>
  4. <title></title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.  
  7. <script type="text/javascript" src="js/swfobject.js"></script>
  8. <script type="text/javascript">
  9.   swfobject.registerObject("myFlashContent", "8.0.0", "expressInstall.swf");
  10. </script>
  11.  
  12. </head>
  13. <body>
  14.  
  15. <div>
  16.   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="700" height="120" id="myFlashContent">
  17.     <param name="movie" value="potato_typo-2.swf" />
  18.     <param name="wmode" value="transparent" />
  19.     <!--[if !IE]>-->
  20.     <object type="application/x-shockwave-flash" data="potato_typo-2.swf" width="700" height="120">
  21.     <param name="wmode" value="transparent" />
  22.     <!--<![endif]-->
  23.       <a href="http://www.adobe.com/go/getflashplayer">
  24.         <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
  25.       </a>
  26.     <!--[if !IE]>-->
  27.     </object>
  28.     <!--<![endif]-->
  29.   </object>
  30.  
  31. </div>
  32. </body>
  33. </html>

このサイトのトップページの例

  1. <head 部分>
  2.  
  3. <script type="text/javascript" src="/js/swfobject.js"></script>
  4. <script type="text/javascript">
  5.   var minVersion = "8.0.0";
  6.   var flashvars = {};
  7.   var params = {};
  8.   params.wmode = "transparent";
  9.   var attributes = {};
  10.   attributes.id = "title-flash";
  11.   swfobject.embedSWF("potato_typo.swf", "title-flash", "920", "120", minVersion, "expressInstall.swf", flashvars, params, attributes);
  12. </script>
  13.  
  14.  
  15. <body 部分>
  16.  
  17. <div id="title-flash">
  18. <h1 id="blogTitle"><a href="/"><img src="/images/logo.gif" alt="Potato Tips with Shinjaga" width="300" height="75" /></a></h1>
  19. <script type="text/javascript" src="/js/get-flash.js"></script>
  20. <noscript>
  21. <div class="js-message">
  22. <p>「JavaScript」を有効にしてください。</p>
  23. </div>
  24. </noscript>
  25. </div>
  26.  
  27.  
  28. <get-flash.js>
  29.  
  30. document.write('<div class="get-flash clearfix">');
  31. document.write('<div class="get-flash-button">');
  32. document.write('<a href="http://www.adobe.com/go/getflashplayer">');
  33. document.write('<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />');
  34. document.write('</a>');
  35. document.write('</div>');
  36. document.write('<div class="get-flash-message">');
  37. document.write('<p>Flash Playerのバージョン: ' + get_flash_version() + '</p>');
  38. document.write('<p>このページをご覧いただくためには、Adobe Flash Player ' + minVersion + '以降のバージョンが必要です。</p>');
  39. document.write('<p>ボタンをクリックして、Adobe社より、最新の「Flashプレイヤー」を入手しください。</p>');
  40. document.write('</div>');
  41. document.write('</div>');
  42.  
  43.  
  44. // ↓ 「http://groundwalker.com/blog/2007/08/flash_version_detection_with_javascript.html」で紹介のスクリプトをコピー
UP