動画を再生ボタンなしで背景のように流したいときは？

autoplayとmutedをセットで指定し、controlsを外すと、操作パネルのない背景動画として流せます。ただしmutedなしのautoplayは多くのブラウザでブロックされます。

動画や音声をくり返し再生させたいときは？

loopを足すと、最後まで再生したら自動でもう一度はじめから流れます。controlsやautoplayと組み合わせて使えます。

ファイル形式がブラウザに対応しているか、srcのパスが合っているかをまず確認しましょう。mp4形式にしておくと、多くのブラウザで無難に再生できます。

画像で見た目がにぎやかになったら、今度は動きと音。再生ボタン付きの動画プレーヤーや音声プレーヤーも、HTMLのタグひとつで置けます。使うのは <video> と <audio>。名前のとおりで、覚えやすいですね。

<video> で動画を表示します。大事なのが controls。これをつけると、再生・一時停止・音量などの操作パネルが表示されます。

<video src="/movie.mp4" controls></video>

controls を書き忘れると、動画は置かれているのに再生ボタンが出ず、「動かせない」状態になります。まずはセットで書く、と覚えましょう。

これが<video controls>の実物。画面の下に、再生ボタンなどの操作パネルが並んでいるのが分かります。

音声は <audio>。使い方は <video> とそっくりです。

<audio src="/sound.mp3" controls></audio>

これで、再生ボタン付きの音声プレーヤーが表示されます。BGMや効果音、ナレーションなどを置きたいときに使います。実物はこんな見た目です。

これが<audio controls>の実物。再生ボタンを押すと、短い「ポッ」という音が鳴ります。<video>も、これと同じ操作パネルつきの動画版プレーヤーになります。

controls のほかに、覚えておくと便利なものがふたつあります。

<video src="/movie.mp4" controls autoplay muted></video>

ページを開いた瞬間から自動で再生がはじまっているのが分かります（mutedなので音は鳴りません）。クリックしなくても再生されている、というのがポイントです。