マルチメディア

画像、音、映像(動画)

Webコンテンツとしては、コンピュータにおいて扱うことのできるさまざまな情 報形態を用いることができる。例えば、画像、音、映像(動画)といった媒体 である。それらをどのようにHTML文書から提示するかについて説明する。ここで は、画像(静止画)ファイル、音ファイル、映像(動画)ファイルを、マルチメディ アコンテンツと呼ぶ。

リンク

画像、音、映像はそれぞれ、ファイルの形にできる。これに対して、リンクを張 ると、プラグインソフトウェアが正しく設定されていれば、ブラウザとは別にプ ラグインソフトが起動し、見て、聞くことができる。

なお、音ファイルや画像ファイルへのリンクは、前期の演習で経験済みのはずで ある。サイズの大きなファイルは、ファイルサイズを明記しておくこと。

音ファイル
画像ファイル
動画ファイル(AVI)3.7Mbyte
動画ファイル(MPEG)276Kbyte
<a href="media/sample.wav">音ファイル</a><br>
<a href="media/sample.jpg">画像ファイル</a><br>
<a href="media/sample.avi">動画ファイル(AVI)</a><br>
<a href="media/sample.mpg">動画ファイル(MPEG)</a><br>

ストリーミング

マルチメディアコンテンツへのリンクは、通常ファイル全ての転送が終らないと、 再生できない。しかし、音や映像は時系列データであり、転送が全て終了しなく ても、転送が終った時間的に最初の方にあるデータを、転送と同時に再生できれ ば、待時間が少なくてよい。このようなデータ転送と同時に再生を行うことを、 ストリーミングと呼ぶ。

マルチメディアコンテンツのストリーミングには、コンテンツのファイルや再生 ソフトがストリーミングに対応していなければならない。

インライン

ブラウザ上にそのまま画像、音、動画を張り付けることを、インラインと呼 ぶ。画像のインライン表示はブラウザ自身の機能として実現されているが、動画 や音のインライン再生は、プラグインソフトの状態によって、見え方、聴こえ方 が変わって来るので、不特定多数にブラウズしてもらうときには、インライン再 生は採用しないほうが無難である。また、ストリーミング再生を行えないプラグ インソフトの場合は、ダウンロードが完了してからでないと再生が行えないため、 インライン再生は不適切である。

代表的なマルチメディアコンテンツのファイル形式

画像

ファイル形式特徴用途備考
GIF(ジフ)2〜256色バナー、線画 特許問題(Impress PC Watch) が一旦終了し、今後さらに使用可能ソフトが広がる? ただし、ま だまだ予断を許さない
PNG(ピング)2色〜フルカラーGIFにとって代わる 色数が同じであれば GIFよりファイルサイズが小さくなる
JPEG(ジェイペグ)フルカラー写真、自然画 圧縮率を上げるとファイルサイズを小さくできる(ただし品質は劣化)

動画

ファイル形式ファイル拡張子特徴備考
Windows Video (AVI) avi Microsoft Windows系OSにて標準の動画ファイル コーデック(CODEC:圧縮伸長アルゴリズム)によって画質や圧縮率が異なる
Windows Media Technology asf, wmv MPEG4をベースとしたマルチメディアデータ圧縮フォーマット ストリーミング可能
圧縮率可変
MPEG（エムペグ, MPEG-1) mpg, mpeg 動画および音声圧縮フォーマット ビデオCDに採用、圧縮率可変
リアルメディア rm 動画および音声圧縮フォーマット ストリーミング可能、高圧縮率、圧縮率可変

コーデック(Codec)

映像(動画)や音声などのメディアファイルを圧縮し、伸長して再生するた めの取り決めをコーデック(Codec)と呼ぶ。コーデックをパソコンにインストー ルすると、そのコーデックで圧縮したファイルを再生したり、適切なソフトと 組み合わせて圧縮することが、できるようになる。Windows Media Player や Real Player はプレーヤと同時にコーデックもインストールしている。

