最近做项目，碰到一个标题，在手机上要实现视频的全屏播放功能。测试了很久，终于找到解决办法。 第一种：将视频放大来控制。 视频在播放的时候，全屏是根据高度来的，如果设置视频 video 标签的宽度是 100% 高度是 110% ，可以实现全屏，超过是溢出隐藏就可以了。 确定：手机屏幕尺寸不固定，这个高度110%欠好确定。 第二种：使用 object-fit 来解决 直接上代码： [code] <video preload='auto' id='video' 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' width='100%' height='100%'><p> 不支持video</p> </video> [/code]编译后在页面内部播放视频而不会跳出使用系统播放器全屏播放视频了。而且z-index属性也可以正常界说，使其他元素可以覆盖在视频上面。 css：保持画面的原有比例 [code] #my-video{ object-fit: cover; object-position: center center; [/code]简单的demo实现： [code] <!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' id='my-video' 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' width='100%' height='100%'><p> 不支持video</p> </video> </div> </body> <script type="text/javascript" src="./js/vue.min.js"></script> <script type="text/javascript"> // 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() }; } } }); </script> </html>[/code]解释下：object-fit
详细相识 object-fit：https://www.cnblogs.com/e0yu/p/10670990.html 到此这篇关于HTML5在手机端实现视频全屏展示方法的文章就介绍到这了,更多相关HTML5视频全屏内容请搜索脚本之家以前的文章或继承欣赏下面的相关文章，盼望大家以后多多支持脚本之家！ 来源：https://www.jb51.net/html5/753375.html 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-2 03:33 , Processed in 0.042529 second(s), 19 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
