Tag Archives: Style Sheets

Then here is your css code for add video to your html5 page–continue

Here I put the css style for mark up your video appearance. not very beautiful, but it works, you could change this to what you like.

Css3 style below: (next post is the javascript file, you need add to make the video works.)

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 black;
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-color:yellow;
}
#progressBar{
position: absolute;
width:0px;
height:16px;
background:blue;
}

Advertisements

Create a video in your HTML5 page–continue

Here I am going to continue my post. HTML5 page added video is much easy now.

put below source code in your html body ,next post is the css style.

<section id = “skin”>
<video id=”myMovie” width=”640″ height=”360″>
<source src=”videos/movie.mp4″ type=’video/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>