HTML5の新機能 - video要素 -

【こちらの記事は、約6分程でお読みいただけます。】

ITブログを見てくださっている皆さん、こんにちは！

前々回は、canvas要素を紹介し、前回は、form要素の新機能を紹介しました。
今回は、HTML5の新要素の『video要素』について、ご紹介していきますね＾＾

video要素は、Webページ内で動画を再生されるための要素です。

video要素に対応するブラウザは、動画再生にFlash Playerなどの
プラグインが、必要ないという特徴を持っています。

さらに属性だけで、動画ファイルの指定、自動再生の設定、再生と再生位置の調整と
音量調整などができるコントローラーを表示することができます。

HTML5に対応しているブラウザも徐々に増えています。
これから紹介するサンプルページは、以下の環境で動作確認ができました。

【OS】

・Windows7

【ブラウザ】

・Internet Explorer 9.0

・Firefox 5.0

・Chrome 12.0

・Safari 5.0

それでは、video要素を使用したサンプルページを紹介します。

最初にサンプルページをChrome12.0で表示すると以下のような結果になります。

次にサンプルページのソースコードの紹介です。
video要素は9～13行目です。

【video要素を使用したサンプル】

最後に、video要素の属性とsource要素について解説していきます。

9行目で、video要素にcontrols属性とautoplay属性を記述しています。
この2つの属性は、属性値は不要です。

controls属性で標準のコントローラーを表示し、
autoplay属性で動画が自動再生する設定をしています。

この他に、video要素にはsrc属性があります。
この属性で再生する動画ファイルを指定できます。

しかしサンプルページでは、10、11行目のように、
source要素で再生する動画ファイルを指定しています。

なぜかというと、ブラウザごとに再生できる動画ファイルの形式が異なるため、
video要素のsrc属性では対応しきれないためです。

そこで、複数の動画ファイルを指定できるsource要素を使用します。

source要素は、src属性で再生する動画ファイルを指定し、
type属性で動画ファイルの形式も指定します。

拡張子が.mp4のファイルは、
Internet Explorer 9.0、Chrome 12.0、Safari 5.0で再生するためで、
拡張子が.ogvのファイルは、
Firefox 5.0で再生するために設定しています。

source要素で複数の動画ファイルを指定すると、
上から順番に再生できるファイルか試していくことになります。
最後まで再生できるファイルがない場合は、何も表示されません。

画像だけでも表示したい場合は、
video要素のposter属性に画像ファイルを指定します。

12行目の文章は、video要素に対応していないブラウザで
サンプルページを閲覧したときに表示されるメッセージです。

以上が、上図サンプルコード画像の解説となります。

ブラウザに合わせた動画ファイルを用意する手間はありますが、
video要素を使用すれば、標準のコントローラーを活用して簡単に
Webページ内で動画を再生させることができます。

さらに、JavaScriptを活用することで、
video要素の動画の再生や停止などの制御を、
Webページ上のマウス操作やキーボード入力などさまざまな
操作に合わせて行うこともできます。

video要素に限らず、 HTML5の力を最大限に引き出すためには、
JavaScriptが必須です。

KENスクールで、JavaScriptの基本を学んでみてはいかがですか？

これからも新機能をご紹介していきますので、
皆さん楽しみにしていてくださいね！

--------------------------------------------------------------------------------

KENスクールで「プログラム」を一から学習していきませんか？？

⇒【無料のマンツーマン体験レッスンを受けてみよう！】
KENスクールでは、プログラムが初めての方でも、
安心して学習していただける環境です！
プログラムとは何か？から始まり、
様々に利用されているプログラミング技術を分野ごとに紹介します。

是非、無料体験レッスンを受けてみてください！

本日の更新者：
パソコンスクール KENスクール Programコース
インストラクター 杉山