手机网页视频全屏,手机h5页面视频怎么全屏
最近，当我在做一个项目时，我遇到了一个问题。我不得不在手机上实现全屏视频播放功能。测试了很久，终于找到了解决办法。
第一种：将视频放大来控制。
视频播放时，全屏是基于高度的。如果视频标签的宽度设置为100%，高度设置为110%，就可以实现全屏。如果超过宽度，就会溢出隐藏。
OK:手机屏幕大小不固定，很难确定110%的高度。
第二种：使用 object-fit 来解决
直接装载代码：
video preload= auto id= video src= WebKit-playsinline= true playsinline= true x-WebKit-airplay= true X5-video-player-type= H5 X5-video-player-fu Ll= true X5-video-ignore-metadata= true width= 100% height= 100% video/p/video不支持在编译后在页面内播放视频而不跳出系统播放器全屏播放视频此外，z-index属性也可以正常定义，以便其他元素可以覆盖在视频上。
Css:保持图片原来的比例。
#我的视频{ object-fit:cover；对象-位置：中心中心；以下内容的简单演示实现：
！doctype html html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width，initial-scale=1，minimum-scale=1，maximum-scale=1，User-scalable=no /title视频播放器/title style type= text/CSS * { margin:0px；填充：0px}.app {宽度：100%；身高：100%；位置：绝对；top:0px；右：0px底部：0px左：0px溢出：隐藏；}.视频{宽度：100%；身高：100%；} #我的视频{ object-fit:cover；对象-位置：中心中心；}/style/headbodydiv id= app class= app video preload= auto id= my-video ref= video :src= video URL @ click= player 循环autoplay= autoplay WebKit-play in line= true play in line= true x-WebKit-airplay= true X5-video-player-type= H5 X5-video-player-full screen= true X5-video-ignore-metadata= true width=10/js/vue . min . js /script script type= text/JavaScript //E parse var application=new vue({ El: # app ，data: {videourl: ，video: null，}，mounted:function(){ this . video URL= 3358gamaru.wpgcms.com/media/file/movie/DKSFDDQUR5UQK this . video=this。$ refs.video}，方法：{ player:function(){ console . log(this . video . client width)；console . log(this . video . client height)；if(this . video . paused){//Play this . video . Play()；} else {//pause this . video . pause()}；} }});/script/html解释：适合对象
填充：“填充”的中文定义。默认值。替换内容拉伸填充整个内容框，并且不保证保持原始比例。包含：中文对“包含”的定义。保持原来的大小比例。确保替换内容的大小能够适合容器。因此，该参数可能会在容器中留下一个空格。封面：“封面”的中文定义。保持原来的大小比例。确保替换内容的尺寸必须大于容器的尺寸，并且宽度和高度中至少有一项与容器的一致。因此，此参数可能会使替代内容(如图片)的某些区域不可见。无：中文对“无”的定义。保持原来的大小比例。同时保持替换内容原始大小。缩小：中文对“减少”的定义。就像依次设置none或contain，最后显示较小的那个。了解更多关于对象适合：https://www.cnblogs.com/e0yu/p/10670990.html.
关于HTML5在手机上全屏视频显示方法的这篇文章就到此为止。更多相关HTML5视频全屏内容，请搜索往期文章或继续浏览下方相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。