html5播放视频的元素(HTML5在手机端实现视频全屏展示方法)
类别:Web前端 浏览量:982
时间:2021-11-03 15:01:14 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%'><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> <li 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> </li> </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>
解释下: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 webrtc技术详解(Html5 webRTC简单实现视频调用的示例代码)
- html5canvas图形怎么打印(HTML5 Canvas 实现K线图的示例代码)
- html5socket源码(五分钟学会HTML5的WebSocket协议)
- html5布局(Html5让容器充满屏幕高度或自适应剩余高度的布局实现)
- html5 固定图片(HTML5拖放API实现自动生成相框功能)
- html5炫酷代码(HTML5超炫酷粒子效果的进度条的实现示例)
- h5人脸扫描代码(Html5调用手机摄像头并实现人脸识别的实现)
- html5最好用语义元素(HTML5语义化元素你真的用对了吗)
- html5+css样式代码(详解HTML5中CSS外观属性)
- html5如何设置标签(HTML5中在title标题标签里设置小图标的方法)
- html5video怎么优化(HTML5 video循环播放多个视频的方法步骤)
- html5canvas怎么改扇形起始角(HTML5 Canvas实现放大镜效果示例)
- html5隐藏数字(HTML5去掉输入框type为number时的上下箭头的实现方法)
- html5 video 事件(HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题)
- html5中提供的绘图元素(使用Html5中的cavas画一面国旗)
- 百事大吉蓝底 绿底手机高清壁纸(绿底手机高清壁纸)
- 蓝底证件照怎么制作 证件照换底色 换尺寸快速搞定(蓝底证件照怎么制作)
- 你喜欢足球吗 足球如何点亮世界的(足球如何点亮世界的)
- 不可分鸽是什么梗(不可分鸽是什么梗)
- 古代的鸽子是爱情的象征,并非和平的使者(古代的鸽子是爱情的象征)
- 一课译词 放鸽子(一课译词放鸽子)
热门推荐
- laravel的api验证失败重定向(Laravel的Auth验证Token验证使用自定义Redis的例子)
- LINQ TO SQL 中join
- 数据库最大连接池max pool size
- 移动端获取点击坐标
- mysql记录binlog的方式(MySQL使用binlog日志做数据恢复的实现)
- navicat怎么和mysql连接(Navicat Premium远程连接MySQL数据库的方法)
- pycharm怎么创建django项目(Python、 Pycharm、Django安装详细教程图文)
- easyui datebox的用法
- Ext.query与Ext.select 的用法
- vue3.0 自定义组件(Vue 3.0自定义指令的使用入门)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9