音声と動画を再生してみよう

第2回まではテキストと画像など動かないものを取り扱っていましたが、HTML5では動くコンテンツである音声と動画を取り扱うことができる要素が用意されています。

それぞれで使用する要素は以下になります。

• 音声…audio要素
• 動画…video要素

※ページの最後にサンプルデータを用意しています。

音声の制御

音声はaudio要素を使用し、属性によっていくつかの制御が出来ます。ここでは使用頻度が高そうな属性の紹介をしていきます。

• src属性…値にあるパスで音声ファイルを参照
• autoplay属性…ページが読み込まれた際、自動で再生を開始する
• loop属性…繰り返し再生する
• controls属性…コンテンツを制御するインターフェイスを表示

<audio src="./audio/audio.mp3" controls autoplay loop></audio>

とすると、ページが表示された際にaudio.mp3が自動で再生され、音声が終わるとまた最初から再生されます。またインタフェースで動画の音量の調整や停止、再生位置の調整が出来ます。画面上では以下のようなインターフェイスが表示されます。一つずつ動作を確認してみましょう

複数の音声ファイル形式を参照する

複数のファイル形式に対応するためにはaudio要素でsrc属性を使用するのではなく、子要素としてsource要素中でsrc属性を使用します。

<audio controls autoplay loop>
<source src="./audio/audio.mp3" type="audio/mp3">
<source src="./audio/audio.webm" type="audio/webm">
</audio>

ブラウザがファイルを参照する前に、type属性でファイル形式の情報を与えておくのが良いでしょう。

動画の制御

動画ではvideo要素を使用します。音声のaudio要素と同じ用途で使用する属性が多いですが、poster属性は音声制御にはない属性です。ここでもよく使いそうな属性を紹介すると、

• src属性…値にあるパスで音声ファイルを参照
• autoplay属性…ページが読み込まれた際、自動で再生を開始する
• loop属性…繰り返し再生する
• controls属性…コンテンツを制御するインターフェイスを表示
• poster属性…再生しなくてもどのような内容かがわかる動画の1フレーム

<video controls autoplay loop poster="./images/video_poster.png">
<source src="./video/video.mp4" type="video/mp4">
<source src="./video/video.webm" type="video/webm">
<source src="./video/video.ogv" type="video/ogg">
</video>

ここで紹介した音声と動画についてはあくまでHTML5で用意されている要素と属性で出来ることを紹介しましたが、後の回で紹介するJavaScriptでさらに複雑なことが出来るようになります。

CSSでの要素の動的な制御

CSS3では、要素に対して動的な制御をすることが出来るようになりました。制御できるのは、回転・拡大・縮小・変形などがあります。使い方によっては色々な用途で活かすことが出来そうで面白そうです。実際にCSSでキャラクターに動きをつけたりなどの例があります。

ここでは、CSSでの役割である「装飾表現」という視点で考えてみましょう。

Webサイトにはリンクするボタンが設置されていることがありますが、見た目やマウスカーソルを重ねた時にクリック出来そうという操作感がユーザーに伝わると使いやすさが高まります。

今回はカーソルをリンクに重ねた時にCSSで動きを持たせることにしましょう。

<span><a href="#"></a></span>

css/style.css（マウスオーバーする前の状態）

a {
 background: #db5424;
 border-radius: 25px;
 box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.4);
 color: #FFFFFF;
 display: block;
 font-size: 20px;
 font-weight: 700;
 height: 50px;
 letter-spacing: -3px;
 line-height: 50px;
 margin: 0 auto;
 text-align: center;
 text-decoration: none;
 width: 50px;
}

span {
 display: table-cell;
 height: 50px;
 vertical-align: middle;
 width: 50px;
}

とし、この状態からマウスオーバーしたら

• 360度回転
• 全体的に縮小
• ドロップシャドウを削除

したいとします。
マウスオーバーした時の状態はセレクタに:hoverを追加します。この:hoverは擬似クラスというもので、状態が変化したときに使うものです。

css/style.css（マウスオーバーした時の状態）

a:hover {
 box-shadow: none;
 border-radius: 20px;
 font-size: 15px;
 font-weight: 100;
 height: 40px;
 line-height: 40px;
 transform: rotate(360deg);
 width: 40px;
}

この状態ではマウスオーバーした瞬間にCSSが切り替わります。一見してただ小さくなっているだけに見えますが、transitionプロパティで時間を設定することでマウスオーバー後までの動きを見せることが出来るようになります。transitionは一度に複数の値を設定することが出来るので、ここでは時間の設定に注目するためにtransition-durationを使用します。

a要素のCSSに以下を追加して、マウスオーバーすると動きが出ます。

transition-duration: 0.3s;

次回はJavaScriptについてのお話します。

今回のコードと素材はここからダウンロード出来ます
（音声、動画の再生があるので音量にご注意ください）