HTML5在手机端实现视频全屏展示方法
|
最近做项目，碰着一个题目，在手机上要实现视频的全屏播放成果。测试了好久，终于找到办理步伐。 第一种：将视频放大来节制。 视频在播放的时辰，全屏是按照高度来的，假如配置视频 video 标签的宽度是 100% 高度是 110% ，可以实现全屏，高出是溢出潜匿就可以了。 确定：手机屏幕尺寸不牢靠，这个高度110%欠好确定。 第二种：行使 object-fit 来办理 直接上代码： <video preload='auto' src='' webkit-playsinline='true' playsinline='true'x-webkit-airplay='true' x5-video-player-type='h5' x5-video-player-fullscreen='true'x5-video-ignore-metadata='true'><p> 不支持video</p> </video> 编译后在页面内部播放视频而不会跳出行使体系播放器全屏播放视频了。并且z-index属性也可以正常界说，使其他元素可以包围在视频上面。 css：保持画面的原有比例 #my-video{ object-fit: cover; object-position: center center; 简朴的demo实现： <!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; 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;} </style> </head> <body> <div id="app" class="app"> <video preload='auto' ref="video" :src="videoUrl" @click="player" loop autoplay="autoplay" webkit-playsinline='true' playsinline='true'x-webkit-airplay='true' x5-video-player-type='h5' x5-video-player-fullscreen='true'x5-video-ignore-metadata='true'><p> 不支持video</p> </video> </div> </body> <script type="text/javascript" src=http://www.jb51.net/html5/"./js/vue.min.js"></script> <script type="text/javascript"> // vue 理会 var Application = new Vue({ el: "#app", data: { videoUrl:'', video:null, }, mounted: function(){ this.videoUrl = ""; 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() }; } } }); </script> </html> 表明下：object-fit fill: 中文释义“添补”。默认值。替代内容拉伸填满整个content box, 不担保保持原有的比例。 contain: 中文释义“包括”。保持原有尺寸比例。担保替代内容尺寸必然可以在容器内里放得下。因此，此参数也许会在容器内留下空缺。 cover: 中文释义“包围”。保持原有尺寸比例。担保替代内容尺寸必然大于容器尺寸，宽度和高度至少有一个和容器同等。因此，此参数也许会让替代内容（如图片）部门地区不行见。 none: 中文释义“无”。保持原有尺寸比例。同时保持替代内容原始尺寸巨细。 scale-down: 中文释义“低落”。就仿佛依次配置了none或contain, 最终泛起的是尺寸较量小的谁人 具体相识 object-fit：https://www.cnblogs.com/e0yu/p/10670990.html 到此这篇关于HTML5在手机端实现视频全屏展示要领的文章就先容到这了,更多相干HTML5视频全屏内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章，但愿各人往后多多支持剧本之家！ （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
