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のファイ名に変更して下さい。

以上で再生できます。

よく読まれている記事

1

こんにちは、IT行政書士の坂本倫朗(@sakamotohitori)です。今回は、個人事業主に向けた、お金のやりくりを向上させる話です。 もくじ 5年後に笑って振り返れるように資金繰りをしよう資金繰り ...

2

こんにちは、IT行政書士の坂本倫朗(@sakamotohitori)です。今回は、「経営難に陥る会社には共通点がある」という話です。資金繰りを良くしたいとお考えであれば、この記事で紹介していることとは ...

3

もくじ 契約書に数字を書くときのお作法 契約書の日付をあいまいにしない 契約書に記載する金額の正しい書き方 手書きで金額を書くときは、漢数字と大字を使う 契約書の条項号の数字は? 条 項 号 構成の見 ...

4

契約書の書き方で難しい、「契約書のあそこの部分について」を指し示すときの書き方をまとめます。 法律は条、項、号、という順番になっています。契約書もそれに合わせて書きます。 この辺の話は以下の記事にまと ...

-IT