パソコンやインターネット上の動画でよく使われるコーデック

パソコンやインターネット上の音声でよく使われるコーデック

メディアファイル作成の実際

WEB公開に向けたメディアファイルを作成するには...

DivX

最近よく使われるようになった、高品質、高圧縮率を誇るコーデック。 自由にダウンロードし無料で利用できるバージョンが存在する。このコーデッ クを使って圧縮するには、別途編集ソフト(例えば VirtualDub など)が必要。

VirtualDub と DivX を使ったAVIファイ ルの再圧縮解説動画(デジタルカメラで撮影した Motion JPEG コーデック の動画を DivX で再圧縮)

マルチメディアコンテンツの提示の実際

インライン画像

img タグを使う。インライン画像を表示できないブラウザや、表示しない設 定にしているブラウザからアクセスされたときに、画像の代わりに表示する文 字列を alt 属性にて指定しておくこと。

クジラ 

<img src="media/sample.jpg" alt="クジラ">

インライン音声

embed タグを用いる。ブラウザでの見え方は、ブラウザやプラグインソフトの状 況によって変わるので、注意。


<embed src="media/sample.wav" autostart=true width=144 height=60>

インライン動画

embed タグを用いる。ブラウザでの見え方は、ブラウザやプラグインソフトの状 況によって変わるので、注意。

Inline AVI file
Inline MPEG file
Inline RealMedia (ストリーミング)

ストリーミング

Real Media

Real Media の場合は、ファイルにリンクを張るだけで、特別なサーバなしで もストリーミング転送が可能である。複数のファイルを順次再生したい場合は、 以下の手順に従うこと。

再生したいReal MediaファイルのURLを、1行にひとつづつ列記した内容を持つ ファイル(これをメタファイルと呼ぶ。ファイル名の拡張子は .ram とする) を作成して保存する。

http://ホスト名/最初に再生したいRealMediaファイルへのパス
http://ホスト名/次に再生したいRealMediaファイルへのパス
もしまだあれば、どんどん続ける...

本学のeduドメインを利用している学生ならば、ホスト名は 

www.edu.tuis.ac.jp
RealMediaファイルへのパスは、ファイル名がhoge.rm、それを置いたディレクト リ名が webprog の場合、 
~c00xxxyz/webprog/hoge.rm
などとなる。つまり、hoge.ram の内容は、 
http://www.edu.tuis.ac.jp/~c00xxxyz/webprog/hoge.rm
となる。上記の行の最後には、必ず改行を入れる(Enterキーを押す)必要が有 る。このファイルhoge.ramへのリンクを作成しておけば、ここにアクセスさ れた時には、hoge.rm というリアルメディアファイルがストリーミング転送 &再生される。

複数の Real Media ファイルを続けて再生(ストリーミング)

Live Video Broadcast(Realサーバを用いた、ストリーミングビデオ生中継)

RealEncoderなどでエンコードされた音ファイルや動画ファイル、生中継 (音のみ、音と映像とも)などは、いずれも同じ手順にてストリーミン グ再生が可能である。

Windows Media の場合

Windows Media ファイルにリンクを張れば、ストリーミング再生が可能で ある。

複数のファイルを続けて再生したい場合は、メタファイルの拡張子を .asx とし、その内容は、再生したいファイル(wma, wmv, mp3など)のURLを1行に書 く(行の最後で必ず改行すること)。複数あれば、複数行列記する。すると、 Windows Media Player にてストリーミング再生が可能である。ただし、Real Media は、Windows Media Player を使ってストリーミング再生できない。

Windows Media と Real Media の違い

技術を提供している企業が異なり、互いのメディアファイルに互換性がな い。品質や圧縮効率、使いやすさも一長一短であり、どちらが優れているとは 一概には言えない。ストリーミング技術の比較(Hiroshi Nakamura 氏のページ)を参照せよ。