平武建站

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
 
// vue 解析 var Application = new Vue({     el: "#app",     data: {         videoUrl:'',         video:null,     },     mounted: function(){         this.videoUrl = "http://gamaru.wpgcms.com/media/file/movie/dkSdfdqur5uQKV5p.mp4";         this.video = this.$refs.video;     },     methods: {         player:function(){             console.log(this.video.clientWidth);             console.log(this.video.clientHeight);             if(this.video.paused){                 // 播放                 this.video.play();             }else{                 // 暂停                 this.video.pause()             };                     }     } });

解释下：object-fit

  • fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。

  • contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。

  • cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。

  • none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。

  • scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个

到此，相信大家对“HTML5怎么在手机端实现视频全屏”有了更深的了解，不妨来实际操作一番吧！这里是创新互联建站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！


新闻名称：HTML5怎么在手机端实现视频全屏-创新互联
网址分享：http://pwwzsj.com/article/ceeepd.html

其他资讯