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支持的浏览器，但在移动版Safari（iPhone）中，由于视频不会自动播放，因此预计会显示视频的缩略图。相反，我只得到一个黑色方块。 在移动设备上播放/暂停电影后，缩略图会正确显示。

我该如何解决？

Answer 1

将您的.jpg图片转换为.png，这样就可以了。

我遇到了这个问题，从那以后我使用.png在<video>标记内张贴海报，因为.png海报适用于每个浏览器。