• このエントリーをはてなブックマークに追加

HTML5入門

第3回 音声・動画の取り扱い、CSSによる要素の動的な制御

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

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

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

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

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

音声の制御

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

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

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

Tips

WebページでBGMとして音声を再生するのであればautoplayとloopで実現出来ます。ただ、この状態では停止やミュートが出来ないのでBGMを必要としないユーザーにとっては要件を満たしていません。情報を受け取る側への配慮も考慮しましょう。

Important

ブラウザやブラウザのバージョンによって、サポートしている音声ファイルの形式(拡張子)が異なります。対応するブラウザに合わせて用意する音声ファイルを複数用意しましょう。

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

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

audio.html

※以下はhtmlファイルのbody要素の中身のみの記述です。

<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.html

※以下はhtmlファイルのbody要素の中身のみの記述です。

<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>
Tips

音声と動画にはモバイル環境では自動再生されません。スマートフォンの契約が定額でない場合、動画などのデータの容量が大きいものが自動で再生されるとユーザーの意図とは関係なく課金が発生してしまいます。そのような場合への配慮としてモバイル環境では自動再生が出来ないようになっています。

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

CSSでの要素の動的な制御

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

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

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

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

Tips

ユーザーの操作感のことをユーザーインターフェース、使いやすさのことをユーザービリティーといいます。

button.html

※以下はhtmlファイルのbody要素の中身のみの記述です。

<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は擬似クラスというもので、状態が変化したときに使うものです。

Tips

「擬似クラス」は名前の通り擬似的にクラスを扱っており、他にも要素の前や後に擬似的に要素を作り出す「擬似要素」というものがあります。

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についてのお話します。

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

このページの先頭へ