- 画像や音声をWeb上で再生する -

ここではWebサイト上での画像や音声の再生方法の説明をします。 写真やイラストの掲載、動画や音声データの再生に必須のタグです。


■<IMG>タグについて
Webサイト上で画像を掲載するには、<IMG>タグを使用します。 では基本的な形と使用可能属性について説明しましょう。

・記述タグ
<IMG src="画像ファイルのURL">

使用可能属性 :
width - 表示する画像の横幅
height - 表示する画像の縦幅
alt - 画像が表示出来ない場合に表示されるテキスト
title - 画像のタイトル(ポップアップ表示)

一応「<IMG src="画像ファイルのURL">」だけでも画像の表示は出来ます。
ですが、為るべく属性指定する事をお勧めします。属性指定の例は↓です。

・記述例&表示例
記述例 :
<IMG src="./sample.jpg"width="400px"height="300px"alt="サンプル画像"title="サンプル画像">

表示例 :
サンプル画像



と言う感じに表示されます。画像の横幅(width)等は画像ファイルのサイズ通りに設定しましょう。


■リンクに応用する
画像をリンクに応用する方法です。画像をクリックするとジャンプする様にします。 メニューボタン画像等を入手した時に使うタグですね。

・記述タグ
<A href="リンク先URL"><IMG src="画像ファイルのURL"></A>


・記述例&表示例
記述例 :
<A href="./index.html">
<IMG src="./sample.jpg"width="400px"height="300px"alt="サンプル画像"title="サンプル画像">
</A>

表示例 :
サンプル画像

と言う感じに表示されます。文字の代わりに画像を用いてるワケですね。
因みに上記サンプル画像をクリックすると、縮小前の画像を見れます。

補足ですが、画像の周囲にリンク枠が表示されていて、それが邪魔は場合は消す方法があります。
<IMG>タグに「border="0"」を追加するだけです。ただ、これについてはHTML5では廃止だそうです。
なので枠を消したい場合はCSSでの指定で消す事をお勧めします。


■<EMBED>タグについて
動画ファイルや音声ファイル等をWebサイト上で再生するには<EMBED>タグを使用します。 このタグが多分一番汎用性が高い…のかな?^^;

・記述タグ
<EMBED src="ファイルのURL">

使用可能属性 :
width - 表示される部分の横幅
height - 表示される部分の縦幅
autostart - 自動再生の設定。true(自動再生する)、false(自動再生しない)
loop - ループ再生の設定。true(ループする)、false(ループしない)
repeat - 再生を繰り返す回数の指定
type - 再生するファイルのMIMEタイプの指定
hidden - コンソールパネルの表示設定。true(表示する)、false(表示しない)

これも一応「<EMBED src="ファイルのURL">」だけでも表示、再生は出来ます。
ですが、やはりこちらも属性指定する事をお勧めします。属性指定の例は↓です。

・記述例&表示例
記述例 :
<EMBED src="./kanon.mid"type="audio/midi"alt="サンプル音声"autostart="false"loop="true">

表示例 :



と言う感じなります。上記例ではmidiファイル(音声ファイル)の再生をしてるので、横幅(width)等の設定はしていません。 コンソールパネルが表示されているので、自動再生はOFFです。


■補足説明とMIMEタイプについて
上で少し触れましたが、MIMEタイプという物が有ります。 ここではそれの説明と、後は<EMBED>タグで再生可能なファイル等の説明をします。

・再生可能なファイル形式
拡張子 : ファイル形式

mid : MIDIファイル(音声)
wav : WAVEファイル(音声)
mp3 : MP3ファイル(音声)
aif : AIFFファイル(音声)
mpg : MPEGファイル(動画)
swf : FLASHファイル(動画)
mp4 : MPEG4ファイル(動画)

と、幾つか掲載してみましたが、実はこの他にも色々と有ります。
と言うより、対応形式については閲覧者のブラウザ次第になってしまうんです^^;
ブラウザにインストールされているプラグイン次第なんですよね。

・MIMEタイプ
拡張子 : MIMEタイプ

mid : audio/midi
wav : audio/wav
mp3 : audio/mp3
aif : audio/aiff
mpg : video/mpeg
swf : application/x-shockwave-flash
mp4 : video/mpeg

上記再生可能ファイル形式で載せた物のMIMEタイプのみ掲載してみました。
これについても当然ですが、ファイル形式分存在するので相当な量が有ります。

上の方でも少し触れましたが、<EMBED>タグでの再生は、閲覧者のブラウザに動作が左右されます。
閲覧者の使用しているブラウザにインストールされているプラグイン次第なので、そこを考慮に入れると良いです。 例えば「再生するファイルの形式は、為るべく一般的なファイル形式にする」とかですね。

BACK< HTML講座目次 >NEXT