Flashがいらない、どんなデバイスでも再生出来る動画や音声データを埋め込める、スマホサイトに対応しやすいなどの様々な利点から、HTML5でサイト構築する機会も増えてきたのではないでしょうか?

ここでは、HTML5で埋め込み可能な動画ファイルや音声ファイルについて、どのようなフォーマットにする必要があるのか調べてみました。

大手のブラウザではどのような動画フォーマットをサポートしている?

HTML5で動画を再生するには、HTML5の”

現状、PC用Chrome、Safari、IE、 Firefox、また、スマートフォン用Safari、Chromeで調べたところ、IE8以下を除き、MP4形式動画またはWebM形式動画のいずれかで対応できますので、この両方の形式で動画を用意しておけば問題ないでしょう。

HTML5対応で選ぶべきMP4形式動画とWebM形式動画とは?

– MP4形式動画の場合

一般的なブラウザに対応させるために、最も問題が発生する可能性が少ないコーデックがビデオコーデックとしてH.264、オーディオコーデックとしてAACです。

*MP3オーディオコーデックは、Safariではサポートされていません。

– WebM形式動画の場合

一般的なブラウザに対応させるために、最も問題が発生する可能性が少ないコーデックがビデオコーデックとしてVP8またはVP9、オーディオコーデックとしてVorbis または Opusです。

簡単にMP4やWebM形式動画に変換するには?

– Online Video Converter http://convert-video-online.com/ja/

ファイルをアップロード、またはdropbox等のクラウドサービス、URLからファイルをアップロードし、変換後のフォーマットを指定して変換ボタンをクリックします。

MP4、WebM以外にも、300 種類を超えるフォーマットを変換できます。

– モーションエレメンツの無料ビデオコンバーター https://www.motionelements.com/ja/video-converter

を使用することで、プロフェッショナル向けのソフトウェアも必要なく、ブラウザから所定の場所に動画をアップロードするだけで、それぞれの形式に変換された動画がメールで届きます。変換元と変換後の動画形式がはじめから指定されているので、非常に簡単に使用できます。

各ブラウザのサポート情報は随時更新されていきますので、最新情報は都度確認することをおすすめしますが、2016年7月現在では、MP4形式動画またはWebM形式動画を作成しておくことでメジャーなブラウザのHTML5に対応できる、と言ってしまって良さそうです。

動画変換も無料ツールで簡単にできます。是非お試し下さい!