Why Safari on iOS is not showing my HTML5 video poster?

42
votes

I have this webpage:
http://healthpad.net/dashboard/
It have 10 <video> elements on it.

For some reason, when I load the page on an iPad, it is not showing the video posters.

Try the following:

  1. load the page on a desktop browser
  2. load it on an iPad or iPad simulator, and you get a big black box with a play button

image

please tell me why this is happening?

Here's what I've already ruled out:

Image Content-Type header.
I've validated that the image content-type header is properly set. In the example above, the Content-Type header properly image/jpeg.

Interference with the video.js library
VideoJs is used to show that nice play button on desktop browsers and to customise the controls. This library doesn't interfere with the native player however.
Just to make sure, I've created a test video page which doesn't have the video-js class, so the library doesn't pick up and process that video. In fact, the test page doesn't even include any JS library, it's just 

<html><body>
    <video
        controls
        height="400"
        width="600"
        poster="http://healthpad.net/media/CACHE/images/uploads/video_poster_1414/bd5fba5a68ddd0f4b3f61193f6908962.jpg"
        src="http://healthpad.net/media/uploads/video_processed_720p_1414.mp4"
    ></video>
</body></html>

http://healthpad.net/rj_templates/test/zzz/

Usage of any video attributes that may not be supported on Mobile Safari
The test page above just has a plain video tag. I've tried removing every other attribute except for src and poster, it didn't help.

Most of the StackOverflow questions on the topic just say "Restart your iPad"

Here's where it gets weird:

If you google around on this, the answers on StackOverflow that have been accepted often say "Restart your iPad, that did it for me".

So I've tried doing the same thing, at first I just said that it doesn't work in my case.

Then, I tried this:
(all of the following on the iPad simulator)

  1. Go to the site, video posters don't show
  2. Go to the test page (http://healthpad.net/rj_templates/test/zzz/), video poster doesn't show.
  3. Click home to exit Safari (or Cmd+Shift+H mac shortcut for the simulator)
  4. Double-Click home button to get the task switcher outside of Safari, tap and hold on the safari icon until the kill button shows.
  5. Kill Safari
  6. Open safari (restarted). At this point, if you load the test page (the one with just one video), the poster will show.
  7. Now go to the multi-video page: (http://healthpad.net/dashboard/). Video posters don't show.
  8. Go back to the single-video test page, the video poster for that one no longer works either.
  9. Repeat steps 3 to 8 to see the process of when video posters stop working.

So apparently, at some point, Mobile Safari decides it will no longer show any video posters. Also, apparently, my site triggers this condition.

Clarifications:

When posters no longer work, it doesn't only occur on one domain, no video posters will be loaded for any other site, regardless whether or not it's on a totally different domain (e.g. the demo video from http://www.videojs.com/).

In order to reset this behaviour, from what I've seen, you have to kill and restart Safari. Just closing and reopening it doesn't reset this state.

Does anyone have any idea why this is happening? Is there a way to work around it?

5
iosipadhtml5-videomobile-safari
So you see the issue with the plain video tag too, or is it just when using video.js? Also what version of video.js and what iOS version? – heff
Happens with plain video tags too, even when videojs is not present. – Prody

5 Answers

16
votes

EDIT: looks like this no longer works. Not shocking given how much iOS has changed in the last 7 years.

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.

2
votes

I see the question keeps getting upvoted once in a while, though there's no answer. So here's what I ended up doing:

On iOS, instead of showing the video player (even with autoload=false), I will just show the poster and a play button, two standalone <img> tags. When they get clicked, I create the video player from javascript and tell it to play. Works fine, users don't see much difference.

2
votes

I fixed it by adding preload="none" to my code.

<video width="344" preload="none" height="217" poster="/themes/custom/xxxxxx">
0
votes

In Safari settings [iOS7] Block Pop-Ups turned "OFF" seemed to cure this for me, hope this helps.

0
votes

Well if someone is still stuck on this is how I managed to get it done in React.js but the algorithm itself should be useful in any framework:

First I detect whether the browser is safari or not using the following in a useEffect:

var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

then I set it inside a state object.

If safari is true then instead of displaying the video i simply display an image with that poster as its source. Then I have an onClick handler on the image tag itself clicking on it will change the above state back to false and hence image component will stop showing and video will be shown instead. Now one more problem you would have to tackle here is that on image click the image will disappear and video will appear and you'll then have to click the video again for it to play. That's bad UX. so for that you can simply attach a ref to the video and inside the click handler for Image after you set the state simple do :

videoRef.current.play()

This will start playing the video as well. I know this is a hacky solution so don't come at me but it was the only thing i could do to get it work.