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

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

视频在播放的时候，全屏是根据高度来的，如果设置视频 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在手机端实现视频全屏展示的更多相关文章

  1. 第89天：HTML5中 访问历史、全屏和网页存储API

    一.访问历史 API 通过history对象实现前进.后退和刷新之类的操作 history新增的两个方法history.replaceState()和history.pushState()方法属于HT ...

  2. iOS端一次视频全屏需求的实现（转）

    对于一个带有视频播放功能的app产品来说,视频全屏是一个基本且重要的需求.虽然这个需求看起来很简单,但是在实现上,我们前后迭代了三套技术方案.这篇文章将介绍这三种实现方案中的利弊和坑点,以及实现过程中 ...

  3. iOS 视频全屏功能 学习

    项目中,也写过类似"视频全屏"的功能, 前一阵子读到今日头条 的一篇技术文章,详细介绍三种旋转方法差异优劣最终择取.文章从技术角度看写的非常好,从用户角度看,也用过多家有视频功能的 ...

  4. js控制页面的全屏展示和退出全屏显示

    <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...

  5. JavaScript 全屏展示

    浏览器都有页面全屏的功能 F11 ,那么如何用JavaScript控制页面全屏呢?MDN上提供的的API , 一个小demo验证一下! <!DOCTYPE html> <html l ...

  6. requestFullscreen实现全屏展示

    requestFullscreen实现全屏展示. var fullContainer = document.getElementById('fullScreenContainer'); //先把元素展 ...

  7. echarts图表自适应盒子的大小（盒子的大小是动态改变的），大到需要全屏展示

    项目中用到了echarts,并且页面是自适应的,且页面中有一个[放大.缩小]功能,因此图表还需要根据盒子的大小来变化. 即:两个需求,如下: ① 图表根据窗口的大小自适应 ② 图表根据所在盒子的大小自 ...

  8. H5项目常见问题及注意事项，视频全屏，定位，屏幕旋转和触摸，偏页面重构向 来源joacycode的github

    Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 //一.HTML页面结构 <meta name="viewport" content="wi ...

  9. WebView中的视频全屏的相关操作

    近期工作中,基本一直在用WebView,今天就把它整理下: WebView 顾名思义,就是放一个网页,一个看起来十分简单,可是用起来不是那么简单的控件. 首先你肯定要定义,初始化一个webview,事 ...

随机推荐

  1. openstack 之~keystone之HTTP协议

    第一:为什么学习HTTP协议? 1.http协议就是通信的双方共同遵守的规则.无规矩不成方圆 2.openstack中各组件是基于restful api通信的,restful api可以单纯的理解为一 ...

  2. 用css实现自定义虚线边框

    开发产品功能的时候ui往往会给出虚线边框的效果图,于是乎,我们往往第一时间想到的是用css里的border,可是border里一般就提供两种效果,dashed或者dotted,ui这时就不满意了,说虚 ...

  3. C# GDI+之Graphics类 z

    GDI+是GDI的后继者,它是.NET Framework为操作图形提供的应用程序编程接口,主要用在窗体上绘制各种图形图像,可以用于绘制各种数据图像.数学仿真等. Graphics类是GDI+的核心, ...

  4. Kworkerd恶意挖矿分析

    转自:https://www.360zhijia.com/anquan/417114.html 0x01 快速特征排查 TOP显示CPU占用高,但是没有高占用的进程 存在与未知服务器13531端口建立 ...

  5. MAC终端密钥登录自动输入密码

    升级MAC系统后,发现用于MAC终端ssh服务器的登录脚本无法正常执行了,表现为:需要手动输入密钥密码,于是重新整理一下,恢复正常,在此记录一下: #!/usr/bin/expect -fspawn ...

  6. adminlte.js-页面模版

    html页面 使用cdn加速. <!DOCTYPE html> <html lang="en"> <head> <title>Tes ...

  7. AsyncHttpSupport并发发送请求

    public class AsyncHttpSupportTest { @InjectMocks private AsyncHttpSupport asyncHttpSupport; @Mock pr ...

  8. FileClassify文件日期分类工具

    FileClassify是一款免费的文件按日期分类工具,能够根据文件修改日期,将文件移动或复制到对应的目录中 如果对您有较大的帮助,欢迎捐赠我们,我们对您表示衷心的感谢! 1.输入文件夹和输出文件可以 ...

  9. Visual Studio 2017 - Windows应用程序打包成exe文件（2）- Advanced Installer 关于Newtonsoft.Json，LINQ to JSON的一个小demo mysql循环插入数据、生成随机数及CONCAT函数 .NET记录-获取外网IP以及判断该IP是属于网通还是电信 Guid的生成和数据修整（去除空格和小写字符）

    Visual Studio 2017 - Windows应用程序打包成exe文件(2)- Advanced Installer   Advanced Installer :Free for 30 da ...

  10. 找不到指定的 VM 安装:类型 标准 VM,名称 jre7

    问题背景是这样 原来使用的是jre7.0.55,后来为了安装使用 layabox IDE ,然后装了jdk_8u144 之后需要切换环境变量 之后java项目调试的时候重新设置了jdk,没问题. 直到 ...