HTML5に書き換えてみた
６．動画再生をvideo要素で
今までマークアップを行っていたXHTML1.0では、動画の埋め込みには<object>タグを使っていました。
下が、該当するHTML文書です。
待機状態では再生画面にはヒント画像を出したいので、transparentatstartはtrueにして、下の様なCSS文書で、画像を指定しています。
実際にブラウザでの表示画面を確認すると、IE11、Firefox、Google Chromeそれぞれで下の様になります。
IE11
Firefox
Google Chrome
Firefox、Google Chromeでは埋め込み動画が表示されません。これは、指定しているｗｍｖ形式の動画がIE以外ではサポートされていない為です。
そこで、ポピュラーなmp4も指定したいのですが、埋め込み画面が増えてしまいます。 従来の苦肉の策としては、mp4動画の埋め込みはあきらめてリンクで別窓表示させました。上のブラウザ表示画面中「動画再生できない時とは、ここをクリックして下さい。 別窓で動画が出て来ます。」と表示しているのが、そのリンク元です。
下は、実際のウエブページへのリンクです。
画像クリックで実際のページ
HTML5では、video要素が新登場
HTML5ではvideo要素とaudio要素が加わり、ブラウザだけで再生が可能になり再生用のプラグイン形式のプレーヤーは不必要になりました。
このおかげで、文書も表示画面もすっきりしたものにする事ができました。
HTML5上でのvideo要素の記述方法を以下に示します。
<video 属性指定>
<source src="動画ファイル名.形式">
<source src="動画ファイル名.形式">
<source src="動画ファイル名.形式">
</video>
この記述では３つの動画ファイル形式を再生方法を指定しており、ブラウザは記述された順に再生可能かどうかチェックします。 もちろん、指定する動画ファイルは用意しておく必要があります。
また、上にはHTML文書を示しており、CSS文書は基本的には不必要です。
では、指定する属性について整理します。
scr属性・・・再生する動画を指定。source要素で指定する場合は、scr属性は不要
poster属性・・・待機時のヒント画像を指定。(記述)poster="画像ファイル名="
preload属性・・・preload="auto"（初期値）で、
ﾍﾟｰｼﾞ読み込み開始と同時に動画読み込み。やりたくなければ"none"
autoplay属性・・・autoplayと記述すると、ページを読み込んだ時点で自動再生される。
ブラウザーによってはmuted属性が無いとautoplayが機能しないので、併記しておくと無難です。
muted属性・・・mutedと記述すると、動画再生の初期状態が消音になる。
loop属性・・・loopと記述すると、再生を繰り返す。
controls属性・・・controlsと記述すると、動画のコントロールパネルを表示する。
width属性、height属性
動画のコントロールパネルはブラウザによって、見た目が異なります。
IE11
Firefox
Google Chrome
さて、実際のHTML文書は下の様に書き換えました。
「dooga/2015goyu.mp4、dooga/2015goyu.wmvの順に動画再生できるか確認し、できるなら再生する。 待機時のヒント画像はpic/doogaback2.pngを使い、コントロールパネルは表示する。幅640px、高さ400px」と指定しています。
下が書き換え後のウエブページへのリンクです。
画像クリックで実際のページ
