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的定位页面元素
Aug 29 HTML / CSS
button在IE6/7下的黑边去除方案
Dec 24 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 HTML / CSS
HTML5边玩边学(1)画布实现方法
Sep 21 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
Jun 15 HTML / CSS
HTML5拖拉上传文件的简单实例
Jan 11 HTML / CSS
HTML5实现桌面通知 提示功能
Oct 11 HTML / CSS
canvas实现圆形进度条动画的示例代码
Dec 26 HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 HTML / CSS
CSS list-style-type属性使用方法
May 21 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
Yii核心组件AssetManager原理分析
2014/12/02 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
浅谈PHP的反射机制
2016/12/15 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
JQuery中Text方法用法实例分析
2015/05/18 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
用实例说明python的*args和**kwargs用法
2013/11/01 Python
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
tensorflow常用函数API介绍
2020/04/19 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
tensorflow 大于某个值为1,小于为0的实例
2020/06/30 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
社区活动邀请函范文
2014/01/29 职场文书
职工代表大会主持词
2014/04/01 职场文书
员工离职通知函
2015/04/25 职场文书
高中体育课教学反思
2016/02/16 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis