【踩坑】HTML5 Video 标签 poster 属性 无法在苹果Safari浏览器显示视频封面

1、问题描述：

        video标签用poster属性写入视频封面图在chrome系列浏览器可以正常显示，但是在PC端苹果Safari浏览器却无法显示，把poster网络图片链接切换成本地图片也不行。

2、分析原因：

        通过查找资料得知，当前所有主流浏览器都支持 poster 属性，所以不是浏览器兼容问题。（注释：Internet Explorer 8 以及更早的版本不支持 <video> 标签。）

        转换思维，应该是苹果Safari浏览器的默认行为。当Safari浏览器加载完视频第一帧后，video标签就会直接显示第一帧画面，而没有显示poster属性设置的图片。

3、解决方法：

        在video标签中设置预加载属性 preload= "none"，使当前页面不预加载该视频，则会默认显示poster属性的封面图。

<video id="video" controls poster="/images/poster.jpg" preload="none">
    <source src="/assets/test.mp4" type='video/mp4' />
</video>