HTML5在手机端实现视频全屏展示方法


Posted in HTML / CSS onNovember 23, 2020

最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能。测试了很久,终于找到解决办法。

第一种:将视频放大来控制。

视频在播放的时候,全屏是根据高度来的,如果设置视频 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>
<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>

解释下:object-fit

  • fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
  • contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此,此参数可能会在容器内留下空白。
  • cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸,宽度和高度至少有一个和容器一致。因此,此参数可能会让替换内容(如图片)部分区域不可见。
  • none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
  • scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个

详细了解 object-fit:https://www.cnblogs.com/e0yu/p/10670990.html

到此这篇关于HTML5在手机端实现视频全屏展示方法的文章就介绍到这了,更多相关HTML5视频全屏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 HTML / CSS
html5的canvas实现3d雪花飘舞效果
Dec 27 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
Nov 19 HTML / CSS
html5移动端自适应布局的实现
Apr 15 HTML / CSS
CSS使用伪类控制边框长度的方法
Jan 18 HTML / CSS
前端使用svg图片改色实现示例
Jul 23 HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 #HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
Nov 19 #HTML / CSS
Canvas获取视频第一帧缩略图的实现
Nov 11 #HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
Nov 10 #HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 #HTML / CSS
萌新HTML5 入门指南(二)
Nov 09 #HTML / CSS
萌新的HTML5 入门指南
Nov 06 #HTML / CSS
You might like
PHP Squid中可缓存的动态网页设计
2008/09/17 PHP
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
基于node.js的快速开发透明代理
2010/12/25 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
python下如何让web元素的生成更简单的分析
2008/07/17 Python
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
python处理大数字的方法
2015/05/27 Python
Python自动登录126邮箱的方法
2015/07/10 Python
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
25道Java面试题集合
2013/05/21 面试题
大学生党课思想汇报
2013/12/29 职场文书
妇产医师自荐信
2014/01/29 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
2014年终个人总结报告
2015/03/09 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
八年级作文之友情
2019/11/25 职场文书