HTML5の動画データの使い方

HTML5 HTML

作る際に気を付けるポイント

  • 動画ファイルは出来るだけ軽くする。（あくまでイメージなので長さも1分くらいをめどに）
  • デフォルトではミュートの設定に
  • あくまでも背景なので自動再生とループ再生の設定にする。（自動再生が効かないスマホでは代替え画像を使用する）
<video id="bgvid" autoplay loop muted>

 

動画データを表示させてみる

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>動画データの使い方</title>
<style>
html,body,h1,p {
margin: 0;
padding: 0;
line-height: 1.0;
}
#bgv {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: -100;
}
#container {
background: url(img/Satellite.png) no-repeat center center /cover;
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
}
#header {
background: rgba(0, 0, 0, 0.4);
color: #FFF;
width: 60%;
border-radius: 10px;
}
</style>
</head>

<body>
<!--<video id="bgv" poster="img/fish.jpg" controls>-->
<!--posterは動画が表示されるまで表示される画像-->
<video id="bgv" autoplay loop muted>
<source src="img/3D Mock-up Demonstration of a Satellite.mp4" type="video/mp4">
</video>
<div id="container">
<div id="header">
</div><!--/#header-->
</div><!--/#container-->
</body>
</html>

 

結果

f:id:develog:20160908200140p:plain