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——齿轮转动关键代码
May 02 HTML / CSS
css图标制作教程制作云图标
Jan 19 HTML / CSS
css3与html5实现响应式导航菜单(导航栏)效果分享
Feb 12 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
Jan 30 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
Apr 24 HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
Aug 31 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 HTML / CSS
HTML5如何使用SVG的方法示例
Jan 11 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
纯html+css实现奥运五环的示例代码
Aug 02 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实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
Python连接phoenix的方法示例
2017/09/29 Python
python调用Delphi写的Dll代码示例
2017/12/05 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
类如何去实现接口
2013/12/19 面试题
abstract是什么意思
2012/02/12 面试题
食品营养与检测应届生求职信
2013/11/08 职场文书
驾驶员岗位职责
2014/01/29 职场文书
亲属关系公证书
2014/04/08 职场文书
施工质量承诺书范文
2014/05/30 职场文书
个人租房协议书范本
2014/09/30 职场文书