html5 video视频自适应手机大小

自助开通VIP,整站资源任意下载

css样式

.vid-wrap{
    width:100%;background: #000;
    position:relative;
    padding-bottom:56.25%;    /*需要用padding来维持16:9比例,也就是9除以16*/
    height: 0;
}
.vid-wrap video{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%

html

<div class="vid-wrap">
    <video controls autoplay loop>
	<source src="" type="video/mp4">
    </video>
</div>

HTML自适应自动播放视频

<div class="vid-wrap">
    <video autoplay="autoplay" controls="controls" height="550" width="960">
        <source src="xxx.mp4" type="video/mp4"/>
    </video>
</div>

HTML自适应不自动播放视频

<div class="vid-wrap">
    <video controls="controls" height="550" width="960">
        <source src="xxx.mp4" type="video/mp4"/>
    </video>
</div>


本站源码仅做学术研究,自娱自乐使用,不得用于赌博性质的非法商业用途!转载请说明出处!
棋牌资源网 » html5 video视频自适应手机大小

发表评论

欢迎 访客 发表评论

这里有你所需要的,找专业的人做专业的事!

本站演示 联系客服