TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTML5でvideoタグのposter属性で動画のヒント画像を表示する方法を現役デザイナーが解説【初心者向け】
icon
icon
HTML

HTML5でvideoタグのposter属性で動画のヒント画像を表示する方法を現役デザイナーが解説【初心者向け】

初心者向けにHTML5でvideoタグのposter属性で動画のヒント画像を表示する方法について解説しています。動画埋め込みに使用されるvideoタグの基本構文、poster属性による表示画像の設定方法について学びましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

HTML5でvideoタグのposter属性で動画のヒント画像を表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

videoタグのposter属性で動画のヒント画像を表示する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

videoタグについて

HTML5では、動画の埋め込みに<video>タグを使用します。このvideoタグがあることで、Flash等のプラグインを使わずとも簡単に動画を埋め込むことができるようになりました。

Flashはadobeが2020年末にアップデート・配布共に終了すると言ってますし、その動きにApple、Facebook、Google、Microsoft、Mozillaとも協調して進めているとのことなので、これからはvideoタグの利用がますます増えそうです。

videoタグにおいて、基本コードはいたってシンプルです。

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

imgタグとは違い閉じタグがきちんと用意されている要素なので、<video>～</video>タグの中に様々な要素を入れ子にすることが可能です。

例えば、一番よく使われているのが、videoタグがサポートされていないブラウザを使用した場合に代わりにテキストを表示してくれるものです。

<video src="hoge.mp4"controls>
  <p>ブラウザが古くてvideo見れないね。ごめんね。</p>
</video>

このような感じになります。

 

poster属性の使い方

poster属性とは、映像のダウンロード中に表示される画像の URL を指定するものです。この属性の記述が無い場合はビデオの最初のフレームが読み込まれるまでは何も表示されず、フレームが読み込まれた後に最初のフレームをポスターフレームとして表示してくれます。ですが、読み込みが遅いとユーザーに動画がが埋め込まれていることを見落とされてしまう可能性があるので、poster属性はつけておいたほうがいいですね。

また、ブラウザが古いなど動画が動く環境でない場合に、動画の代わりに画像を表示させることができます。 poster属性で指定する画像は、ユーザーに動画の内容を知らせるような画像であることが望ましいです。 youtubeなどでよく見る最初の静止画像（サムネイル）のような役割を果たしてくれます。

 

[PR] Webデザインで副業する学習方法を動画で公開中

poster属性を使って動画のヒントとなる画像を表示してみよう

使い方はいたって簡単です。videoタグにposter属性として記述するだけです。実際に動くコードを用意しました。

<video controls muted poster="http://writer.techacademy.jp/wp-content/uploads/2020/01/vs200129-001.png">
  <source src="https://techacademy.jp/magazine/wp-content/uploads/2020/01/video.mp4"></source>
  <source src="https://techacademy.jp/magazine/wp-content/uploads/2020/01/video.webm"></source>
</video>

 

これから動画も扱うことが増えてくるweb業界ですので、ぜひとも使ってみてください。

 

監修してくれたメンター

メンター増田直子

40歳直前までHTMLの存在すら知らなかったのですが、現在はWordPressを中心としたwebデザイン/コーディングをしているフリーランサーです。

趣味はスキューバーダイビング・年間3度は海のある国内外へ旅行してます。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

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

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する

記事を検索

関連するキーワード

関連する記事

Herokuを使ってHTMLのwebサイトを公開する方法を現役エンジニアが解説【初心者向け】

Herokuを使ってHTMLのwebサイトを公開する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
HTML

今すぐ覚えられる！HTMLでJavaScriptを読み込む（呼び出す）方法を現役エンジニアが解説【初心者向け】

HTMLとCSSのみでは動きのあるWebページを作ることは難しいです。例えばプルダウンメニューやスライドインページなどはCSSのみで出来ない訳ではありませんが、...
HTML

HTMLでテーブル内に日付を表す方法を現役エンジニアが解説【初心者向け】

HTMLでテーブル内に日付を表す方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも...
HTML

HTMLで画像やテキストの回り込みを指定する方法を現役デザイナーが解説【初心者向け】

HTMLで画像やテキストの回り込みを指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLとCSSで横並びレイアウトの表示方法を現役エンジニアが解説【初心者向け】

