video的层级过高的问题

先说结果，以我目前所查询到的资料来看，这个问题是无解的。

在移动端众多浏览器中，有很多的浏览器会把video标签的层级提的很高，即使你改变其他节点的“z-index”，哪怕是你改的很高，也难以实现比video的标签层级更高。

那这个问题难道就没有解决办法了吗？

有，虽然我们无法直接解决这个问题，但是我们可以通过设计页面的布局来改变这个问题。

第一种方式：去掉和video争层级的元素

没错，没解决问题，那就解决提出问题的人。

一般来说，和video争层级的是两个，一个是顶部导航，一个是底部导航。

拿顶部导航来说，因为我们滑动时，video标签滑到上方会将顶部导航盖住，导致我们的部分功能无法正常使用，那么可以去掉顶部导航，这个时候我们是无需担心页面无法返回到上一级的问题的，浏览器自带的返回按钮，会帮我们实现返回的功能。

在说底部导航，一般来说视频播放之后，我们往下滑动页面，会将底部导航盖住，也会影响我们的正常使用，如果这个时候又我们不方便去掉底部导航的时候，可以采用第二种方式。

我们可以在页面上做一个播放按钮，当点击播放按钮时，我们将视频弹出播放。

所谓弹出播放，就是一个撑满页面节点，中间有个video标签，然后可以正常播放视频。

我们可以将视频标签改为fixed定位，固定在页面的顶部播放，大家可以参考移动端的“好看视频”，其中有部分页面就是这么制作的。

意思是说，可以通过删减页面的内容，将页面的内容控制在一个高度内就可以显示，这样就不会有滑动的问题，也就不需要在意层级的问题了。

这是目前笔者想到的几种解决方案，如果你有其他的方式，欢迎留言。

大家都知道，一般来说，video标签默认控制栏的样式都不算很好看，而且各个浏览器的样式还都不一样，这很不利于我们去做页面样式的统一管理，所以有些时候需要重写控制栏的样式。

但是由于有些浏览器的video层级过高，我们自己写的样式会被盖住，所以需要一些其他的方式来实现。

很遗憾，在这里我没有办法给大家提供一个有效的插件来解决这个问题，但是也算是帮大家踩了一次坑。

plyr.js，这个插件在PC端还是很好用的，但是到了移动端就没那么好用了。

我们可以这样，将视频播放器定位到父级节点的中心位置，然后将我们写的功能放到同一父级节点的上方或者下方，这样在我们播放视频时候就不会盖到了。

问题是这样的，在我们加载video标签时，即便是我们给定了宽高，但是还是一开始宽度很窄然后突然变宽，效果很不好，所以要解决这个问题。

也很好解决，只需要在其加载的这个1秒钟内，我们用其他的内容占据其位置就可以了，比如一张图、一个播放按钮等等吧。

这里没有提到其他品牌的手机，是因为笔者恰好用的就是小米手机，没有没有任何单独说是小米的问题，也没有说其他型号的手机就一定没有问题。笔者也是个米粉哦^.^

问题是这样的，在手机端测试的时候，我一开始用的一个比较大的视频，然后后面替换成了一个比较小的视频。这个时候在手机浏览器测试的时候，就一直提示‘视频加载失败’。

解决办法，去网上搜搜小米手机的浏览器视频缓存文件地址，打开显示隐藏文件按钮，将缓存文件清掉就可以了。