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を保存します。
<html>
<head>
<title>videotest/title>
</head>
<body>
<video src="sample.mp4" autoplay></video>
</body>
</html>[/html]
src="~"のファイル名は、作成したmp4のファイ名に変更して下さい。
以上で再生できます。