HTML5在手机端如何全屏展示
这篇文章主要介绍了HTML5在手机端实现视频全屏展示方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能。测试了很久,终于找到解决办法。
第一种:将视频放大来控制。
视频在播放的时候,全屏是根据高度来的,如果设置视频 video 标签的宽度是 100% 高度是 110% ,可以实现全屏,超过是溢出隐藏就可以了。
确定:手机屏幕尺寸不固定,这个高度110%不好确定。
第二种:使用 object-fit 来解决
直接上代码:
<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%’>
不支持video
编译后在页面内部播放视频而不会跳出使用系统播放器全屏播放视频了。而且z-index属性也可以正常定义,使其他元素可以覆盖在视频上面。
css:保持画面的原有比例
#my-video{
object-fit: cover;
object-position: center center;
简单的demo实现:
<!doctype html>
视频播放器
this.video = this.$refs.video;
},
methods: {
player:function(www.t6q8.com){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在手机端如何全屏展示相关推荐
- html手机端自动全屏,HTML5在手机端实现视频全屏展示方法
最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能.测试了很久,终于找到解决办法. 第一种:将视频放大来控制. 视频在播放的时候,全屏是根据高度来的,如果设置视频 video 标签的宽度是 1 ...
- HTML5视频手机全屏,HTML5在手机端实现视频全屏展示方法
这篇文章主要介绍了HTML5在手机端实现视频全屏展示方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 最近做项目,遇到一个问题 ...
- html5在手机端调用摄像头的介绍以及新特性
<input type="file" capture="camera" accept="image/*" multiple>,这 ...
- HTML5在手机端实现视频全屏展示
最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能.测试了很久,终于找到解决办法. 第一种:将视频放大来控制. 视频在播放的时候,全屏是根据高度来的,如果设置视频 video 标签的宽度是 1 ...
- h5 调起相机_Html5在手机端调用相机的方法实现
input调用设备录像,相机等- HTML5官方文档解释:capture属性用于调用设备的摄像头或麦克风. 当accept="audio/或video/"时capture只有两种值 ...
- PC端网页在手机端全屏展示改造
为了让PC端网页在手机端全屏展示,一般首先想到的是清除浏览器的默认设置边距. * {padding: 0;margin: 0; } 但是不建议使用以上写法,尤其是较大的网站,会极大的消耗资源,所以不建 ...
- [html] HTML5的video在手机端如何实现进来页面时就自动播放?
[html] HTML5的video在手机端如何实现进来页面时就自动播放? 理想情况autoplay=true.但是现实是:基本所有浏览器都屏蔽了这个属性. 能实现的现在只有微信了,微信有一套自己的规 ...
- 手机看html网页内容重叠,html5手机端叠加图片触屏滑动查看特效
特效描述:html5手机端 叠加图片 触屏滑动查看特效.html5手机叠加图片手指滑动查看 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 rutrum tellus a tempus ...
- web大屏展示用到的组件_基于 HTML5 的工业组态高炉炼铁 3D 大屏可视化
前言 在大数据盛行的现在,大屏数据可视化也已经成为了一个热门的话题.大屏可视化可以运用在众多领域中,比如工业互联网.医疗.交通.工业控制等等.将各项重要指标数据以图表.各种图形等形式表现在一个页面上, ...
最新文章
- 用树莓派做一个alibaba-guest
- python数字类型-Python数字类型有哪些
- linux自学视频资料第四讲:目录
- android控制滚动条滚动
- Spring Aop总结
- 卧龙吟游戏服务器不显示,卧龙吟你必须知道的隐藏特性
- Win11系统自动暂停更新后想继续怎么办 Win11系统重新启动更新教程
- socket抓包_64、抓包分析tcp与udp
- word根据目录切块php,PHP导出Word文档如何自定义目录?
- 台式机鼠标失灵打开计算机,台式电脑鼠标不动了怎么办
- SQL Sever2008 无法启动
- 换行与回车(\r \n)的起源以及在编制语言中的使用
- Hadoop架构中各个集群在开发中的作用
- 毕业设计——基于STM32的家庭健康监测系统
- html中选择器是什么意思,css中的选择器是什么意思?
- js正则表达式判断非负数和是否为网址
- 网上银行系统信息安全通用规范【学习笔记】
- 菜鸟的springboot项目图片上传及图片路径分析
- 时间格式化问题@DateTimeFormat和@JsonFormat的区别
- QMetaObject使用
热门文章
- 使用vscode remote ssh功能远程连接服务器或树莓派时,报错Setting up SSH tunnel的终极解决办法,全网仅此一份
- GPU计算能力(Compute Capability)那些事儿
- QA - 有两种药片A和B,外观一样功效不同,每次需要吃一个A+B;拿出来2A+B,问该怎么吃?
- 微博爬虫数据分析可视化程序设计报告
- 如何用C语言开发图形化游戏
- 科技金融企业助力乡村振兴,能有多大新意?
- 成为测试大牛——测试领域的变与不变
- 提示程序需要Windows 7 Service Pack 1或更高版本问题如何解决?
- P3939 数颜色 (权值线段树)
- Ubuntu安装软件时报错(报错:dpkg: 处理软件包 xxx (--configure)时出错: 依赖关系问题 - 仍未被配置)