HTML5视频标签在移动Safari上不显示缩略图

Question

我正在尝试在我的网站上嵌入Vimeo视频：

        <video id="home-video" autoplay="autoplay" loop="true">
            <source src="http://player.vimeo.com/external/XXX.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
            <source src="http://www.mywebsite.com/XXX.webm" type="video/webm">    
            <img src="http://www.mywebsite.com/XXX.jpeg">
        </video>

这在支持HTML5的浏览器上效果很好，但在移动野生动物园（iPhone）中，由于视频不会自动播放，因此预计会显示视频的缩略图。相反，我只得到一个黑色方块。在移动设备上播放/暂停电影后，缩略图将正确显示。

我该如何解决这个问题？

Answer 1

将您的.jpg图像转换为.png，它将起作用。

我遇到了这个问题，从那时起，我对标签内的海报使用.png <video>因为.png海报适用于每个浏览器。