TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLで埋め込み動画の音声を消す方法を現役デザイナーが解説【初心者向け】
オーダーメイドコース
icon
icon
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に関する内容だね！

大石ゆかり

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

田島悠介

埋め込み動画の音声を消す方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

動画を埋め込む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で文章の途中で改行する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、...
HTML

HTMLの文法チェックツールを使って正しくコーディングする方法を現役デザイナーが解説【初心者向け】

HTMLの文法チェックツールについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTM...
HTML

HTMLで略語を表現する方法 - abbr【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、HTMLの略語・名前の特記・住所表現 について解説します...
HTML

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

HTMLでvideo要素で動画が自動再生されない原因と対処法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...
HTML

HTMLでformを使って送信フォームを作成する方法【初心者向け】

最近HTMLを勉強し始めた方は、HTMLは文字や画像を表示するだけの言語と思っておられる方がいらっしゃるかもしれません。HTMLは文字や画像以外にも、簡単なフォ...
HTML

HTMLでテーブルのセルを結合する方法を現役エンジニアが解説【初心者向け】

HTMLでテーブルのセルを結合する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 &nb...
HTML

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

WordPressで記事にYouTubeの動画を埋め込む3つの方法【初心者向け】

WordPressではYouTubeの動画を簡単に記事に埋め込むことができます。 今回はYouTubeの動画を埋め込む3つの方法をご紹介します。 プラグインを使わなくても簡単に実装できます。   目次動画を埋め込むvideoタグ音声を消すmuted属性埋め込み動画の音声を消してみよう監修してくれたメンター   大石ゆかり 田島メンター！！WordPressの記事の中にYouTubeの動画を入れたいんですけど、どうしたらいいですか〜？ 田島悠介 いくつか方法があるけど、どれも難しくないから、一応ひととおり教えてあげるね！ 大石ゆかり はい、お願いします♪   事前準備 まずは投稿の画面を開きましょう。 ここに動画を埋め込んでいきます。 投稿の画面の開き方がわからない方は、WordPressで記事を投稿する方法を見ながら、以下の画面を表示させてください。   URLを書き込む まずは一番簡単な方法です。 挿入したい動画のページを開き、URLをコピーします。   記事内にURLをペーストします。 これだけです。   このときの注意点として、URLを書いた行にはURL以外の文字を入力しないように気をつけてください。 例えば、以下のように入力してしまった場合、動画は埋め込まれません。   また、この方法で埋め込む場合、動画のサイズは指定することができず、自動的にそのページの横幅に合わせて表示されます。   [PR] Webデザインで副業する方法とはショートコードを記述する 先ほどの方法では動画のサイズを指定できなかったので、サイズを指定したい場合は次の方法を使います。 今度は＋マークをクリックして「ショートコード」のブロックを選択します。 動画のURLの前後に、以下のようなショートコードを記述してください。 幅はピクセル単位で指定します。   動画の縦横の比率は変えることができませんので、幅を指定すると自動的に高さが設定されます。   また、URLを直接書き込む場合は、前後に文字を入力できませんでしたが、ショートコードを使う場合は前後に文字を入力しても埋め込むことができるので、以下のように入力しても大丈夫です。   実際の記事では、以下のように表示されます。   YouTubeから提供されている埋め込みコードを使う 最後に、YouTubeが提供している埋め込みコードを使った動画の埋め込み方をご紹介します。   まずは、埋め込みたいYouTubeの動画のページを開いてください。 動画の下の「共有」をクリックしてください。   すると、さらに「埋め込む」をクリックします。   埋め込むためのコードが右側に表示されます。 右下の「コピー」をクリックします。   ここでWordPressの「新規投稿を追加」画面を開き、＋マークをクリックして「カスタムHTML」のブロックを選択します。 埋め込みたい場所に埋め込みコードをペーストします。 これで動画の埋め込みは完了です。 以上、記事に動画を埋め込む方法を3つご紹介しました。 どれも難しくないと思うので、しっかりマスターしましょう。   さらにWordPressを使いこなしたい場合は、WordPressでファビコンを表示させる方法もあわせてご覧ください。   大石ゆかり 無事貼り付けることができました〜♪ 田島悠介 よかったね。どの方法も簡単だから、自分が使いやすい方法を使うといいね♪ 大石ゆかり はい♪   WordPressを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい WordPressでのサイト制作を学習していて、このように思ったことはありませんか？ テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。 まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。
WordPress

Pythonのformatメソッドの使い方を現役エンジニアが解説【初心者向け】

