video标签的归纳

Posted 2023-04-22

参考技术A video标签的属性
src: 用于告诉video标签需要播放的视频地址
autoplay: 用于告诉video标签是否需要自动播放视频
controls: 用于告诉video标签是否需要显示控制条
poster: 用于告诉video标签视频没有播放之前显示的占位图片
loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是否需要循环播放
preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
muted:静音
width/height: 和img标签中的一模一样

自己需要注意的是
在电脑中src即使找到了该文件也只是用11213才能打开，除非是在你设置格式之后才能直接以图片格式打开 如下

1.格式:
<video>
<source src="" type=""></source>
<source src="" type=""></source>
</video>

2.第二种格式存在的意义:
由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的
这个时候W3C为了解决这个问题, 所以推出了第二个video标签的格式

video标签的第二种格式存在的意义就是为了解决浏览器适配问题
video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放

3.注意点:
3.1当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持html5标签, 否则同样无法播放
3.2在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media来实现
-->

关于IOS下的video标签层级问题

参考技术A 用了百度的cyberplayer，播放的时候，使用的是他自己生成的video

单独使用能正常使用，但是跟antd mobile的Carousel结合的时候
走马灯+视频，会有个bug，这个bug只在iphone的safari上出现，在macbook的safari和chorme上都没有出现。
bug是视频播放器的control条出不来了，这个control条是cyberplayer的，不是原生的，不管怎么点都出不来

后来突发奇想改了height 80%,发现问题是因为video的层级太高了，把control条挡住了，可是加了z-index，设置了定位，也没用，我还以为是iphone上safari播放video标签，自动采用原生的播放，导致层级比任何元素都高，但是稍微调试了一下发现，给video设置了zindex:-1，就能看见control条，并且视频消失，这样子就不符合猜想了，如果是原生的video，那不可能被zindex：-1给干掉，

发现当这个播放器在其他页面单独使用的时候是正常的，然后搜了一下对应的github的issues，都没类似的问题，很奇怪，如果这个bug存在的话，那一定是常见的，肯定是会有人提出过的，

于是猜想，这个不是bug，这是样式问题导致的，后来看到一篇文章
https://juejin.im/post/5cb6d36c6fb9a06880144666

先不管position是不是fixed，走马灯就是有定位，并且它的transform改变引起滑动，非常有可能是这个原因，所以试了一下，把control条加了transform:translateZ(100px)

这里要说明的是，video标签，和control条，都被我加了定位，这样子zindex才会有效

惊呆了，transform:translateZ(100px) 居然能作用在zindex上