HTML5的video的fixed定位的兼容性问题

HTML5的video的兼容性问题

1.问题起源：某日做某某游戏的海外版官网，悲剧的发现移动端的页面上的某些区域不能捕捉到touch事件。再去浏览使用同样h5的video的网站，发现很多网站都出现滑动后，页面上的某个位置不能关闭视频弹窗的问题。 2.众所周知的video的背景知识 --a.关于video的自动播放问题：chrome在60.x及其之后的版本以美其名为节约用户流量的理由，禁止了video和audio的自动播放，移动端可以监听touch事件，‘假装’视频是自动播放的，pc端无解。 --b.浏览器对视频的宽高计算方法：满足宽度和高度中的最小值，如果宽度和高度有多余的部分，在页面上直接显示空白，表现形式和image标签的 background-size:宽度px 高度px； 这种形式相同。 3.移动端案例链接：https://hswlian.github.io/JavaScript-blog/vedio%E7%9A%84%E5%85%BC%E5%AE%B9%E6%80%A7/index.html

---

移动端的兼容性问题

1.问题的场景再现：在案例中，视频标签使用fixed定位，当屏幕向下滑动时，video标签的初始位置覆盖的区域将监听不到在绑定在dom标签上的touch或click事件，即案例中视频关闭按钮在wrap1的大部分区域失效，测试时发现在微信和QQ的内置浏览器不会出现上述问题，在除上述的两个浏览器之外的浏览器均出现了以上问题。
2.测试过程：
--a.在html的dom节点上绑定点击事件touchend,点击事件里的测试方法用alert（'你触碰了屏幕'）；
--b.在微信和QQ的内置浏览器中实验：在向下滑动到video的初始位置范围内的时候，点击视频关闭按钮，出现弹窗‘你触碰了屏幕’，点击video当前位置时，未出现弹窗。
--c.在其他的浏览器中的测试：在向下滑动到video的初始位置范围内的时候，点击视频关闭按钮，未出现弹窗，点击video当前位置时，出现弹窗‘你触碰了屏幕’。
3.原因分析：video标签调用出h5的视频时，视频的内容的层级在所有的html的dom层级之上，表现形式是，触碰播放视频的界面，html上所有的事件均不会被触发，在腾讯qq和微信的内置的浏览器中，随着视频所出现的禁止事件触发的那一层的将随着页面的滚动而移动，而其他浏览器中，禁止事件触发的那一层并未随着浏览器的移动而移动。
4.应用场景：视频弹出层出现后尽量禁止页面的滚动，防止出现用户点击视频关闭按钮不能关闭视频的状况。

---

思考

一些冷僻的浏览器问题尤其是移动端，不能深究，因为这是浏览器的bug......哼哼哼