189 8069 5689

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怎么在手机端实现视频全屏
URL标题：http://cdxtjz.cn/article/jiocdh.html

其他资讯