youtube newboston html5
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="main.css">
<script src="bucky.js"></script>
</head>
<body>
<section id="skin">
<video id="myMovie" width="640" height="360">
<source src="videos/hanshin.mp4">
</video>
<nav>
<div id="buttons">
<button type="button" id="playButton">Play</button>
</div>
<div id="defaultBar">
<div id="progressBar"></div>
</div>
<div style="clear:both"></div>
</nav>
</section>
</body>
</html>
body {
text-align:center;
}
header,section,footer,aside,nav,article,hgroup {
display:block;
}
#skin {
width: 700px;
margin: 10px auto;
padding: 5px;
background: red;
border: 4px solid red;
border-radius: 10px;
}
nav {
margin: 5px 0px;
}
#buttons {
float: left;
width: 70px;
height: 22px;
}
#defaultBar {
position: relative;
float: left;
width: 600px;
height: 16px;
padding: 4px;
border: 2px solid black;
background: yellow;
}
#progressBar {
position: absolute;
width: 250px;
height: 16px;
background: blue;
}
'html5' 카테고리의 다른 글
| 프로그래스바 실시간으로 변경하기... (0) | 2014.09.16 |
|---|---|
| video player play 기능 추가 (0) | 2014.09.16 |
| html5 herald register (0) | 2014.09.15 |
| html/css #1 (0) | 2014.04.09 |
| video 재생(control을 자바스크립트 버튼 작성) (0) | 2013.02.27 |