iPad/iPhone HTML5 video loading

Question

I'm trying to load on the fly on the iPad/iPhone and notice that I cannot place a div above this. I put the overlay in the html so that it's generated on page load and not added via javascript and the video when its created is absolutely positioned below this element. This works on a PC, I'm wondering if since it was created via js that the iPhone OS is overriding the z-index and forcing to the top?

Also is there a way to override the default "cannot play icon", the one with the slash, and show a loading animation instead? This would solve my issue via another route.

My last option would be to loaded all the video tags via js on page load and have them layered on top of each other for the iPad/iPhone? Since the iPhone OS won't load any video until requested would this work?

I also am having an issue with the iPhone and showing the "poster" attribute that is set on the video tag.

Answer 1

iPhone doesn't support poster... until os4

Answer 2

You can position an image absolutely over the video player. Safari on iPhone will render it with a transparant 'play' symbol. I believe something like this may work:

<style type="text/css">
div.player
{
    position: relative;
    margin: 0;
    padding: 0;
}

div.player > img.preview
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    cursor: pointer;
}
</style>

And

<div class="player">
  <img class="preview" src="zk/grumpies.png" width="320" height="240" alt="click to play" title="click to play">
  <video width="320" height="240" controls="controls">
    <source type="video/mp4" src="mah/mahnamahna.m3u8" width="320" height="240" /> 
  </video>
</div>

On an iPad it may work differently depending if you use <video controls /> or not - in which case you need to provide your own controls with javascript or you won't be able to start your media.

The 'cannot play' icon is in my experience normally always an indication that the media can't really be played ;-) because of having the wrong mimetype or codec, incorrect src etc. Overriding it would be a case of checking the media load error exceptions with javascript.

Layering media on top of each other is I think impossible. You fake it maybe by switching positions.

Answer 3

I have successfully positioned a containing links over my video element and everything works fine on my Mac desktop Safari, but on Ipad/Iphone, the links become un-clickable even after changing the z-index. I think that the default PLAY button that the Iphone/Ipad displays over the video is somehow set to always display on top of other elements. Does anyone know of a way I could access these links?