TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLに埋め込んだ動画の音量をミュートに指定する方法を現役デザイナーが解説【初心者向け】
HTML

HTMLに埋め込んだ動画の音量をミュートに指定する方法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLに埋め込んだ動画の音量をミュートに指定する方法について解説しています。videoタグを使った動画埋め込みの基本、muted属性によるミュート設定の方法を説明します。状況によって音量の設定を使い分けてみましょう。

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

HTMLに埋め込んだ動画の音量をミュートに指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

埋め込んだ動画の音量をミュートに指定する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

動画の埋め込み方

HTMLに動画を埋め込むにはHTML5のvideoタグを使用します。

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

また、ユーザーがvideoタグがサポートされていないブラウザで閲覧した時、メッセージを表示することができます。

<video src="video.mp4">
<p>お使いのブラウザは動画を閲覧できません。</p>
</video>

 

音量をミュートにする方法

電車やオフィスなど公共の場で閲覧することを考慮し、音声をミュートにすることができます。muted属性を入れることで実装できます。

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

 

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

動画を埋め込んで音をミュートにしてみよう

実際に動画を埋め込んでみましょう。サンプルを用意しましたので、確認してみましょう！

See the Pen
video by This is standard (@koutafunahashi)
on CodePen.

サンプルではNHKが提供している無料動画を使わせていただきました。NHKならではの素材が揃っています。

http://www1.nhk.or.jp/archives/creative/material/

 

監修してくれたメンター

舟橋幸太郎

フリーのWebデザイナー、グロースハッカーです。

KaizenPlatform社主催のGrowth Hacker Awardsで受賞歴があります。過去行ったA/Bテストが実績として書籍に掲載されました。

TechAcademyではWebデザインコースを担当しています。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

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

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

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

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

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

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。

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

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

記事を検索

関連するキーワード

関連する記事

HTMLでid属性が重複した時の動きについて現役デザイナーが解説【初心者向け】

HTMLでid属性が重複した時の動きについて解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさらに理解が深...
HTML

HTMLの入力フォームにplaceholder属性を使ってユーザビリティを向上する方法を現役デザイナーが解説【

HTMLの入力フォームにplaceholder属性を使ってユーザビリティを向上する方法について解説します。 また、HTMLの記述方法がわからない場合は、 ...
HTML

HTMLで一つのタグにidを複数使う方法を現役エンジニアが解説【初心者向け】

HTMLで一つのタグにidを複数使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そ...
HTML

HTMLでコメントを書く方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、HTMLでコメントを書く（コメントアウトする）方法につい...
HTML

HTMLの特殊文字で表示できる括弧を現役エンジニアが紹介【初心者向け】

HTMLの特殊文字で表示できる括弧について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。  ...
HTML

HTMLでhref属性の使い方を現役エンジニアが解説【初心者向け】

HTMLでhref属性の使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HT...
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に関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 埋め込み動画の音声を消す方法について詳しく説明していくね！ 大石ゆかり お願いします！   動画を埋め込む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

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

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サイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。 プログラミングを独学していて、このように感じた経験はないでしょうか？ ・調べてもほしい情報が見つからない ・独学のスキルが実際の業務で通用するのか不安 ・目標への学習プランがわからず、迷子になりそう
HTML

HTMLでvideo要素で動画が自動再生されない原因と対処法を現役エンジニアが解説【初心者向け】

HTMLでvideo要素で動画が自動再生されない原因と対処法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 video要素で動画が自動再生されない原因と対処法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 video要素について video要素の注意点と問題点 自動再生されない原因と対処法 まとめ   video要素について video要素はWebページ内に動画を埋め込む要素です。簡単なサンプルプログラムを見てみましょう。なお動画はフリー素材(商用利用可能)なものを以下のサイトから使用しています。 Mazwai – Free video clips <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Cache-Control" content="no-cache"> <title>Sample</title> <style> video { width: 300px; height: auto; } </style> </head> <body> <video src="myvideo.mp4" controls muted autoplay playsinline
HTML

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

HTMLの動画ダウンロードを禁止する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次動画の埋め込み方音量をミュートにする方法動画を埋め込んで音をミュートにしてみよう監修してくれたメンター そもそも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

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLに埋め込んだ動画の音量をミュートに指定する方法を現役デザイナーが解説【初心者向け】