webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

html5 <video>

html5 videoタグを使ってみる。

  • .mov形式ファイルだとうまくいかない。
  • media encoderでmp4に変換。
  • ファイルサイズは723Kb。概ね500Kb~1Mb程度がファイルサイズの目安らしい。上限の目安は3Mbくらいと、あるサイトには書いてあった。
  • imgフォルダを作って、mp4を入れて作業したけれどもうまく行かなかった。
  • 試しにindex.htmlと同じ階層に引っ張り出してみるとうまくいった。
  • 再びimgフォルダに戻すと、問題なく動作した。
  • 気のせいなのか?よくわからないが、ムービーではよくあること。
  • autoplay 自動再生
  • loop ループ再生
  • muted 音はミュート
  • controls 再生ボタンなどのコントローラーの表示
  • poster 映像データが利用不可能な場合に表示される画像データを URI 形式で指定します。この属性が指定されない場合、再生可能な映像データがない場合は何も表示されません。
  • でも、これってすごいことですよね!!

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<style>
html, body, video, div{
margin: 0;
padding: 0;
line-height: 1.0;
}
body{
background: #111;
}
video{
width:100%;
height: auto;
padding-top: 5%;
/* background: cover;*/}
</style>
</head>

<body>
<div id="container">
<div id="movie">
<video autoplay loop muted><!--poster="***.jpg-->
<source src="img/movie01.mp4" type="video/mp4">
<!--ここに画像ファイルを列記しておくと再生不可能なときに静止画が表示できる-->
</video>
</div><!--movie-->
</div><!--container-->
</body>
</html>