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.

Solution 1

I found a pretty nice work-around. I'm using jquery, so that's one thing to keep in mind.

My issue was, I was building a Ipad web-app, with a navigation button at the bottom left (I can't give a link as it's a client project). When the user would click (tap) the button in the lower left, a drop-up menu would animate in, and then you could click the buttons in those menu's to get to deeper sub-menu's.

The problem:

any li tags (or anything for that matter) that was over the video, wouldn't be clickable, so on the pages with video, part of my tap-navigation (the part over the video wouldn't work). Reading posts here actually lead me to my solution, simple, and it may or may not work for your case, but I hope it does.

My workaround:

var myNav = $("TAG_SELECTOR_HERE");

myNav.toggle(function(){
   var videos = $("video");
   videos.removeAttr("controls");
},
function(){
   var videos = $("video");
   videos.attr("controls","true");
})

Now I know I may be missing some semi-colons, or my coding may be off, but I'm just posting for reference. Basically, when my menu is clicked, or is active, I'm removing the controls attribute from all videos, and then when the menu is deactivated, I'm bringing the controls back.

You could use this method anywhere you like...you could remove the controls after a video ends, after someone hovers over something (assuming that something isn't already over the video), when the mouse is within certain coordinates (may be your only solution in extreme cases) but this should work.

Thanks!!

-Nick

Solution 2

iPhone doesn't support poster... until os4

Solution 3

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.

Comments

[Steven Hook]

This solution worked for me. Just knowing that the controls attribute is the key here is very useful.

[Magico]

Great Solution , but what if you embed your videos from VIMEO for example? I have a <video> tag into an Iframe so I can't modify it (for cross browser policy!!) any help or workaround? seems that the problem is only on IOS SAFARI please help!