最近做项目，遇到一个问题，在手机上要实现视频的全屏播放功能。测试了很久，终于找到解决办法。
第一种：将视频放大来控制。
视频在播放的时候，全屏是根据高度来的，如果设置视频 video 标签的 宽 度是 100% 高度是 110% ，可以实现全屏，超过是 溢出隐藏 就可以了。
确定：手机屏幕 尺寸 不固定，这个高度110%不好确定。
第二种：使用 object-f IT 来解决
直接上代码：
<video PR eload='auto' id='video' src='' webkit - play sinline='true' playsinline='true'x-webkit- airplay ='true' x5-video- player -t y PE ='h5' x5-video-player-fullscreen='true'x5-video -i gnore-metadata='true' width='100%' h ei ght='100%'><p> 不支持video</p> </video>
编译后在页面内部播放视频而不会跳出使用系统播放器全屏播放视频了。而且z-index属性也可以 正常 定义，使其他元素可以覆盖在视频上面。
css：保持画面的原有比例
# my-video{
object-fit: cover;
object-position: center center;
简单 的demo实现：
<!doctype ht ML >
<html lang="en">
<head>
< ;m eta charset="UTF-8">
<meta n am e="viewport" content="width=device-width,initial -s cale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>视频播放器</title>
<style type="text/css">
*{m arg in: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- ai rplay='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,
},
mount ed: function(){
this.videoUrl = "http://gamaru.wpg CMS .COM /media/file/movie/dkS DF dqur5uQKV5p.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>
解释下：object-fit
fill: 中文释义[填充]。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。 contain: 中文释义[包含]。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。 cover: 中文释义[覆盖]。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。 none: 中文释义[无]。保持原有尺寸比例。同时保持替换内容原始尺寸大小。 scale-down: 中文释义[降低]。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个详细 了解 object-fit： https://www.cnblogs.com/e0yu/p/10670990.html
到此这篇关于HTML5在手机端实现视频全屏展示方法的 文章 就介绍到这了,更多相关 HTML5视频 全屏内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 HTML5在手机端实现视频全屏展示方法 全部内容，希望文章能够帮你解决 HTML5在手机端实现视频全屏展示方法 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于HTML5在手机端实现视频全屏展示方法的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did211526