摘要：
　　今天在处理移动端的视频，当时用video标签做的。在真机测试时发现安卓机上用uc浏览器打开后，视频的上方和下方都有一段空隙，而其他浏览器都没有。折腾了几个小时后终于解决了问题......

实在不知道该如何用简短的几个字来描述这个问题，还是先来看一张图吧：

为了让看官更清楚的看到问题所在，艺灵已在上方的图中做了标注。下面我们就来一步步还原这个案例吧！

一、还原案例

这个没什么技术含量，纯粹的html标签而已。

1.1、核心html源码

<div class="m-videos">
　<video src="images/eh.mp4" poster="images/video.jpg" controls="controls" width="100%" preload="true" id="video" class="m-video"></video>
</div>

然后我们再简单写下css样式吧。

1.2、css样式

<style type="text/css">
　*{margin:0;padding:0;}
　body{background:#ccc;}
　video{vertical-align:top;}
　.m-video{background:#FF8604;}
</style>

好了，接下来我们还是来看最终的效果吧！小伙伴们拿出你们的安卓机(android)，打开Uc浏览器，进入首页后点击右上角的扫码按钮，然后扫描下面的二维码即可看到坑爹的一幕！二维码地址：

怎么样？是不是已经看到问题了？如果没有，请更换浏览器后再扫上面的二维码，对比下再次打开的页面吧。

经过一番折腾与搜索，终于大致的知道如何来避免这个问题了。

二、解决方法

设置具体的高度即可！

三、js动态处理

由于一个页面中存在多个视频或使用不同牌子的手机或屏幕会旋转等多种原因，视频的高度不能直接写死！所以这里要解决坑爹的uc问题的话，就需要动态处理了。艺灵这里实现的思路是：先使用一张视频封面图进行占位，原视频默认先隐藏；当页面加载完毕后，js已获取到封面图的高度，此时再给视频重置高度，然后将封面图隐藏或降低深度就可以了。为了更好的让看官理解上面的描述，还是来看一个完整的实例吧！

四、js处理后的案例

还是拿出你们的安卓机(android)，打开Uc浏览器，扫描下面的二维码进入页面看最终的效果。二维码： (其实，这个demo已经没有针对uc去处理了，而是对所有都进行处理)

怎么样，是不是视频上面和下面都没有空隙了？

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2016-11-25/460.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。