Pythonのformatメソッドの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して、初心者向けに解説します。   Pythonについてそもそもよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Pythonのformatメソッドの使い方について詳しく説明していくね！ 大石ゆかり お願いします！   formatメソッドとは formatメソッドは文字列に変数を埋め込むときに使用するメソッドです。 例えば「今日は○○月××日」という文字列に対して、〇〇と××に変数の値を埋め込むときにformatメソッドを使用します。 formatメソッドを使えば固定の文字列を何度も使いまわすことが可能です。   formatメソッドの使い方 formatメソッドは以下のコードで使用しましょう。 '文字列{}文字列'.format(埋め込みたい値) 文字列の間に{}があり、その箇所にformatメソッドの引数となる埋め込みたい値を埋め込みます。   また、複数の変数を埋め込むことも可能であり、以下のように記述します。 '文字列{}文字列{}文字列'.format(埋め込みたい値1, 埋め込みたい値2) {}の中に引数の番号を書くと引数の順番に関わらず埋め込むことが可能です。 {}の中に番号を書かない場合は、引数の順番通りに一番左の{}から埋め込んでいきましょう。   [PR] Webデザインで副業する方法とは実際に書いてみよう 実際にformatメソッドを使ってみましょう。 以下、プログラムソースコードとなります。 str = "こんにちは！私の名前は{}です。" name = "山田太郎" print(str.format(name))   実行結果 こんにちは！私の名前は山田太郎です。 {}の中にformatメソッドの引数である変数を埋め込むことができました。 次に複数の変数を文字列に埋め込むときを記述してみましょう。   以下、ソースコードになります。 str = "私の名前は{2}です。私の誕生日は{0}月{1}日です。{2}をよろしくお願いします！" name = "山田太郎" month = 12 date = 1 print(str.format(month, date, name))   実行結果 私の名前は山田太郎です。私の誕生日は12月1日です。山田太郎をよろしくお願いします！ {}の中に数字を書くことで変数の指定の位置のものを埋め込むことができます。文字列の中で複数回同じ変数を埋め込むことも可能です。 最後にリストの要素を文字列に埋め込む方法をみていきます。 プログラムソースコード str = "私の名前は{0[0]}です。私の誕生日は{0[1]}月{0[2]}日です。{0[0]}をよろしくお願いします！" list = ['山田太郎', 12, 1] print(str.format(list))   実行結果 私の名前は山田太郎です。私の誕生日は12月1日です。山田太郎をよろしくお願いします！ 埋め込み文字列を{リストの位置[要素番号]}で指定してあげることでリストの要素を埋め込むことができます。   まとめ この記事ではPythonでformatメソッドを使う方法について解説しました。 formatメソッドあPython2.6以降でしか使えません。 Pythonのバージョンにも気を付けて使いましょう。   執筆してくれたメンター メンターSさん システムエンジニアとしてこれまで行政システムや医療用システムの保守、開発に携わりました。 JavaやPython、PHP、Kotlinなど様々な言語での開発経験があります。 TechAcademyではJavaコース、Pythonコース、AIコースなど7コースを担当しています。   大石ゆかり Pythonのformatメソッドの使い方がよく分かったので良かったです！ 田島悠介 ゆかりちゃん、これからも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でも、Pythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
Python

YouTubeの動画をHTML5に埋め込む方法を現役エンジニアが解説【初心者向け】

YouTubeの動画をHTML5に埋め込む方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 YouTubeの動画をHTML5に埋め込む方法について詳しく説明していくね！ 大石ゆかり お願いします！   動画をHTML5に埋め込む方法 HTMLに対して、videoタグを使用することで動画を簡単に埋め込むことが可能です。 この場合、プラグインを使わずに動画再生ができます。 src属性により動画ファイルのアドレス・保存先を指定する、videoタグ内にwidthとheightでコンテンツの幅と高さを指定できます。 また、再生方法も適宜変更することが可能です。   conrtols属性を使い、ビデオの再生や停止のボタンなどのユーザーインターフェースを表示できるでしょう。 自動で再生したい場合にはautoplay属性を使用し、再生終了後にスタートに戻り、再生を再度行なう場合にはloop属性を使用できます。   YouTubeの動画をHTML5に埋め込む方法 iframeタグを使用することで、HTMLにyoutubeの動画を埋め込むことが可能です。 youtubeのホーム画面から適宜埋め込むyoutube動画を選択し、「共有」を選択、「埋め込む」を選択、表示されたiframeタグで書かれたコードをコピーします。 コピーしたコードをbody内に直接貼り付けることで、youtube動画を表示できます。   [PR] Webデザインで副業する方法とは実際に書いてみよう imageフォルダの中にあるmp4形式の動画を埋め込む場合は、下記のように記述します。 <body>     <video src="image/video.mp4" controls="controls"></video> </body> youtube動画を埋め込む場合 <body>     （youtubeからコピーしたifarmeタグのコードをそのまま記述する。例　<iframe　◯◯></iframe>） </body>   執筆してくれたメンター 木村勇土 TechAcademyの現役メンター。 現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。 WordPressを中心とした自社のWebサイトの修正などを行なっている。   大石ゆかり YouTubeの動画をHTML5に埋め込む方法がよく分かったので、良かったです！ 田島悠介 ゆかりちゃん、今後も分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
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

