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

初心者向けにHTML5のvideoタグで動画のストリーミング配信の仕方について解説しています。最初にストリーミングとは何か、そのメリットとデメリットを説明します。次にvideoタグの使い方と、サムネイルやサイズ調整などの基本的な機能について学習しましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

HTML5のvideoタグで動画のストリーミング配信の仕方について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

videoタグで動画のストリーミング配信を行う方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

ストリーミングとは

ストリーミングとは、音声や動画などのメディアを再生する技術のことです。ストリーミングはメディアをすぐに再生することができることから、動画配信サービスや音楽配信アプリで使用されています。これまでは一度メディアをダウンロードしてから再生するサービスが主流でしたが、インターネットの発達から現在はストリーミング再生を採用しているサービス、アプリがメインになっています。

メリット

ストリーミングのメリットはダウンロードと違い、インターネットに接続していれば、端末に転送されることなく再生されるので、スマホやパソコンのストレージを使わないのがメリットです。これによりメディアの再生形式と機種に依存することなく様々なメディアを楽しむことができます。

デメリット

端末のストレージを消費することなく再生できる一方でインターネットがなければメディアが再生されないのでネットワークが不安定な環境や通信制限がかかると再生が不安定になります。

また、Wifiを使用している場合は気にしなくてもいいですが、携帯回線を使用している場合は動画を再生するたびにデータ通信量が消費されるので、何も気にせずに使うと簡単に通信制限がかかってしまいます。おそらく、スマホで動画配信を見た経験のある方だとどちらも経験したことのある話だと思います。

 

videoタグの基本的な使い方と高度な設定を知ろう

動画をストリーミング再生するためにはHTMLのvideoタグを使って実現できます。早速使い方を紹介していきます。

基本的な使い方

基本的な使い方は、videoタグで動画ファイルを参照するだけです。HTMLで画像を扱ったことのある方はimgタグを使う方法と同じです。

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

これで動画は表示できますが、再生はされません。 コントローラを追加することで動画を再生、一時停止、ボリューム調整をすることができます。コントローラを追加するには、controls属性を指定します。

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

 

これでストリーミングするための準備ができました。

サムネイルをつける

ここからは、videoタグの属性をつかった高度な設定について紹介します。まずは動画ストリーミングサイトでよく使われている動画のトップ画像(サムネイル)を入れる方法です。サムネイルはposter属性をつかって画像ファイルを指定することで乗せることができます。サムネイルを使うことで、動画の内容をしる手がかりになります。

<video src="video.mp4" poster="samne.jpg"></video>

自動再生する

autoplay属性を指定することで、ページを読み込んだことで動画が自動で再生されます。

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

サイズを調整する

videoタグで動画を再生すると、動画のサイズでそのままHTMLに表示され、大きいサイズだと、ブラウザの画面をはみ出す上に見ずらいです。そこで、width、heightを使って幅と高さを調整する必要があります。これにより、サイトのデザインに合わせて動画をはめ込みやすくなります。

<video src="video.mp4" width="320" height="240">

 

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

動画を埋め込んで再生してみよう

それでは、実際にサンプルコードを使って動画をブラウザで再生しましょう。まずは再生したい動画ファイルを用意します。動画はmp4かogg用意します。用意したら以下のサンプルHTMLと一緒に任意のフォルダ内に保存します。なお、動画ファイルの名前はご自分のものに合わせて変更しておきます

<head>

    <title>ビデオデモ</title>

    <meta charset="utf-8">

</head>

<body>

    <h1>ビデオストリーミング</h1>

    <video src="./mov_hts-samp005.mp4" controls width="320" height="240"></video>

</body>

保存したHTMLをダブルクリックしてブラウザから見ると、このように動画がブラウザ上で再生できるようになります。

 

監修してくれたメンター

メンター三浦さん

コミュニケーションロボットの研究を行っている大学院生です。

趣味でWeb開発やクラウドコンピューティングもやっており、ソフトもハードもなんでもやります。

好きな言語はPython, Node.js

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

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