首页 > web前端 > H5教程 > 正文

基于html5,父级块中添加video,不能全屏播放的问题解决。

高洛峰
发布: 2016-10-14 15:03:53
原创
2069 人浏览过

使用video标签,视频总不能占满父级全屏,本来预算的10分钟工程,结果卡在video这里了,勤奋的小果,还是打算记下来,共勉。。。

代码(css内容):

<style>
html,body{
height: 100%;
width: 100%;
}
p{
height: 50px;
margin: 20px;
font-size: 1.5em;
}
.videoTime{
position: relative;
height: 100%;
width: 80%;
border: 2px solid red;
}
.videoTime video{
position: absolute;
height: 100%;
width: 100%;
}
</style>
登录后复制

代码(body内容)

<body>
<p>视频</p>
<div class="videoTime">
<video class="videoShowing" src="video/video.mp4" autoplay="autoplay">视频</video>
</div>
</body>
</html>
登录后复制

我们按照常规给video标签设置:height:100%;width:100%;

结果如下:

左图:(Google Chrome)高度达到100%;而宽度不能达到100%; 右图:(Firefox)高度不能达到100%;而宽度达到100%;

1.jpg


左图:(Safari)高度达到100%;而宽度不能达到100%; 右图:(Opera)高度不能达到100%;而宽度达到100%;

1.jpg

接着小果就尝试使用:

1.使用js获取父级的宽高,赋给video;结果:失败。

2.使用:-webkit-full-screen{}方法,没有起作用。

3.使用兼容...

。。。累趴

之后小果就发现了简单易操作的方法:

css代码:(父级高度为0;设置padding-bottom;)

<style>
html,body{
height: 100%;
width: 100%;
}
p{
height: 50px;
margin: 20px;
font-size: 1.5em;
}
.videoTime{
position: relative;
height: 0;
width: 80%;
padding-bottom: 45%;   //需要计算得到
border: 2px solid red;
}
.videoTime video{
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
</style>
登录后复制

结果如下:

左图:(Google Chrome)  右图:(Firefox)

1.jpg

左图:(Safari)                右图:(Opera)

1.jpg

完美解决啊~

那么还有一个问题,padding-bottom的值是怎么得到的呢?

videoH:video的高

videoW:video的宽

videoTiW:父级的width ,使用的是百分比

padBotRes:padding-bottom的值

式子:

padBotRes = (videoH / videoW) * videoTiW


来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!