Step 3-10 Webページに動画を埋め込むとき最適な形式・拡張子

Web担ビギナーの目次を知りたい方はこちら

3-10では、Webページに埋め込んで使う動画ファイルの基本知識を紹介します。

動画のファイル形式と特徴

動画のファイル形式で、Web担当者が覚えておいてほしいのは、MP4（エムペグフォー）と、WebM（ウェブエム）です。これらは動画データを圧縮する形式で、圧縮することで容量を下げ、インターネット経由でも再生できるようにしています。

• MP4　拡張子は.mp4
  圧縮率が高いながらも高画質で、現在のWebで使われる動画の主流となっているファイル形式です。さまざまなプラットフォームやプレーヤーに対応しており、多くのサイトで使われています。
• WebM　拡張子は.webm
  GoogleがWeb上での再生にフォーカスして開発した動画ファイル形式です。現在では、Chromeだけでなく、主要ブラウザでも視聴できるようになりました。

動画をWebページに埋め込む方法

動画をWebページで表示する際はVideoタグを使います。たとえば、videofile.mp4という動画ファイルを無音で自動再生させるには、ソースコードに次のように記述します。

自動再生ではなく、再生や停止、音量ボタンを表示させたい場合は、次のようにします。

YouTubeを利用する方法

Webページに埋め込むのではなく、YouTubeに動画をアップロードし、それをWebページから視聴できるようにする方法もあります。

YouTubeへのアップロード

YouTubeへのアップロード方法は、YouTubeのヘルプページに説明があります。

YouTubeヘルプ 動画のアップロード
https://support.google.com/youtube/answer/57407

パソコンであれば、YouTube Studioにログインし、[作成]→[動画をアップロード]をクリックして、アップしたい動画ファイルを選択するだけです。

YouTube動画のWebページへの埋め込み

YouTubeにアップロードした動画をWebページで視聴できるようにする方法についても、YouTubeのヘルプページに掲載されています。

YouTubeヘルプ 動画と再生リストを埋め込む
https://support.google.com/youtube/answer/171780

アップロードした動画を表示し、「共有」→「埋め込む」で、次のような<iframe>タグのコードが表示されますので、それをWebページのソースコードにコピー＆ペーストすればOKです。

なぜ、動画なのか？

近年は動画によるマーケティング活動に取り組む企業が増え、トップページのメインビジュアルとして動画を埋め込むケースも増えています。確かに動画は目を引きますが、Webへの掲載にあたっては、「この動画は本当にWebページに必要なのか？」を検討してください。

動画制作には、企画立案からシナリオ作成、ロケハン、撮影、編集などさまざまな工程がありますし、人手もかかります。当然それなりの予算を必要とします。また、動画はユーザーの目を引きますが、サイトの表示スピードは確実に遅くなります。

動画だらけで重いサイトでは、ユーザーのためになりません。掲載にあたっては、「なぜ動画でなければならないのか？」「本当に写真やテキストではだめなのか？」を今一度考え、慎重に行いましょう。

3-10では、Webページで使う動画の基礎知識を解説しました。3-11では、Web制作で気を付けたい著作権について紹介します。

ポイント

3-10 「Webで使う動画の基礎知識」のポイント

• 長尺動画はあまり視聴されない
• Webでは、MP4、WebMといったファイル形式がよく使われている
• Webページに動画を埋め込むのではなく、YouTubeに動画をアップし、それをWebページから視聴できるようにする方法もある

やってみよう

• 自社のWebサイトに掲載している動画を視聴して、どれくらいの長さなのか、その動画が何のために使われているかを確認してみよう。

本記事の監修者

白石 裕一朗（しらいし ゆういちろう）

株式会社キノトロープ コンサル部 副部長
ディレクター、コピーライター

25年以上にわたる専門誌の編集業を経て、キノトロープへ入社。
年間で500本以上の「成果に結びつく」コンテンツを監修。
企業セミナー・大型セミナーの講師も務める。