今回はHTMLとCSSを使用して横並びレイアウトの表示をする方法を、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説...
CSS

HTMLで右寄せ・中央寄せ・左寄せをする方法【初心者向け】現役エンジニアが解説

この記事ではWebページ制作の際に、要素の右寄せ・中央寄せ・左寄せを実現するHTML/CSSの記述方法について、テックアカデミーのメンター（現役エンジニア）が実...
HTML

あわせてよく読まれている記事

HTML5のvideoタグで動画のストリーミング配信の仕方を現役エンジニアが解説【初心者向け】

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] Webデザインで副業する学習方法を動画で公開中動画を埋め込んで再生してみよう それでは、実際にサンプルコードを使って動画をブラウザで再生しましょう。まずは再生したい動画ファイルを用意します。動画は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開発やクラウドコンピューティングもやっており、ソフトもハードもなんでもやります。 TechAcademyジュニアではPythonロボティクスコースを担当しています。好きな言語はPython, Node.js。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。 プログラミングを独学で学習していて、このように感じた経験はないでしょうか？ ・調べてもほしい情報が見つからない ・独学のスキルが実際の業務で通用するのか不安 ・目標への学習プランがわからず、迷子になりそう
HTML

HTML5でストリーミング動画配信を実装する方法を現役エンジニアが解説【初心者向け】

HTML5でストリーミング配信された動画再生実装する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 HTML5でストリーミング配信された動画再生実装することで、HTML5だけでなく配信技術に対するご理解も深まります。 実務では、HTML5でストリーミング配信する会社への就職、HTML5でストリーミング配信を実装する案件獲得などに繋がります。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ストリーミング再生を実装する方法について詳しく説明していくね！ 大石ゆかり お願いします！   HTML5で配信された動画再生実装する方法（video要素の使い方） HTML5 では、videoタグを記述することでプラグインを使わずに動画を再生することができるようになりました。 その方法は、まず、videoタグの中にsrc属性で音声ファイルのアドレスを指定します。 次にcontrols属性によって、音声の再生や停止などのユーザーインターフェースを指定しましょう。 ブラウザごとに表示されるインターフェース（操作パネル）は異なるため、それぞれを確認してから使用しましょう。 また、controls属性を別の属性として記述することによってvideo表示方法を変えることが可能です。 autoplayは自動再生、loopは繰り返しなどと変更することが可能です。   動画のストリーミング配信とは 動画をストリーミング再生する場合大きく２種類の考え方があります。 それが、HTTP Live Streamingとプログレッシブダウンロードです。   HTTP Live Streaming 動画のストリーミング配信で一般的な方法はHTTP Live Streaming（HLS）という技術を利用しています。 HTTP Live Streamingは元々、アップルがiOS向けに開発しました。 HTTPという汎用的なプロトコル（規格）を利用することで、様々な媒体に対して動画配信が可能です。 メリット 手元の端末にダウンロードしない為、著作権対策が可能 専用サーバーを用意する必要がない デメリット 通信回線が高速安定でない場合は再生が止まってしまう   プログレッシブダウンロード プログレッシブダウンロードは疑似ストリーミングと呼ばれ、配信データをダウンロードして再生します。 メリット すべてのデータをダウンロードし終わっていれば、オフライン状態で再度再生が可能。 デメリット オフライン状態で再度再生が可能ということは、著作権上問題が発生する。     [PR] Webデザインで副業する学習方法を動画で公開中HTML5で動画のストリーミング再生を実装する方法 HTTP Live Streaming HTTP Live Streamingを利用したストリーミング配信動画の再生実装方法です。   m3u8ファイルについて m3u8ファイルはストリーミング再生される動画のプレイリストのようなものです。 m3u8ファイル自体をダウンロードしてもオフラインで再生はできません。 m3u8ファイルを利用してストリーミング再生している例としては、TVer、FOD、GYAO!などがあります。   m3u8ファイルを利用した実装 HTTP Live Streamingを利用したストリーミング配信動画を利用する場合は、ライブ配信もオンデマンド配信もどちらにも適しています。 ライブ配信というのは、現在進行系で配信している内容を、配信と同時に見ることを意味します。 オンデマンド配信というのは、過去に配信されていたものを、後日ストリーミング再生で見ることを意味します。 <video src=”./video/test.m3u8″ controls> でtest.m3u8というファイルを指定することでストリーミング配信されたファイルを再生することが出来ます。 これは、htmlと同じ階層内にあるvideoフォルダの中に、test.m3u8というファイルを用意しているという意味になります。 これだけは覚えたい！絶対パスと相対パスの違いを参考にしていただくと階層についてご理解が深まります。 ＊なお次のコードを動作させるためには、./video/test.m3u8の位置に必要なファイルを用意する必要があります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> </head> <body>    <video src="./video/test.m3u8" controls>     </video> </body> </html>   プログレッシブダウンロード プログレッシブダウンロードを利用して、疑似ストリーミング再生をする方法です。 mp4の利用 <source src=”./video/test.mp4″> のように指定することでプログレッシブダウンロードを利用した疑似ストリーミングが可能です。 大きなサイズの動画の場合には分割させる必要があるものの、短い動画はvideoタグによりmp4ファイルなどを再生することが可能です。 ＊なお次のコードを動作させるためには、./video/test.mp4の位置に必要なファイルを用意する必要があります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>プログレッシブダウンロード</title> </head> <body>    <video controls>         <source src="./video/test.mp4">     </video> </body> </html> QuickTimePlayerの利用 また、QuickTimePlayerで再生することもできます。 <source src=”./video/test.mov”> で指定したvideoタグをhtmlに埋め込んで利用可能です。 ＊なお次のコードを動作させるためには、./video/test.movの位置に必要なファイルを用意する必要があります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>QuickTimePlayer</title> </head> <body>    <video controls>         <source src="./video/test.mov">     </video> </body> </html>   この記事を監修してくれた方 中本賢吾（なかもとけんご） アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。小学生がUnityでオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がノーコードでSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。   大石ゆかり HTML5でストリーミング再生を実装する方法がよく分かったので良かったです！ 田島悠介 ゆかりちゃん、今後も分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。 プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
HTML

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

