画像で見た目がにぎやかになったら、今度は動きと音。再生ボタン付きの動画プレーヤーや音声プレーヤーも、HTMLのタグひとつで置けます。使うのは <video> と <audio>。名前のとおりで、覚えやすいですね。
動画を置く
<video> で動画を表示します。大事なのが controls。これをつけると、再生・一時停止・音量などの操作パネルが表示されます。
<video src="/movie.mp4" controls></video>| 書くもの | 意味 |
|---|---|
<video> | 動画プレーヤーの部品 |
src="..." | どの動画ファイルを出すか（場所） |
controls | 再生ボタンなどの操作パネルを出すしるし |
controls を書き忘れると、動画は置かれているのに再生ボタンが出ず、「動かせない」状態になります。まずはセットで書く、と覚えましょう。
音声を置く
音声は <audio>。使い方は <video> とそっくりです。
<audio src="/sound.mp3" controls></audio>これで、再生ボタン付きの音声プレーヤーが表示されます。BGMや効果音、ナレーションなどを置きたいときに使います。実物はこんな見た目です。
<audio controls>の実物。再生ボタンを押すと、短い「ポッ」という音が鳴ります。<video>も、これと同じ操作パネルつきの動画版プレーヤーになります。よく足す2つの言葉
controls のほかに、覚えておくと便利なものがふたつあります。
<video src="/movie.mp4" controls autoplay muted></video>| 書くもの | 意味 |
|---|---|
autoplay | ページを開くと自動で再生する |
muted | 音を消した状態にする |
このレッスンのまとめ
- 動画は
<video>、音声は<audio> controlsをつけると再生ボタン付きのプレーヤーになる- 自動再生（
autoplay）するならmuted（消音）も一緒に