HTMLで複数の動画切り替えを実行する方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLで複数の動画切り替えを実行する方法について解説しています。HTMLで動画を扱うvideoタグの基本の使い方、JavaScriptを利用した動画の切り替え方法を学びましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

HTMLで複数の動画切り替えを実行する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

複数の動画切り替えを実行する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

動画を再生するには

HTMLを動画で再生させるためにはvideoタグを使う方法があります。以下のようにvideoタグにsrc属性で動画のリンクや保存先を指定すれば動画を表示、再生させることができます。

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

videoタグについて詳しくは以下の記事をご覧ください。

HTML5のvideoタグで動画のストリーミング配信の仕方を現役デザイナーが解説【初心者向け】

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

複数の動画を切り替えるには

さて、先ほど紹介した方法だと動画を一つしか再生できませんが、ここから複数の動画を動的に変更させるためにはどうすればいいのでしょう?

まず真っ先にサーバーサイドのコードを用意して動画ごとにページを作ることですが、それだと用意するファイル数も多くなりますし、毎回サーバーリクエストを行なうことになります。同じページ上で複数の動画を動的に切り替えるためには、videoタグのsrc属性が再生する動画ファイルを指定しているので、src属性の値を変えるためにJavaScriptを使う方法があります。

簡単に手順をまとめると以下のようになります。

  1. Videoタグにidをもたせて、動画を再生するファイルgetElementByIdメソッドでVideoタグを取得できるようにする
  2. ボタンなどでgetElementByIdメソッドを実行し、srcの値を変更する関数を入れる
  3. ボタンには関数に渡す引数の値をつけておく

大体このような手順です。実際にサンプルを動かしながら実装方法をみていきましょう。

 

複数の動画を切り替えてみよう

それでは実際にサンプルを動かしてみましょう。以下のサンプル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ジュニアではPythonロボティクスコースを担当しています。
好きな言語はpython, Node.js

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。