HTMLで複数の動画切り替えを実行する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 複数の動画切り替えを実行する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 動画を再生するには 複数の動画を切り替えるには 複数の動画を切り替えてみよう   動画を再生するには HTMLを動画で再生させるためにはvideoタグを使う方法があります。以下のようにvideoタグにsrc属性で動画のリンクや保存先を指定すれば動画を表示、再生させることができます。 <video src="./video.mp4"></video> videoタグについて詳しくは以下の記事をご覧ください。 HTML5のvideoタグで動画のストリーミング配信の仕方を現役デザイナーが解説【初心者向け】   [PR] Webデザインで副業する学習方法を動画で公開中複数の動画を切り替えるには さて、先ほど紹介した方法だと動画を一つしか再生できませんが、ここから複数の動画を動的に変更させるためにはどうすればいいのでしょう？ まず真っ先にサーバーサイドのコードを用意して動画ごとにページを作ることですが、それだと用意するファイル数も多くなりますし、毎回サーバーリクエストを行なうことになります。同じページ上で複数の動画を動的に切り替えるためには、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属性も変わるようにしたいときも同様の方法で動画と一緒に切り替えることができます。     コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
HTML

HTMLで埋め込み動画の音声を消す方法を現役デザイナーが解説【初心者向け】

HTMLで埋め込み動画の音声を消す方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 埋め込み動画の音声を消す方法について詳しく説明していくね！ 大石ゆかり お願いします！   動画を埋め込むvideoタグ 以前はwebサイトに動画を埋め込みたい際、FlashやQuickTimeなどのプラグインを使うのが一般的でしたが、HTML5ではvideoタグを使って簡単に動画を表示させることができます。 基本的なコードはいたってシンプルです。 <video src="hoge.mp4" controls></video> これで動画をいとも簡単に埋め込むことができます。また、videoタグはimgタグとは違い、閉じタグが設定されているので <video src="hoge.mp4" controls> <p>お使いのブラウザは古いので、この動画を見ることができません。</p> </video> のように、動画がサポートされていないブラウザに対して代替テキストを入れ子にして記述することもできます。   音声を消すmuted属性 とても簡単な動画の埋込ですが、サイトを開いたとき、もしくは再生ボタンを押したときにいきなり音が鳴ってしまったら閲覧者もびっくりしますし、スマホなどでは周りの迷惑になってしまいます。そんな時に設定しておきたいvideoタグの属性が「muted」です。こちらを記述しておくことで、動画が再生されたときは最初は音を消した状態で再生されるように設定することができます。 videoタグの属性ですので、videoタグ内に記述してあげるだけなので、いたって簡単です。 <video src="hoge.mp4" muted controls></video> たったアルファベット5文字を記述するだけなので、videoタグを用いるときはなるべく記述してあげたほうがいいでしょう。   [PR] Webデザインで副業する学習方法を動画で公開中埋め込み動画の音声を消してみよう 実際に音声を消した状態で動くコードを用意いたしました。コードはコチラです。一応対応ブラウザの幅を広げるため.webmの拡張子の動画も用意しておきました。 <video controls muted> <source src="https://techacademy.jp/magazine/wp-content/uploads/2020/01/video.mp4"></source> <source src="https://techacademy.jp/magazine/wp-content/uploads/2020/01/video.webm"></source> </video> ぜひ試してみてください。   監修してくれたメンター メンター増田直子 40歳直前までHTMLの存在すら知らなかったのですが、現在はWordPressを中心としたwebデザイン/コーディングをしているフリーランサーです。 趣味はスキューバーダイビング・年間3度は海のある国内外へ旅行してます。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。 プログラミングを独学で学習していて、このように感じた経験はないでしょうか？ ・調べてもほしい情報が見つからない ・独学のスキルが実際の業務で通用するのか不安 ・目標への学習プランがわからず、迷子になりそう
HTML

