CODEWITHSUNDEEP
iphoneios7html5-videomobile-safari
Vee
Vee

Reputation: 1841

Poster attribute not working in video tag on iPhone 5

Does anybody know if iOS7 Safari for the iPhone has problems with the poster attribute in a video tag?

I've been having issues with my application though it works for Chrome (iPhone, iPad, laptop) and iOS7 Safari (iPad only). While videos plays fine, iOS7 Safari for iPhone doesn't render the poster image.

Per HTML5Test.com, iOS7 Safari for iPhone supports the video element and provides Poster image support. But, using the sample code from http://www.w3schools.com/tags/att_video_poster.asp, you'll notice the poster image doesn't load for Safari on your iPhone (but it works fine on Chrome).

Also, per Apple (see "Showing a Poster"):

"Setting a poster image normally has a transitory effect—the poster image is shown only until the first frame of the video is available, which is typically a second or two. On iOS, however, the first frame is not shown until the user initiates playback, and a poster image is recommended, as shown in Listing 1-2."

https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html

Just want to make sure I'm not missing something simple before I use a hack to get around this.

Upvotes: 4

Views: 3708

Answers (1)

Dan Weaver
Dan Weaver

Reputation: 731

I got this working by using a PNG instead of a JPG.

Weird thing is, the JPG worked in iOS Safari locally (via a POW server on local wifi) but when pushed to staging the poster image didn't load. Both the local and staging code were referencing the same file on S3.

Changed the file format to PNG and it loads fine.

Upvotes: 2

Related Questions