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

  • 2016.04.15
  • IT
HTML5用のvideoを用意して表示するまでの説明(2016年4月版)

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

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

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

video

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より綺麗な画質になりますが、その分データ量も大きくなります。

mp4_h264


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

mp4_audio

HTML5上でのビデオの再生

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

[html]<!DOCTYPE html>
<html>
<head>
<title>videotest/title>
</head>
<body>
<video src="sample.mp4" autoplay></video>
</body>
</html>[/html]

src=”~”のファイル名は、作成したmp4のファイ名に変更して下さい。

以上で再生できます。

ITカテゴリの最新記事