title: Why Safari on iOS is not showing my HTML5 video poster?
body: <p>I have this webpage:<br>
  <a href="http://healthpad.net/dashboard/" rel="noreferrer">http://healthpad.net/dashboard/</a><br>
  It have 10 <code>&lt;video&gt;</code> elements on it.</p>
  
  <p>For some reason, when I load the page on an iPad, it is not showing the video posters.  </p>
  
  <p>Try the following:  </p>
  
  <ol>
  <li>load the page on a desktop browser  </li>
  <li>load it on an iPad or iPad simulator, and you get a big black box with a play button</li>
  </ol>
  
  <p><img src="https://i.stack.imgur.com/GZtAX.png" alt="image"></p>
  
  <p>please tell me why this is happening?</p>
  
  <p>Here's what I've already ruled out:</p>
  
  <p><strong>Image Content-Type header.</strong><br>
  I've validated that the image content-type header is properly set.
  In the example above, the <code>Content-Type</code> header properly <code>image/jpeg</code>.</p>
  
  <p><strong>Interference with the video.js library</strong><br>
  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.<br>
  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 </p>
  
  <pre><code>&lt;html&gt;&lt;body&gt;
      &lt;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"
      &gt;&lt;/video&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p><a href="http://healthpad.net/rj_templates/test/zzz/" rel="noreferrer">http://healthpad.net/rj_templates/test/zzz/</a></p>
  
  <p><strong>Usage of any video attributes that may not be supported on Mobile Safari</strong><br>
  The test page above just has a plain video tag. I've tried removing every other attribute except for <code>src</code> and <code>poster</code>, it didn't help.</p>
  
  <p><strong>Most of the StackOverflow questions on the topic just say "Restart your iPad"</strong></p>
  
  <p><strong>Here's where it gets weird:</strong></p>
  
  <p>If you google around on this, the answers on StackOverflow that have been accepted often say "Restart your iPad, that did it for me".</p>
  
  <p>So I've tried doing the same thing, at first I just said that it doesn't work in my case.</p>
  
  <p>Then, I tried this:<br>
  (all of the following on the iPad simulator)</p>
  
  <ol>
  <li>Go to the site, video posters don't show</li>
  <li>Go to the test page (<a href="http://healthpad.net/rj_templates/test/zzz/" rel="noreferrer">http://healthpad.net/rj_templates/test/zzz/</a>), video poster doesn't show.</li>
  <li>Click home to exit Safari (or Cmd+Shift+H mac shortcut for the simulator)</li>
  <li>Double-Click home button to get the task switcher outside of Safari, tap and hold on the safari icon until the kill button shows.</li>
  <li>Kill Safari</li>
  <li>Open safari (restarted). At this point, if you load the test page (the one with just one video), the poster will show.</li>
  <li>Now go to the multi-video page: (<a href="http://healthpad.net/dashboard/" rel="noreferrer">http://healthpad.net/dashboard/</a>). Video posters don't show.</li>
  <li>Go back to the single-video test page, the video poster for that one no longer works either.</li>
  <li>Repeat steps 3 to 8 to see the process of when video posters stop working.</li>
  </ol>
  
  <p>So apparently, <strong>at some point, Mobile Safari decides it will no longer show any video posters</strong>.
  Also, apparently, my site triggers this condition.</p>
  
  <p><strong>Clarifications:</strong></p>
  
  <p>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 <a href="http://www.videojs.com/" rel="noreferrer">http://www.videojs.com/</a>).</p>
  
  <p>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.</p>
  
  <p>Does anyone have any idea why this is happening? Is there a way to work around it?</p>