HTML5用のvideoを用意して表示するまでの説明（2016年4月版）

HTML5のビデオ形式はMP4にする

HTML5のvideoについては、悪い冗談としか思えないくらい、いろんなエンコード方法があります。
対応・非対応の状況もめまぐるしく変わっていきます。
過去のブログ情報は、ほぼあてになりません。

今現在、HTML5がどのような状況になっているかを確認するのは、Can I useというサイトが便利です。
HTML5のvideoタグで、一番普及率の高いファイル形式は、MP4です。
MP4形式の各ブラウザの対応状況をみてみると、このようになっています。（以下の画像は2016年4月15日現在）

IE8が非対応（赤）と表示されていますが、JavaScriptを使うとAdobeFlash経由でMP4を再生できるようです。対応する必要があるという数奇な方は、下記のサイトも参考にして下さい。
【Web制作】HTML5のvideoタグにはMP4形式動画だけ指定すればよい（IE8対応）＠2014年末

Opera Miniも普及率が0.03%であることから、対応から外します。

調べた結果、MP4形式のビデオだけが用意できれば十分であることがわかりました。

MP4ファイルの作り方

MP4形式について

HTML5に対応したMP4はH.264という圧縮方式で変換したもので、音声がAACという形式である必要があります。
MP4以外の拡張子のムービーファイルや、MP4のファイルでもH.264/AAC形式以外のものは、エンコードし直す必要がります。
エンコードは繰り返すと画質が劣化していくので、形式の変換は繰り返さないほうがいいです。

Adobe Meidia Encoder CC 2015を使用する

Adobe Meidia Encoder CC 2015を使って、変換してみます。
Adobe Meidia Encoderは、古いバージョンを使用しないようにしてください。CS6以下だと上手く変換できません。
他のツールでも、ビデオH.264/サウンドAAC形式のMP4にエンコードしてくれるものならどんなツールでもOKです。

書き出し設定について、①形式H.264を設定します。②拡張子がmp4であることを確認します。
③ビデオタグをおして、④ほぼ初期設定で大丈夫ですが、VBRであることを確認します。
VBRはCBRより綺麗な画質になりますが、その分データ量も大きくなります。

①オーディオタブを選んで②AACであることを確認します。他の設定は規定で大丈夫ですので、OKを押します。

HTML5上でのビデオの再生

MP4ビデオが用意出来たらHTML5形式のビデオを表示しましょう。
ビデオと同じフォルダ内に、次の内容のHTMLを保存します。