ホームページ作成SEOマニアックス

FLV動画を埋め込みしたページをインターネットエクスプローラー7で表示した後に閉じるとスクリプトエラーが発生することの回避手順。

• ホームページ作成SEOマニアックス
• 初級編
• 中級編
• 上級編
• お問い合わせ
• リンク集

当サイトで紹介しているFLV動画の埋め込み手順で、JW FLV MEDIA PLAYER 4.1を使用したFLVファイルの埋め込み手順を紹介したが、IE7で表示させた時、FLVを表示したページを右上のXで閉じるとスクリプトエラーが発生すると言うメールを頂きました。
（Sさん、ありがとうございましたm(__)m）

私はメインブラウザにFireFoxを使用していたので全くその事に気付いていませんでした（汗）

と言うか、そのような現象はIE以外のブラウザでは起きないのですが、IE7だとそのような現象に陥るようです。
IEは日本人の7割が使用しているブラウザですので対応しないわけには行きませんねぇ（滝汗）

と言うわけで、早速スクリプトエラーの対応策と、HTML文法でエラーにならない書式を...

JW FLV MEDIA PLAYER 4.1を使用した手順になりますので、FLV動画の埋め込み手順の前半に従いJW FLV MEDIA PLAYERのダウンロードをしておいてください。

JW FLV MEDIA PLAYER のバージョンは2009年1月現在4.3です。

ダウンロードしたファイルの中で使用するのは

player.swf （プレーヤー本体）

swfobject.js （オブジェクトを表示させる為のスクリプト）

の2つになります。

当サイトの例ではplayer.swf （プレーヤー本体）を、imgと言うディレクトリに転送しています。

また、swfobject.js （オブジェクトを表示させる為のスクリプト）は、jsと言うディレクトリを作り転送しています。

HTMLの書式は、文法を全く気にしないという方は下記をFLV動画を表示させたい部分に記述してください

<div id="flvfile">動画が表示されていない方は<a href="http://www.macromedia.com/go/getflashplayer">Flash Playerをインストール</a>してください</div>
<script type="text/javascript">
<script type="text/javascript" src="/js/swfobject.js"></script>
var s1 = new SWFObject("/img/player.swf","ply","320","260","7","#FFFFFF");
s1.addParam("allowscriptaccess","always");
s1.addParam("allowfullscreen","true");
s1.addParam("flashvars","file=320.flv&image=320.jpg&logo=maniax-s.png&fullscreen=true");
s1.write("flvfile");
</script>

1行目：Flash Playerのダウンロード先

2行目：swfobject.js の保存先

4行目：FLVプレーヤーの保存先と画面サイズ、背景色。
var s1 = new SWFObject("player.swfまでのパス","ply","横幅","縦幅","FlashPlayerのバージョン","背景色");

例では320x240のサイズの動画を埋め込みますが、縦幅が260になっている意図は、プレーヤーの操作パネル分の20を加算している為です。
また、バージョンは7にして有るのは、下位互換にするためです。

5行目：always 若しくは samedomain
詳しくはADOBEサポートデータベース[233448]を参照

6行目：フルスクリーン可能

7行目：FLVファイルのパス、背景画像、ロゴ、フルスクリーン可

s1.addParam("flashvars","file=FLVファイルのパス&image=背景画像のパス&logo=ロゴのパス&fullscreen=true");

ロゴはpngやgifなどの透過画像を使うと良いでしょう。ロゴを使わない時はこの書式は書かなくて良いです。

7行目：7行目のflvfileは、1行目のdivに記したid="flvfile" を入力します。

HTML文法上、内に文字を書くのは良くないので、上記の書式例の3行目以降をスクリプト化して読み込ませるようにします。

var s1 = new SWFObject("/img/player.swf","ply","320","260","7","#FFFFFF");
s1.addParam("allowscriptaccess","always");
s1.addParam("allowfullscreen","true");
s1.addParam("flashvars","file=320.flv&image=320.jpg&logo=maniax-s.png&fullscreen=true");
s1.write("flvfile");

テキストエディターに上記を記し、ファイル名を**.jsとして保存します。
ここでの例は、320-3.jsとして保存しています。

320-3.js は、任意の所に転送してください。
ここではこの記事と同じディレクトリ（http://www.seo-maniax.com/flv-wmv/）に保存しています。

準備が出来たらHTMLタグには次のように記述します

<div id="flvfile">動画が表示されていない方は<a href="http://www.macromedia.com/go/getflashplayer">Flash Playerをインストール</a>してください</div>
<script type="text/javascript" src="/js/swfobject.js"></script>
<script type="text/javascript" src="320-3.js"></script>

player.swf　swfobject.js　320-3.js の転送先やHTML記述に間違いが無ければ下のように表示されるはずです。

これでIE7で見た後にｘで閉じてもスクリプトエラーは出なくなるはずです。

つうか、やっぱIEと言うブラウザはエラーが多すぎて好きになれない...（汗）

<<<前の記事へ | 次の記事へ>>> このページのトップへ

Copyright 2008-2010 ホームページ作成SEOマニアックス All Rights Reserved.