代码（css内容）：
代码（body内容）
视频
我们按照常规给video标签设置：height：100%；width：100%；
结果如下：
左图：(Google Chrome)高度达到100%；而宽度不能达到100%； 右图：(Firefox)高度不能达到100%；而宽度达到100%；
左图：(Safari)高度达到100%；而宽度不能达到100%； 右图：(Opera)高度不能达到100%；而宽度达到100%；
接着小果就尝试使用：
1.使用js获取父级的宽高，赋给video；结果：失败。
2.使用:-webkit-full-screen{}方法，没有起作用。
3.使用兼容...
。。。累趴
之后小果就发现了简单易操作的方法：
css代码：（父级高度为0；设置padding-bottom；）
结果如下：
左图：(Google Chrome) 右图：(Firefox)
左图：(Safari) 右图：(Opera)
完美解决啊~
那么还有一个问题，padding-bottom的值是怎么得到的呢？
videoH：video的高
videoW：video的宽
videoTiW：父级的width ,使用的是百分比
padBotRes：padding-bottom的值
式子：
padBotRes = (videoH / videoW) * videoTiW
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
上一篇：Canvas——使用定时器模拟动态加载动画！
下一篇：html5：canvas
