html手机端自动全屏,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, 最终呈现的是尺寸比较小的那个
详细了解 object-fit:
到此这篇关于html5在手机端实现视频全屏展示方法的文章就介绍到这了,更多相关html5视频全屏内容请搜索萬仟网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持萬仟网!
html手机端自动全屏,HTML5在手机端实现视频全屏展示方法相关推荐
- HTML5视频手机全屏,HTML5在手机端实现视频全屏展示方法
这篇文章主要介绍了HTML5在手机端实现视频全屏展示方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 最近做项目,遇到一个问题 ...
- HTML5在手机端如何全屏展示
这篇文章主要介绍了HTML5在手机端实现视频全屏展示方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 最近做项目,遇到一个问题 ...
- html5仿抖音全屏播放,仿抖音视频全屏播放滑动切换
1 前言 随着移动技术的快速迭代,数据流量费用的快速下降,视频.直播正成为全民的媒体盛宴,我司必然也不会缺席此次盛宴,这里讲述的是通过h5实现仿抖音视频全屏播放&滑动切换的效果,供我司直播鉴定 ...
- html5在手机端调用摄像头的介绍以及新特性
<input type="file" capture="camera" accept="image/*" multiple>,这 ...
- 电脑视频html5全屏掉帧,uwp看视频全屏掉帧或卡机怎么办-解决uwp看视频全屏掉帧或卡机的方法 - 河东软件园...
不知道大家在使用UWP应用的时候有没有遇到这个奇怪的现象,播放视频的时候很流畅,但是每当我们将视频全屏播放时就会从出现视频掉帧或是卡死机的情况.最近就有位win10用户遇到过这个现象,并且在更新该应用 ...
- android录视频花屏,拍大师录制视频花屏怎么办 拍大师录制视频花屏的解决方法...
拍大师有一个非常好用的屏幕/摄像头录像功能,这也是这个软件的一大特色,我们大家平时在使用拍大师的时候有没有出现花屏现象?这可能用户电脑配置的显卡问题,那拍大师录制视频花屏怎么办呢?小编和大家分享下拍大 ...
- android 视频录制花屏,拍大师录制视频时画面花屏怎么办?拍大师录制视频花屏的解决方法图解...
拍大师有一个非常好用的屏幕/摄像头录像功能,这也是这个软件的一大特色,我们大家平时在使用拍大师的时候有没有出现花屏现象?这可能用户电脑配置的显卡问题,那拍大师录制视频花屏怎么办呢?小编和大家分享下拍大 ...
- HTML5在手机端实现视频全屏展示
最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能.测试了很久,终于找到解决办法. 第一种:将视频放大来控制. 视频在播放的时候,全屏是根据高度来的,如果设置视频 video 标签的宽度是 1 ...
- html手机端自动换,jQuery+HTML5实现手机摇一摇换衣特效
jQuery+HTML5实现手机摇一摇换衣特效 2018-12-31 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了jQuery+HTML5实现手机摇一摇换衣特 ...
最新文章
- 2012年A股可能再跌20%~30%
- python property
- Linux 僵尸进程可以被杀死吗?
- mongodb 输出数组字段_MongoDb文档操作、索引操作
- navicat er图没有连线_迁徙图?流向图?城市关系强度图?
- Q-learning家族【强化学习】
- linux下tmpfs文件系统简介
- mysql读写分离错_MySQL主从同步、读写分离配置步骤、问题解决
- python官网的sdk下载详细步骤-Python SDK
- 简单总结一下JS的Array对象
- 电子签的背后江湖:腾讯、蚂蚁、字节跳动的较量
- Java单例模式(类和对象)
- 苹果Mac 无法读写NTFS格式的U盘或移动硬盘?一次解决
- 【Neuralink 与大脑的神奇未来】Part 2:大脑
- 新年最大空投,好东西一起分享
- 深度神经网络简单介绍,神经网络设计与实现
- 2022年哪款超短焦投影仪性价比最高?当贝超短焦激光投影仪U1测评值得买
- 在linux中如何解压.tgz
- 【满分】【华为OD机试真题2023 JS】核酸检测人员安排
- SpringBoot项目启动 报错:Error executing Maven. end tag name </settings> must match start tag name
热门文章
- 图片上传被旋转,golang Exif 判断.jepg图片原始信息Orientation方向,并旋转,
- echarts从全国地图切换成省级地图地图不居中的问题
- fiddler抓包 - Android 虚拟机
- 【LTE】Qualcomm LTE Packets log 分析(一)LTE Access Stratum Log Analysis 1_PSS 2_RACH
- 红米note3全网通版刷机救砖 9008强刷(无需短接)
- 构建TCP套接字(socket)的概念及具体步骤
- RTS超低延时直播技术:保障大型赛事直播零时差互动
- 全国数字金融与量化金融案例大赛经验分享
- Java千问:Java语言各种数字的“非常规”写法你都会吗?
- Bluesky勒索软件深度技术分析