HMTL5的 video 在IOS7中碰到的坑

Posted 2020-07-02 AlexCZL

直接说问题吧，

测试设备，ipod

我们在移动端播放视频的时候，一般使用H5的video标签，OK，这里有几点差异（就我目前所发现的）给大家分享一下，

1、在ios7中，video元素是需要确定大小的（宽高都需要），否则，你就会看到一个很小的视频在那恶心你，

我们在写代码调试的时候一般是使用chrome打开的，所以感觉写完了，没定宽高，或者只定了个width:100% 什么之类的，OK没什么问题，但是拿到手机设备上确实是有问

题的，所以，要定尺寸！！！

2、在IOS7上还有一个特别让我恶心的地方就是，你的video元素就像z-index 无穷大一样，永远都会被点中，当时我测试的时候是添加一个元素：position:fixed;z-index:9999;~~~

对，不用猜，肯定失效，就是任何地方都被这个遮罩遮住了，除了video那一块，点了还是会播放视频，哎。那么后来我的解决办法是，当我产生遮罩的时候，

将video元素隐藏（方法多种），然后遮罩移除的时候将video再显示出来。

事实证明这种方法是解决了我的需求，但是，真的好恶心啊~~~