本篇内容主要讲解“HTML5怎么在手机端实现视频全屏”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“HTML5怎么在手机端实现视频全屏”吧!
创新互联公司服务项目包括长乐网站建设、
长乐网站制作、长乐网页制作以及长乐网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，
长乐网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到长乐省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
最近做项目，遇到一个问题，在手机上要实现视频的全屏播放功能。测试了很久，终于找到解决办法。
第一种：将视频放大来控制。
视频在播放的时候，全屏是根据高度来的，如果设置视频 video 标签的宽度是 100% 高度是 110% ，可以实现全屏，超过是溢出隐藏就可以了。
确定：手机屏幕尺寸不固定，这个高度110%不好确定。
第二种：使用 object-fit 来解决
直接上代码：
不支持video
编译后在页面内部播放视频而不会跳出使用系统播放器全屏播放视频了。而且z-index属性也可以正常定义，使其他元素可以覆盖在视频上面。
css：保持画面的原有比例
#my-video{
object-fit: cover;
object-position: center center;简单的demo实现：
视频播放器
*{margin:0px; padding:0px;}
.app{width: 100%; height:100%; position: absolute; top:0px; right:0px; bottom: 0px; left:0px; overflow: hidden;}
.video{width: 100%; height: 100%;}
#my-video{object-fit: cover; object-position: center center;}
不支持video
