新闻中心
这里有您想知道的互联网营销解决方案
HTML5怎么在手机端实现视频全屏-创新互联
本篇内容主要讲解“HTML5怎么在手机端实现视频全屏”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“HTML5怎么在手机端实现视频全屏”吧!
最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能。测试了很久,终于找到解决办法。
第一种:将视频放大来控制。
视频在播放的时候,全屏是根据高度来的,如果设置视频 video 标签的宽度是 100% 高度是 110% ,可以实现全屏,超过是溢出隐藏就可以了。
确定:手机屏幕尺寸不固定,这个高度110%不好确定。
第二种:使用 object-fit 来解决
直接上代码:
编译后在页面内部播放视频而不会跳出使用系统播放器全屏播放视频了。而且z-index属性也可以正常定义,使其他元素可以覆盖在视频上面。
css:保持画面的原有比例
#my-video{ object-fit: cover; object-position: center center;
简单的demo实现:
视频播放器