CODEWITHSUNDEEP
htmlhtml5-videovimeo
Yuvals
Yuvals

Reputation: 3266

HTML5 video tag not showing thumbnail on mobile Safari

I am trying to embed a Vimeo video on my website:

        <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>

This works great on HTML5 supporting browsers, but in mobile safari (iPhone), since the video is not automatically played, a thumbnail of the video is expected to be displayed. Instead, I only get a black square. After play/pause of the movie on mobile, the thumbnail is displayed correctly.

How can I fix that?

Upvotes: 2

Views: 9176

Answers (1)

azhpo
azhpo

Reputation: 802

Convert your .jpg image to .png and it will work.

I had this issue and since then I use .png to posters inside <video> tag, because .png posters work on every browser.

Upvotes: 2

Related Questions