HTMLで複数の動画切り替えを実行する方法を現役エンジニアが解説【初心者向け】
初心者向けにHTMLで複数の動画切り替えを実行する方法について解説しています。HTMLで動画を扱うvideoタグの基本の使い方、JavaScriptを利用した動画の切り替え方法を学びましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLで複数の動画切り替えを実行する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
複数の動画切り替えを実行する方法について詳しく説明していくね！
お願いします！
目次
動画を再生するには
HTMLを動画で再生させるためにはvideoタグを使う方法があります。以下のようにvideoタグにsrc属性で動画のリンクや保存先を指定すれば動画を表示、再生させることができます。
<video src="./video.mp4"></video>
videoタグについて詳しくは以下の記事をご覧ください。
HTML5のvideoタグで動画のストリーミング配信の仕方を現役デザイナーが解説【初心者向け】
複数の動画を切り替えるには
さて、先ほど紹介した方法だと動画を一つしか再生できませんが、ここから複数の動画を動的に変更させるためにはどうすればいいのでしょう？
まず真っ先にサーバーサイドのコードを用意して動画ごとにページを作ることですが、それだと用意するファイル数も多くなりますし、毎回サーバーリクエストを行なうことになります。同じページ上で複数の動画を動的に切り替えるためには、videoタグのsrc属性が再生する動画ファイルを指定しているので、src属性の値を変えるためにJavaScriptを使う方法があります。
簡単に手順をまとめると以下のようになります。
- Videoタグにidをもたせて、動画を再生するファイルgetElementByIdメソッドでVideoタグを取得できるようにする
- ボタンなどでgetElementByIdメソッドを実行し、srcの値を変更する関数を入れる
- ボタンには関数に渡す引数の値をつけておく
大体このような手順です。実際にサンプルを動かしながら実装方法をみていきましょう。
複数の動画を切り替えてみよう
それでは実際にサンプルを動かしてみましょう。以下のサンプルHTMLを適当なフォルダに保存します。動画ファイルはHTMLと同じ保存先に保存しましょう（mp4推奨）。動画のファイル名はサンプルを参考に適宣変えてください。
なお、手元に再生できる動画が無い方は以下のリンクのサイトの動画であればフリー素材の動画をダウンロードできます。
https://pixabay.com/ja/videos/
<head>
<title>ビデオデモ</title>
<meta charset="utf-8">
</head>
<body>
<h1>ビデオストリーミング</h1>
<video id="movie" src="./1.mp4" controls width="320" height="240"></video>
<hr>
<h3>再生する動画を選択</h3>
<button onclick="playVideo(1)">1</button>
<button onclick="playVideo(2)">2</button>
<button onclick="playVideo(3)">3</button>
</body>
<script>
function playVideo(num) {
console.log(num);
tag = document.getElementById("movie");
switch (num) {
case 1:
tag.src = "./1.mp4";
break;
case 2:
tag.src = "./2.mp4";
break;
case 3:
tag.src = "./3.mp4";
break;
}
}
</script>
実際にHTMLを保存したら、画像のような画面でボタンを押すと動画が簡単に切り替わります。ちなみに今回はposter属性を付けませんでしたが、poster属性も変わるようにしたいときも同様の方法で動画と一緒に切り替えることができます。
監修してくれたメンター
| メンター 三浦
モバイルゲームを運用している会社のエンジニアをしています。趣味でWEB開発やクラウドコンピューティングもやっており、ソフトもハードもなんでもやります。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
