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教程(8):CSS3透明度指南
Apr 02 HTML / CSS
css3.0 图形构成实例练习二
Mar 19 HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
Sep 02 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 HTML / CSS
详解HTML5中的元素与元素
Aug 17 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
Dec 19 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
使用SVG实现提示框功能的示例代码
Jun 05 HTML / CSS
六个好看实用的 HTML + CSS 后台登录入口页面
Apr 28 HTML / CSS
CSS link与@import的区别和用法解析
May 07 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
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
使用Python获取Linux系统的各种信息
2014/07/10 Python
浅析Python中else语句块的使用技巧
2016/06/16 Python
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
Python判断telnet通不通的实例
2019/01/26 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
python set内置函数的具体使用
2019/07/02 Python
简单了解Django ContentType内置组件
2019/07/23 Python
python面向对象 反射原理解析
2019/08/12 Python
运行tensorflow python程序,限制对GPU和CPU的占用操作
2020/02/06 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
银行介绍信范文
2014/01/10 职场文书
团结就是力量演讲稿
2014/05/21 职场文书
银行求职信怎么写
2014/05/26 职场文书