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>