サイトの印象を変えたい！HTMLで動画を埋め込みする方法【初心者向け】

今回は、HTMLで動画を埋め込みする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 サイトのトップに動画を入れているサイトも増えてきているので、トレンドを抑えるためにも役立つ知識になるでしょう。   目次動画を埋め込むvideoタグ音声を消すmuted属性埋め込み動画の音声を消してみよう監修してくれたメンター   そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   動画の埋め込み方法 動画を埋め込むためのHTMLのタグには、下記の2つがあります。 ifarmeタグ videoタグ 各々のメリットや使い分けの方法を解説します。   iframeタグ 最も簡単に埋め込むだけであれば、<ifarme>タグを用いるのが一般的です。 <iframe>タグは作成しているページに別のURLにあるコンテンツを埋め込んで表示する際に、汎用的に利用できるタグです。 ですので、動画だけではなく、別サイトのコンテンツ全体を読み込むこともできます。 動画の場合は、<iframe>を使うと大きさからURLまで設定でき、ホームページにアップロードしている動画だけでなく、「YouTube」にアップされている動画を埋め込むことができます。   videoタグ HTML5から実装されたのが<video>タグです。 これは、今までの<iframe>タグにはなかった「loop」や「autoplay」といった機能が実装できます。 「loop」指定で動画を継続的に再生したり、「autoplay」を指定すると表示と同時に自動的に再生が開始します。 さっそく上記2つのやり方を見ていきましょう。   大石ゆかり videoタグって何でしょうか？ 田島悠介 HTML5から追加された、動画のためのタグなんだ。 大石ゆかり YouTubeの動画を自分のサイトで使う時は、iframeタグで書いてたんですけど。 田島悠介 そうだね。ただ、動画専用のタグだと、いろいろな用途に使うことができるんだ。とりあえず、簡単に書いてみよう！   実際に書いてみよう 実際にソースコードを書いてみて、Webブラウザで確認をしましょう。 動画を準備して、同じ階層においてください。 試す場合には、下記の「sample.mp4」の部分を自分のビデオファイルと同じ名前にしましょう。   iframeタグ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <iframe width="560" height="315" src="sample.mp4" frameborder="0" allowfullscreen></iframe> </body> </html> 上記の例では、frameborderで動画の外枠の幅を指定したり、allowfullscreenを指定すると全画面モードにすることを許可します。   videoタグ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <video controls autoplay loop><source src="sample.mp4"></video> </body> </html> 上記の例では操作コントローラーを表示し、自動再生してループ再生する指定になります。 今日のHTMLコーディングでは、インラインフレームが使用できないようなページが増えているので、<video>タグを使うのが良いでしょう。 インラインフレームはクラッカーと呼ばれる悪い人たちによって、ホームページに悪意ある改ざんがされやすい要素だからです。 <iframe>はいわば別のページを表示する仕組みですので、別ページを表示できるHTMLの構造自体を廃止してしまうという動きがあります。 今から組む方は<video>タグで挑戦してみましょう。 またホームページの中には<iframe>が使用できないところもあるので、気を付けておきましょう。   大石ゆかり ブラウザで見たところ、どちらも変わりないですね。 田島悠介 確かにそうだね。 大石ゆかり videoタグ特有のことってないんですか？ 田島悠介 動画をページの背景につかったり、オリジナルの再生ボタンを作れたり、コマ送り表示とかプログラミングと親和性が高いんだ。 大石ゆかり 難しそうだけど、面白そうですね！   [PR]
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

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

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

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLで埋め込み動画の音声を消す方法を現役デザイナーが解説【初心者向け】