Objectで動画の埋め込み


前章(→こちら)で動画を編集し、保存しました。ファイルの種類は「Windows media ビデオファイル」(拡張子.wmv)です。

この動画をホームページに埋め込みます。

さて、その方法ですが、「embed」や「video」、「object」と、いろいろ有る様です。どう使い分けたらよいのでしょう。これは、ホームページを記述しているHTMLの言語や種類、さらにブラウザの種類によります。

まず、よしじいのホームページ作成用HTML言語はXHTML 1.0 Transitionalですから、この言語のタグでなくてはなりません。その点で、「embed」、「video」は使えません。 なお、「embed」タグは再生用のプレーヤーを特定しないと言う特長を持っている反面、IEでは推奨されていないという欠点もあります。また、「video」タグはHTML5で使用されている動画埋め込み用タグで時代先端のものではありますが、それだけにまだ対応できていないブラウザが多いようです。


1.「object」の基本的な記述

「object」タグの基本的な記述は下の通りです。

<object data="埋め込む動画のファイル名やURL" type="MIME Type" 
        width="必要なら幅指定" height="必要なら高さ指定">
    <param name="src" value="埋め込む動画のファイル名やURL" />
</object>

●「埋め込む動画のファイル名やURL」を2ヶ所記述しています。<object>内がMozilla系で、<param>内がIE向けで、両方必要です。・・・

●1行目「MIME Type」・・・データのファイル形式を示す識別子の事で、Windows Media Videoのデータ(拡張子は.wmv)のMIME Typeは「video/x-ms-wmv」です。

他にも多くのMIME Typeが存在しますが、ここでは省略します。

ネット上で紹介されています。

●<param>タグ中の「name」属性として「scr」を使いました。同じ目的で「url」、「video」を「name」属性として使う場合もありますが、今回は「src」以外はうまくいきませんでした。

●<param>タグの働き・・・objectの実行に必要な設定値をparameterと言います。その設定のためのタグです。

 

それでは実際にHTMLを記述してみましょう。

下にHTML文書中のbody部分を示します。で囲んだ部分が動画埋め込み部分です。 なお、動画ファイルの名前は「dooga」フォルダの中の「bp7.wmv」です。

プログラム

動きは右のボタンから確認して下さい。ボタン

セキュリティ警告が出て動画プレイヤーが表示されない場合は、ActiveXを実行できるようにしてください。


ところで、動画は自動でスタートし、最後まで来たら自動で止まりました。又、プレイヤーのボタン類も表示されています。しかし、これらの設定は<param>タグ中で指定し変更する事ができます。

Windows Media Playerでの使用における代表的な<param>タグを試してみます。

動画を自動スタートさせない      「autostart」を「false」に設定する
ループで動画再生する         「loop」を「true」に設定する
コントロールパネルを表示する     「showcontrols」を「true」に設定する
再生状態を表示する           「showstatusbar」を「true」に設定する

動きは右のボタンから確認して下さい。ボタン

セキュリティ警告が出て動画プレイヤーが表示されない場合は、ActiveXを実行できるようにしてください。

これ以外にも、<param>タグとしては、オーディオコントロールを表示「showaudiocontrols→true」、トラックコントロールを表示「showtracker→true」、があります。ただし、IEのバージョンによってparamの一部は使用できないので要注意です。


ここまでの作業で動画の埋め込みができる様になりましたが、ブラウザのセキュリティ対策が効いている場合は、本来動画が来る場所にはページ立ち上げ時には何も表示されません。これは回避できません。無理やり回避してもセキュリティ破りになってしまいます。

やむを得ませんので、ページ立ち上げ時にセキュリティが効いている時には、この動画の代わりに「プレイヤー画面が出ていない場合は、ActiveXコントロールを実行してください」と表示してやります。

方法は、<object>タグの中に、ActiveXが無効(実行できない)場合の代わりのアクションを記述しておくと言うものです。

<object data="埋め込む動画のファイル名やURL" type="MIME Type" 
        width="必要なら幅指定" height="必要なら高さ指定">
    <param name="src" value="埋め込む動画のファイル名やURL" />
    変わりのアクション
</object>

代わりのアクションとしては、文章表示、静止画表示、動画ページへのリンクなどがあります。

例えば代替えとして青太字で「プレイヤー画面が出ていない場合は、ActiveXコントロールを実行してください」と表示したい場合は下の様になります。<object>~</object>の記述例です。で囲んだ部分がです。

プログラム

動きは右のボタンから確認して下さい。ボタン

代替えとしてイラスト、画像を表示したい場合は下の様になります。<object>~</object>の記述例です。で囲んだ部分がです。

プログラム

動きは右のボタンから確認して下さい。ボタン


動画の埋め込みには成功しましたが、初期のスクリーンが真っ黒です。これはWindows Media Video(拡張子.wmv)ではやむを得ない事の様です。

しかしもう少し使い勝手を考えた表示をしたいですね。

そこで考えたのが、スタートボタンを押す前のプレーヤーはスクリーン部分を透明にして、バックグラウンドを表示させてやろうと言う方法です。

HTML文書での記述としては、<param>タグの一つとして初期のスクリーンを透明にする「transparentatstart」を追加します。 又、バックグランドをスタイルシートで指定する事になりますので、このobjectにはidを付けておきます。下ので囲んだ2ケ所です。

プログラム

動きは右のボタンから確認して下さい。ボタン

ページトップへ

←前ページへ               目次へ戻る               

コーナー