HTML5の基本的な書き方の一例

HTML5の基本的な書き方の一例としては、

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>T I T L E</title>
  <link rel="icon" href="./favicon.ico">
  <link rel="stylesheet" href="./xxxx.css">
</head>
<body>
<header>
....
</header>
<article>
  <section>
    <h1>....</h1>
    ....
  </section>
  <section>
    <h1>....</h1>
    ....
  </section>
</article>
<article>
  <section>
    <h1>....</h1>
    ....
  </section>
</article>
<footer>
....
</footer>
</body>
</html>

みたいな感じにすればいいらしい。
で、 は、使えないとか言われている
代わりにcssでmarginを指定したclassを書いて使うようにする
まぁ、昔から<br>と は多用しない方がいいと言われていたが...
あくまでもSEO対策としての記述方針と判断しているのであまり気にしていない...

試しに  aa  bbと記述してみる
aa bb

このpageはHTML5として記述しているんだけどfirefox48では、 はHTML5認識されているようだ。。。
まぁ、馴れの問題なので使わない方向でいこう。
ということでcssにmargin-leftを指定したclassを記述して<span class=...></span>で記述してみる

試しにcss fileに
.sp1left
{
	margin-left : 1em
}

.sp2left
{
	margin-left : 2em
}

.sp3left
{
	margin-left : 3em
}

.sp4left
{
	margin-left : 4em
}
として

<span class="sp1left">aa</span><span class="sp1left">bb</span>と記述してみる

aabb



<span class="sp2left">aa</span><span class="sp2left">bb</span>と記述してみる

aabb
	


<span class="sp3left">aa</span><span class="sp3left">bb</span>と記述してみる

aabb
	


<span class="sp2left">aa</span><span class="sp2left">bb</span>と記述してみる

aabb

想像してたより広く空いてしまっている。。。たぶんこのページのbody内の文字サイズを小さくしているから？かなぁ？
まぁでも使えそうな感じ。

▲ ▼

HTML5で動画を再生してみる

まず、動画の種類としてogv, mp4, webmを用意する。
今回サンプルとしてblenderで適当に動画を作ってogv形式で保存してみた。
ここでは、ファイル名をhtml5_sample_mv.ogvにした。
これをmp4,webmに変換する。

まず、html5_sample_mv.ogvの情報を確認する。

[hoge]$ ffmpeg -i html5_sample_mv.ogv
ffmpeg version .....
....
Input #0, ogg, from './html5_sample_mv.ogv':
  Duration: 00:00:22.00, start: 0.000000, bitrate: 892 kb/s
    Stream #0:0: Video: theora, yuv420p, 512x384 [SAR 1:1 DAR 4:3], 24 tbr, 24 tbn, 24 tbc
    Metadata:
      ENCODER         : Lavf56.40.101

bit rateが892kb/なのが確認できる。ちなみにframe rateの方は指定しない場合元ファイルの情報を継承するらしいので
変換時に指定しない。

[hoge]$ ffmpeg -i html5_sample_mv.ogv -vcodec libx264 -b 892k html5_sample_mv.mp4

[hoge]$ ffmpeg -i html5_sample_mv.ogv -vcodec libvpx -b 892k html5_sample_mv.webm

ちなみに例えばaviをogvに変換する場合は、

avi->ogvに変換

[hoge]$ ffmpeg -i html5_sample_mv.avi -vcodec libtheora -b 892k html5_sample_mv.ogv

[hoge]$ ls -l
-rw-r--r--  1 ginfizz ginfizz 2547085  xx月 xx xx:xx html5_sample_mv.mp4
-rw-r--r--  1 ginfizz ginfizz 2454867  xx月 xx xx:xx html5_sample_mv.ogv
-rw-r--r--  1 ginfizz ginfizz 2400641  xx月 xx xx:xx html5_sample_mv.webm

まぁだいたい同じサイズになった。

HTML5の記述は、いろいろなWeb Browserに対応させるために以下のような記述にする。


<video  controls>
  <source src="video_dir/html5_sample_mv.mp4">
  <source src="video_dir/html5_sample_mv.webm">
  <source src="video_dir/html5_sample_mv.ogv">
</video>

まぁ今回これだとどの動画フォーマットが有効に再生されているかわからないので
再生確認用に別々に記述しておく。

mp4

<video controls>
  <source src="video_dir/html5_sample_mv.mp4">
</video>

webm

<video controls>
  <source src="video_dir/html5_sample_mv.webm">
</video>

ogv

<video controls>
  <source src="video_dir/html5_sample_mv.ogv">
</video>

▲ ▼