HTML5怎么在手机端实现视频全屏

本篇内容主要讲解“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