HTMLの動画ダウンロードを禁止する方法を現役エンジニアが解説【初心者向け】

HTMLの動画ダウンロードを禁止する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次videoタグについてposter属性の使い方poster属性を使って動画のヒントとなる画像を表示してみよう監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 動画ダウンロードを禁止する方法について詳しく説明していくね！ 大石ゆかり お願いします！   Webページに動画を表示させる方法 まずは、どのようにWebページに動画を表示させるのかについて解説します。 ご自身で用意した動画ファイルがある場合、videoタグを用いることでHTMLに設置できます。 YouTubeにアップロードした動画の場合は、動画ページの画面から埋め込みコードをコピーし、HTMLに貼り付けるだけで設置できます。 videoタグを用いて設置するメリットは、YouTubeをはじめとする外部ストリーミングサービスがダウンしても動画を表示させられることです。   以下は、videoタグを用いて動画を表示させる最もシンプルなサンプルコードです。 <video controls> <source src="test.mp4" type="video/mp4"> </video> 上記コードに属性を加えることで、動画ダウンロード禁止や自動再生などの設定ができるようになります。   動画ダウンロードを禁止する方法 videoタグで設置した動画のダウンロードを禁止するには、動画操作パネルにあるダウンロードボタンを非表示にする方法があります。 videoタグ内に、controlsList="nodownload" と属性を追記をすることで実装可能です。 しかし、ダウンロードボタンが非表示になっても右クリックで動画ファイルのダウンロードが可能なため、右クリックの操作も無効にする必要があります。 さらにvideoタグ内に、oncontextmenu="return false;" と追記しましょう。 これで右クリック操作が無効になり、動画ファイルがダウンロードできない状態になります。   以下がサンプルコードです。 <video controls controlsList="nodownload" oncontextmenu="return false;"> <source src="test.mp4" type="video/mp4"> </video>   [PR] Webデザインで副業する学習方法を動画で公開中ページのすべてのファイル操作を禁止する方法 ページ内のすべての動画ファイルや画像ファイルのダウンロードを禁止するには、ページ全体で右クリックできないようにする方法がよく用いられます。 bodyタグ内に、oncontextmenu="return false;" を記述する方法です。 この場合、動画操作パネルが使えなくなるため、videoタグ内に自動で動画が始まるようにする属性 autoplayを指定しておくと良いでしょう。 また画像ファイルに対しては、CSSにてクリックを不可能にするpointer-events: none; や、ドラッグ選択が無効になる user-select:none; などを追加しておくと良いでしょう。   以下がサンプルコードです。 HTML <body oncontextmenu="return false;> 〜 中略 〜 <video autoplay preload="auto"> <source src="test.mp4" type="video/mp4"> </video> CSS img {   pointer-events: none;   user-select:none; }   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
HTML

