初心者向けにHTML5のvideoタグで動画のストリーミング配信の仕方について解説しています。最初にストリーミングとは何か、そのメリットとデメリットを説明します。次にvideoタグの使い方と、サムネイルやサイズ調整などの基本的な機能について学習しましょう。2018/3/2テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。調査手法:インターネット調査HTML5のvideoタグで動画のストリーミング配信の仕方について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。HTMLの書き方について解説した記事を読むとさらに理解が深まります。本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。今回は、HTMLに関する内容だね!大石ゆかりどういう内容でしょうか?田島悠介videoタグで動画のストリーミング配信を行う方法について詳しく説明していくね!大石ゆかりお願いします!ストリーミングとはストリーミングとは、音声や動画などのメディアを再生する技術のことです。ストリーミングはメディアをすぐに再生することができることから、動画配信サービスや音楽配信アプリで使用されています。これまでは一度メディアをダウンロードしてから再生するサービスが主流でしたが、インターネットの発達から現在はストリーミング再生を採用しているサービス、アプリがメインになっています。メリットストリーミングのメリットはダウンロードと違い、インターネットに接続していれば、端末に転送されることなく再生されるので、スマホやパソコンのストレージを使わないのがメリットです。これによりメディアの再生形式と機種に依存することなく様々なメディアを楽しむことができます。デメリット端末のストレージを消費することなく再生できる一方でインターネットがなければメディアが再生されないのでネットワークが不安定な環境や通信制限がかかると再生が不安定になります。Wifiを使用している場合は気にしなくてもいいですが、携帯回線を使用している場合は動画を再生するたびにデータ通信量が消費されるので、何も気にせずに使うと簡単に通信制限がかかってしまいます。スマホで動画配信を見た経験のある方だとどちらも経験したことのある話だと思います。videoタグの基本的な使い方と高度な設定を知ろう動画をストリーミング再生するためにはHTMLのvideoタグを使って実現できます。使い方を紹介していきます。基本的な使い方は、videoタグで動画ファイルを参照するだけです。HTMLで画像を扱ったことのある方はimgタグを使う方法と同じです。src="video.mp4"></video>これで動画は表示できますが、再生はされません。コントローラを追加することで動画を再生、一時停止、ボリューム調整をすることができます。コントローラを追加するには、controls属性を指定します。controls></video>これでストリーミングするための準備ができました。サムネイルをつけるここからは、videoタグの属性をつかった高度な設定について紹介します。動画ストリーミングサイトでよく使われている動画のトップ画像(サムネイル)を入れる方法です。サムネイルはposter属性をつかって画像ファイルを指定することで乗せることができます。サムネイルを使うことで、動画の内容をしる手がかりになります。poster="samne.jpg"></video>自動再生するautoplay属性を指定することで、ページを読み込んだことで動画が自動で再生されます。autoplay></video>サイズを調整するvideoタグで動画を再生すると、動画のサイズでそのままHTMLに表示され、大きいサイズだと、ブラウザの画面をはみ出す上に見ずらいです。そこで、width、heightを使って幅と高さを調整する必要があります。これにより、サイトのデザインに合わせて動画をはめ込みやすくなります。動画を埋め込んで再生してみようそれでは、実際にサンプルコードを使って動画をブラウザで再生しましょう。再生したい動画ファイルを用意します。動画はmp4かogg用意します。用意したら以下のサンプルHTMLと一緒に任意のフォルダ内に保存します。height="240"></video></body>保存したHTMLをダブルクリックしてブラウザから見ると、このように動画がブラウザ上で再生できるようになります。監修してくれたメンターメンター三浦さんモバイルゲームを運用している会社のエンジニアをしています。趣味でWEB開発やクラウドコンピューティングもやっており、ソフトもハードもなんでもやります。TechAcademyジュニアではPythonロボティクスコースを担当しています。大石ゆかり内容分かりやすくて良かったです!田島悠介ゆかりちゃんも分からないことがあったら質問してね!大石ゆかり分かりました。ありがとうございます!TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。30分間、オンラインでどんなことでも質問し放題です。あなたの相談に真摯に向き合います。「漠然としているがプロの話を聞いてみたい」こんな気持ちでも大丈夫です。お気軽にご参加ください。※体験用のカリキュラムも無料で配布いたします。関連する記事HTMLのcheckboxをdisabledにする方法を現役エンジニアが解説【初心者向け】HTMLのcheckboxをdisabledにする方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します...HTMLHTMLのコーディングで起こるバグの見つけ方を現役エンジニアが解説【初心者向け】HTMLのコーディングで起こるバグの見つけ方について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。...HTMLHTMLのページ全体をフォント指定する方法を現役デザイナーが解説【初心者向け】HTMLページ全体のフォントを指定する方法について、テックアカデミーのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。最近HTMLを勉強し始めた方は、HTMLは文字や画像を表示するだけの言語と思っておられる方がいらっしゃるかもしれません。HTMLは文字や画像以外にも、簡単なフォ...HTMLjQueryでHTMLの要素を削除する方法を現役デザイナーが解説【初心者向け】jQueryでHTMLの要素を削除する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。...HTMLHTMLで同じname属性を配列で受け取る方法を現役エンジニアが解説【初心者向け】HTMLで同じname属性を配列で受け取る方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。...HTMLあわせてよく読まれている記事HTML5でストリーミング動画配信を実装する方法を現役エンジニアが解説【初心者向け】HTML5でストリーミング配信された動画再生実装する方法について、テックアカデミーのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。HTML5でストリーミング配信された動画再生実装することで、HTML5だけでなく配信技術に対するご理解も深まります。実務では、HTML5でストリーミング配信する会社への就職、HTML5でストリーミング配信を実装する案件獲得などに繋がります。HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。videoタグを記述することでプラグインを使わずに動画を再生することができるようになりました。その方法は、まず、videoタグの中にsrc属性で音声ファイルのアドレスを指定します。次にcontrols属性によって、音声の再生や停止などのユーザーインターフェースを指定しましょう。ブラウザごとに表示されるインターフェース(操作パネル)は異なるため、それぞれを確認してから使用しましょう。controls属性を別の属性として記述することによってvideo表示方法を変えることが可能です。autoplayは自動再生、loopは繰り返しなどと変更することが可能です。動画をストリーミング再生する場合大きく2種類の考え方があります。Streamingとプログレッシブダウンロードです。Streaming(HLS)という技術を利用しています。Streamingは元々、アップルがiOS向けに開発しました。HTTPという汎用的なプロトコル(規格)を利用することで、様々な媒体に対して動画配信が可能です。プログレッシブダウンロードは疑似ストリーミングと呼ばれ、配信データをダウンロードして再生します。すべてのデータをダウンロードし終わっていれば、オフライン状態で再度再生が可能。オフライン状態で再度再生が可能ということは、著作権上問題が発生する。Streamingを利用したストリーミング配信動画の再生実装方法です。m3u8ファイルはストリーミング再生される動画のプレイリストのようなものです。m3u8ファイル自体をダウンロードしてもオフラインで再生はできません。m3u8ファイルを利用してストリーミング再生している例としては、TVer、FOD、GYAO!などがあります。Streamingを利用したストリーミング配信動画を利用する場合は、ライブ配信もオンデマンド配信もどちらにも適しています。ライブ配信というのは、現在進行系で配信している内容を、配信と同時に見ることを意味します。オンデマンド配信というのは、過去に配信されていたものを、後日ストリーミング再生で見ることを意味します。test.m3u8というファイルを指定することでストリーミング配信されたファイルを再生することが出来ます。これは、htmlと同じ階層内にあるvideoフォルダの中に、test.m3u8というファイルを用意しているという意味になります。これだけは覚えたい!絶対パスと相対パスの違いを参考にしていただくと階層についてご理解が深まります。*なお次のコードを動作させるためには、./video/test.m3u8の位置に必要なファイルを用意する必要があります。プログレッシブダウンロードを利用して、疑似ストリーミング再生をする方法です。ように指定することでプログレッシブダウンロードを利用した疑似ストリーミングが可能です。大きなサイズの動画の場合には分割させる必要があるものの、短い動画はvideoタグによりmp4ファイルなどを再生することが可能です。*なお次のコードを動作させるためには、./video/test.mp4の位置に必要なファイルを用意する必要があります。QuickTimePlayerで再生することもできます。指定したvideoタグをhtmlに埋め込んで利用可能です。*なお次のコードを動作させるためには、./video/test.movの位置に必要なファイルを用意する必要があります。:PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。Festival入賞、中学生がノーコードでSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。TechAcademyでは初心者でも、オリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。現役エンジニアから学べる無料体験も実施しているので、参加してみてください。プログラミングを独学していて、このように感じた経験はないでしょうか?HTMLHTMLでvideo要素で動画が自動再生されない原因と対処法を現役エンジニアが解説【初心者向け】HTMLでvideo要素で動画が自動再生されない原因と対処法について、テックアカデミーのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。video要素はWebページ内に動画を埋め込む要素です。簡単なサンプルプログラムを見てみましょう。動画はフリー素材(商用利用可能)なものを以下のサイトから使用しています。playsinlineHTMLHTML5でvideoタグのposter属性で動画のヒント画像を表示する方法を現役デザイナーが解説【初心者向け】HTML5でvideoタグのposter属性で動画のヒント画像を表示する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。HTMLの書き方について解説した記事を読むとさらに理解が深まります。本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。HTML5では、動画の埋め込みに<video>タグを使用します。このvideoタグがあることで、Flash等のプラグインを使わずとも簡単に動画を埋め込むことができるようになりました。Flashはadobeが2020年末にアップデート・配布共に終了すると言ってますし、その動きにApple、Facebook、Google、Microsoft、Mozillaとも協調して進めているとのことなので、これからはvideoタグの利用がますます増えそうです。videoタグにおいて、基本コードはいたってシンプルです。imgタグとは違い閉じタグがきちんと用意されている要素なので、<video>~</video>タグの中に様々な要素を入れ子にすることが可能です。使われているのが、videoタグがサポートされていないブラウザを使用した場合に代わりにテキストを表示してくれるものです。<p>ブラウザが古くてvideo見れないね。このような感じになります。この属性の記述が無い場合はビデオの最初のフレームが読み込まれるまでは何も表示されず、フレームが読み込まれた後に最初のフレームをポスターフレームとして表示してくれます。読み込みが遅いとユーザーに動画がが埋め込まれていることを見落とされてしまう可能性があるので、poster属性はつけておいたほうがいいですね。ブラウザが古いなど動画が動く環境でない場合に、動画の代わりに画像を表示させることができます。poster属性で指定する画像は、ユーザーに動画の内容を知らせるような画像であることが望ましいです。youtubeなどでよく見る最初の静止画像(サムネイル)のような役割を果たしてくれます。使い方はいたって簡単です。videoタグにposter属性として記述するだけです。実際に動くコードを用意しました。これから動画も扱うことが増えてくるweb業界ですので、ぜひとも使ってみてください。40歳直前までHTMLの存在すら知らなかったのですが、現在はWordPressを中心としたwebデザイン/コーディングをしているフリーランサーです。趣味はスキューバーダイビング・年間3度は海のある国内外へ旅行してます。TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。開発者にとってなくてはならないサービスとしてGitHubがあります。エンジニアにとっては当たり前のサービスですが、これからプログラミングの勉強を始める初心者にとってはよくわからないかもしれません。そこで今回は、GitHubの使い方について、テックアカデミーのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。そもそもGitHubとは何なのか、どんな時に使うツールなのかを知っていきながら、実際の使い方を紹介しています。本格的に使おうと思ったらもっと多くのことを知る必要がありますが、業務で使うということでなければ十分でしょう。Gitについてそもそもよく分からないという方は、GitHubとは何なのか解説した記事を読むとさらに理解が深まります。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。GitHubはね、Gitをオンライン上で管理するサービスだよ。GitHubとは、ソフトウェア開発プロジェクトのためのソースコード管理サービスです。ソースコードを更新したバージョンの管理や閲覧、バグ追跡機能、SNSの機能を備えており、開発者にとってなくてはならないサービスです。GitHubを使ってソースコードの管理を行っている企業も多数あります。GitHubと同じようなソースコード管理サービスとしては、BitbucketやGitLabなどがあります。それぞれのサービスとの違いをもとに、GitHubが人気な理由を見ていきましょう。ソースコードを管理する単位をリポジトリと呼びます。リポジトリは格納場所という意味で、他の利用者にも公開されるパブリックリポジトリと、公開が関係者だけに限定できるプライベートリポジトリがあります。ソースコードを公開したくない場合は、プライベートリポジトリを選択する必要がありますが、以前はGitHubは有料、BitbucketやGitLabでは無料という状況でした。2020年4月から、GitHubでも無料のプライベートリポジトリを無制限に作成可能になりました。これによりGitHubを使いたかったがソースコードは公開したくない個人や企業の利用が大幅に増え、さらにGitHubの人気が高まる状態となりました。オープンソースとはソースコードが公開されており、誰でも無料で利用できるソフトウェアのことを指します。オープンソースコミュニティとは、オープンソースの開発者同士の集まり、結びつきのことです。GitHubでは以前から多くのオープンソースが管理されており、たくさんのオープンソースコミュニティが形成されています。このオープンソースコミュニティに育まれる形で、GitHubには以下のような機能が充実しており、コミュニティが開発を行いやすくなっています。ソースコード管理サービスとしての機能だけを捉えると、実はGitHub、Bitbucket、GitLabとも大きな違いはありません。このような開発しやすい環境を支援する機能という点では、GitHubが頭一つ抜けている印象を持ちます。GitHubは2018年にMicrosoft社に買収され、傘下の一企業となりました。Microsoft社は買収後もGitHubを独立企業として維持する意向を示しており、両社はオープンソースコミュニティにとっても良好な関係となっています。このような環境の中から、以下のような先進的な機能が次々と誕生しています。これら先進的な機能は類似のソースコード管理サービスにはないものであり、開発者にとってGitHubを選ぶ理由の1つとなっています。それではさっそくGitHubに登録してみましょう。GitHubのトップページにアクセスします。GitHub」ボタンをクリックします。次の画面でUsername(ユーザー名)やPassword(パスワード)を入力します。galaxy」は、不正なユーザー登録を防ぐための仕組みです。クイズになっており渦巻状の銀河の絵を数回選択します。このクイズは定期的に変わるようです。account」ボタンを押せるようになります。ボタンを押して次に進みましょう。このような画面になります。登録したメールアドレスに認証のメールが届きます。メールの内容に従いユーザー認証を行ってください。以上でGitHubのアカウント登録は完了です。その前にいくつか知っておいたほうがいいことがあるから、教えておくね。GitHubを使っていきたいところですが、使い始める前に知っておきたい事前知識を3つ紹介します。ここで紹介する言葉がまったくわからない場合は、理解しておきましょう。リポジトリとは、ファイルやディレクトリの状態を保存する場所です。変更履歴を管理したいディレクトリなどをリポジトリの管理下に置くことで、そのディレクトリ内のファイルなどの変更履歴を記録することができます。リポジトリは自分のマシン内にある「ローカルリポジトリ」とサーバなどネットワーク上にある「リモートリポジトリ」の2カ所にあります。基本的にローカルリポジトリで作業を行い、その作業内容をリモートポジトリへプッシュする流れで行います。最低限この2つは知っておきましょう。ソフトウェアの開発では、現在リリースしてるバージョンのメンテナンスをしながら新たな機能追加やバグ修正を行うことがあります。このような、並行して行われる複数のバージョン管理を行うために、Gitにはブランチ(branch)という機能があります。ブランチは履歴の流れを分岐して記録していくものです。分岐したブランチは他のブランチの影響を受けないため、同じリポジトリ内でそれぞれの開発を行っていくことができます。リポジトリ管理下にあるディレクトリの中には、一時的に使うファイルなど、Git管理が不要なものもあります。そこでGitでは、バージョン管理する対象のファイルやフォルダを「インデックス」と呼ばれる台帳に登録することで、必要なもののみバージョン管理が行えるようになっています。逆に言えば、新たにフォルダやファイルを作成した場合、コミットする前にインデックスに登録する必要があります。忘れないようにしましょう。「スクールは高いから独学で成功する」という気持ちの方は多いと思います。その方が金額は低く抑えられるでしょう。独学には向き不向きがあり、実はスクールが向いている人も大勢います。そんな方のために参考として、GitHTMLで埋め込み動画の音声を消す方法を現役デザイナーが解説【初心者向け】HTMLで埋め込み動画の音声を消す方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。HTMLの書き方について解説した記事を読むとさらに理解が深まります。本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。以前はwebサイトに動画を埋め込みたい際、FlashやQuickTimeなどのプラグインを使うのが一般的でしたが、HTML5ではvideoタグを使って簡単に動画を表示させることができます。基本的なコードはいたってシンプルです。これで動画をいとも簡単に埋め込むことができます。<p>お使いのブラウザは古いので、この動画を見ることができません。ように、動画がサポートされていないブラウザに対して代替テキストを入れ子にして記述することもできます。簡単な動画の埋込ですが、サイトを開いたとき、もしくは再生ボタンを押したときにいきなり音が鳴ってしまったら閲覧者もびっくりしますし、スマホなどでは周りの迷惑になってしまいます。そんな時に設定しておきたいvideoタグの属性が「muted」です。こちらを記述しておくことで、動画が再生されたときは最初は音を消した状態で再生されるように設定することができます。videoタグの属性ですので、videoタグ内に記述してあげるだけなので、いたって簡単です。アルファベット5文字を記述するだけなので、videoタグを用いるときはなるべく記述してあげたほうがいいでしょう。実際に音声を消した状態で動くコードを用意いたしました。一応対応ブラウザの幅を広げるため.webmの拡張子の動画も用意しておきました。40歳直前までHTMLの存在すら知らなかったのですが、現在はWordPressを中心としたwebデザイン/コーディングをしているフリーランサーです。趣味はスキューバーダイビング・年間3度は海のある国内外へ旅行してます。TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。・目標への学習プランがわからず、迷子になりそうHTMLHTMLで複数の動画切り替えを実行する方法を現役エンジニアが解説【初心者向け】HTMLで複数の動画切り替えを実行する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。HTMLを動画で再生させるためにはvideoタグを使う方法があります。以下のようにvideoタグにsrc属性で動画のリンクや保存先を指定すれば動画を表示、再生させることができます。videoタグについて詳しくは以下の記事をご覧ください。真っ先にサーバーサイドのコードを用意して動画ごとにページを作ることですが、それだと用意するファイル数も多くなりますし、毎回サーバーリクエストを行なうことになります。同じページ上で複数の動画を動的に切り替えるためには、videoタグのsrc属性が再生する動画ファイルを指定しているので、src属性の値を変えるためにJavaScriptを使う方法があります。簡単に手順をまとめると以下のようになります。大体このような手順です。実際にサンプルを動かしながら実装方法をみていきましょう。それでは実際にサンプルを動かしてみましょう。以下のサンプルHTMLを適当なフォルダに保存します。動画ファイルはHTMLと同じ保存先に保存しましょう(mp4推奨)。動画のファイル名はサンプルを参考に適宣変えてください。手元に再生できる動画が無い方は以下のリンクのサイトの動画であればフリー素材の動画をダウンロードできます。実際にHTMLを保存したら、画像のような画面でボタンを押すと動画が簡単に切り替わります。ちなみに今回はposter属性を付けませんでしたが、poster属性も変わるようにしたいときも同様の方法で動画と一緒に切り替えることができます。条件を満たすことで支払った受講料の最大70%(最大306,460円)が給付金として支給されます。ページ内の注意事項をご確認ください。