css 制作视频播放

html-css09

css 制作视频播放,第1张

<video controls="controls" >此标签中添加preload="auto"是预备播放点击后播放， 添加autoplay="autoplay"可以实现自动播放，详见W3school教程：网页链接

父集div使用relative定位，padding-bottom值充当空间，子集video元素absolute定位

具体例子如下，比如视频是16:9的比例，这样比例就不会变了，并且适配div的等高比例

css

.vid-wrapper{

    width:100%

    position:relative

    padding-bottom:56.25%    /*需要用padding来维持16:9比例,也就是9除以16*/

    height: 0

}

.vid-wrapper video{

    position: absolute

    top:0

    left: 0

    width: 100%

    height: 100%

}

html

<div class="vid-wrappper">

    <video src=""></video>

</div

html代码

<body>

<DIV id="container">

<DI id="content">

<h1>Content</h1>

<p>请改变浏览器窗口的高度，以观察footer效果。</p>

<p>这里是示例文字，DIV固定………，这里是示例文字。</p>

</DIV>

<DIV Vid="footer">

<h1>Footer</h1>

</DIV>

</DIV>

</body>

CSS代码：

程序代码

body,html{

margin:0

padding:0

font:12px/1.5arial

height:100%

}

#container{

min-height:100%

position:relative

}

#content{

padding:10px

padding-bottom:60px

/*20px(font-size)

x2(line-height)+10px(padding)x2=60px*/

}

#footer{

position:absolute

bottom:0

padding:10px0

background-color:#AAA

width:100%

}

#footerh1{

font:20px/2Arial

margin:0

padding:010px

}