6.動画再生をvideo要素で


今までマークアップを行っていたXHTML1.0では、動画の埋め込みには<object>タグを使っていました。

下が、該当するHTML文書です。

HTML文書

待機状態では再生画面にはヒント画像を出したいので、transparentatstartはtrueにして、下の様なCSS文書で、画像を指定しています。

HTML文書

実際にブラウザでの表示画面を確認すると、IE11、Firefox、Google Chromeそれぞれで下の様になります。

IE11

HTML文書

Firefox

HTML文書

Google Chrome

HTML文書

Firefox、Google Chromeでは埋め込み動画が表示されません。これは、指定しているwmv形式の動画がIE以外ではサポートされていない為です。

そこで、ポピュラーなmp4も指定したいのですが、埋め込み画面が増えてしまいます。 従来の苦肉の策としては、mp4動画の埋め込みはあきらめてリンクで別窓表示させました。上のブラウザ表示画面中「動画再生できない時とは、ここをクリックして下さい。 別窓で動画が出て来ます。」と表示しているのが、そのリンク元です。

下は、実際のウエブページへのリンクです。

書き換え後  ←クリックで実際のページ

 

HTML5では、video要素が新登場

HTML5ではvideo要素とaudio要素が加わり、ブラウザだけで再生が可能になり再生用のプラグイン形式のプレーヤーは不必要になりました。

このおかげで、文書も表示画面もすっきりしたものにする事ができました。

HTML5上でのvideo要素の記述方法を以下に示します。

<video 属性指定>
 <source src="動画ファイル名.形式">
 <source src="動画ファイル名.形式">
 <source src="動画ファイル名.形式">
</video>

この記述では3つの動画ファイル形式を再生方法を指定しており、ブラウザは記述された順に再生可能かどうかチェックします。 もちろん、指定する動画ファイルは用意しておく必要があります。

また、上にはHTML文書を示しており、CSS文書は基本的には不必要です。

では、指定する属性について整理します。

scr属性・・・再生する動画を指定。source要素で指定する場合は、scr属性は不要
poster属性・・・待機時のヒント画像を指定。(記述)poster="画像ファイル名="
preload属性・・・preload="auto"(初期値)で、
  ページ読み込み開始と同時に動画読み込み。やりたくなければ"none"
autoplay属性・・・autoplayと記述すると、ページを読み込んだ時点で自動再生される。
loop属性・・・loopと記述すると、再生を繰り返す。
controls属性・・・controlsと記述すると、動画のコントロールパネルを表示する。
width属性、height属性

動画のコントロールパネルはブラウザによって、見た目が異なります。

IE11

コントロールパネル

Firefox

コントロールパネル

Google Chrome

コントロールパネル

さて、実際のHTML文書は下の様に書き換えました。

「dooga/2015goyu.mp4、dooga/2015goyu.wmvの順に動画再生できるか確認し、できるなら再生する。 待機時のヒント画像はpic/doogaback2.pngを使い、コントロールパネルは表示する。幅640px、高さ400px」と指定しています。

書き換え後のHTML文書

下が書き換え後のウエブページへのリンクです。

書き換え後  ←クリックで実際のページ

ページトップへ

←前ページへ               目次へ戻る               →次ページへ

コーナー