HTMLでラジオボタンとチェックボックスを表示する方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、ラジオボタンとチェックボックスを表示する方法について、初心者の方にも分かりやすく2人のキャラクターを用いて解説しています。 そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ラジオボタンとチェックボックスを表示する方法について詳しく説明していくね！ 大石ゆかり お願いします！   入力フォームの選択ボタン 入力フォームでよく見かける選択ボタンに、ラジオボタンとチェックボックスがあります。どちらも<input>タグにtype属性を指定することで簡単につくることができます。 <input>タグについては HTMLのinputタグとtextareaタグを使ってテキスト入力欄を表示する方法 をご覧ください。 ラジオボタン、チェックボックスは以下のタグで表示することが可能です。 ・ラジオボタン  <input type=”radio”> 選択肢のなかから、ひとつだけを選択するボタン （※同一name属性内で、一項目しか選択できない） ・チェックボックス  <input type=”checkbox”> 選択肢のなかから、複数選択ができるボタン （※同一name属性はひとまとまりのデータとして扱われる） ・value属性 選択項目をデータとして送信する際に、データの受けとり手に値を知らせます。 ・name属性 要素（ここでは<input type=”●●”>）に名前をつけて、なんの要素（選択ボタン）であるかを指定します。   大石ゆかり typeを使うと他にもいろいろ設定できるんですかー？ 田島悠介 他にも送信ボタンであったり、文字を入力できるフォームも簡単に作れるんだよ！ 大石ゆかり へぇ〜じゃあアンケートページとかでよく使われてそうですね！   それでは具体的な実装方法をみていきましょう。   ラジオボタン ラジオボタンという名前は、昔の自動車に搭載されていたカーラジオが、ひとつの局のボタンを押すと、他の局のボタンが選択できない仕様だったことから来ているそうです。 ラジオボタンは選択肢のなかから、ひとつだけを選択する入力ツールになります。   <input type=”radio”>にname属性を”gender”、valueを”male”と”female”に設定して性別選択ボタンをつくりましょう。タグの終わりには、実際にブラウザで表示される項目名(男性・女性)を書きます。選択肢の値(value)が”male”と”female”の、”gender”という名前(name)がついたラジオボタン（<input type=”radio”>）です。 <input type="radio" name="gender" value="male">男性 <input type="radio" name="gender" value="female">女性   これでどちらか一方を選択できるボタンができました。   上記のHTMLをコピー&ペーストして、もうひとつラジオボタンをつくってみましょう。ここでは、Webページの訪問者からサイトを知った経緯を知りたいと仮定して、選択肢の値(value)にサイトを知るきっかけとなった項目を設定し、”trigger”という名前のついたラジオボタンをつくります。 <input type="radio" name="trigger" value="facebook">facebook <input type="radio" name="trigger" value="twitter">twitter <input type="radio" name="trigger" value="hatebu">はてなマーク <input type="radio" name="trigger" value="syoukai">知人からの紹介   今度は、”gender”と”trigger”の2つの選択ツールができました。 このとき、name属性を”trigger”に書き換え忘れて”gender”のままにしておくと、”gender”と名付けられたすべての項目「男性、女性、facebook、twitter、はてなブックマーク、知人からの紹介」から、どれか一つの項目を選択することになってしまいます。 複数の選択群をつくる際には、必ずカテゴリーごとにしっかりとname属性を分けるように注意しましょう。   [PR] Webデザインで副業する学習方法を動画で公開中disabled属性 disabled属性は、フォーム部品を無効化することができます。 この属性で指定することで、フォーム部品の選択や書き換えを行うことができます。 用途の目的としては、同じフォーム流用するが、ユーザーの選択肢によってdisabeld属性を使用し一部の選択肢の書き換えを禁止する時に使用します。 disabled属性の実例 <!DOCTYPE html> <html> <head><meta charset="UTF-8"></head> <body> <!-- 性別選択 --> <input type="radio" name="gender" value="male" disabled/>男性 <input type="radio" name="gender" value="male"/>女性
HTML

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTML5でvideoタグのposter属性で動画のヒント画像を表示する方法を現役デザイナーが解説【初心者向け】