HTML5 inline video on iPhone vs iPad/Browser

htmlipadiphonevideo

I've created an HTML5 video player (very simple) that works perfectly on the iPad and the browser.

However, when I open it on the iPhone, I only get a play button which, when pressed, opens the native video player on a new window, on top of all my stuff.

That means I lose access to my custom controls and time tracking (written in Javascript), since the video is now running isolated.

Is there any way to override Apple's control of HTML5 video on the iphone and get it working like on the ipad?

Cheers

Best Answer

Right,

I was going nowhere with this and filed a bug with Apple.

After a couple of weeks they got back to me saying, very simply, that I should add "webkit-playsinline" to the video tag on the HTML, as well as adding the "allowsInlineMediaPlayback" property on the UIWebView.

So in the end, this is what it looks like:

HTML

<video id="player" width="480" height="320" webkit-playsinline>

Obj-C

webview.allowsInlineMediaPlayback = YES;

And all works just fine :)

Hope this helps someone, as it's virtually undocumented and the only place I could find a reference to "webkit-playsinline" was in the iAds reference, where it says: "iAds JS only".

Related Solutions

Html – How to disable browser autocomplete on web form field / input tags

Firefox 30 ignores autocomplete="off" for passwords, opting to prompt the user instead whether the password should be stored on the client. Note the following commentary from May 5, 2014:

The password manager always prompts if it wants to save a password. Passwords are not saved without permission from the user.

We are the third browser to implement this change, after IE and Chrome.

According to the Mozilla Developer Network documentation, the Boolean form element attribute autocomplete prevents form data from being cached in older browsers.

<input type="text" name="foo" autocomplete="off" />

Html – How to make a div 100% height of the browser window

There are a couple of CSS 3 measurement units called:

Viewport-Percentage (or Viewport-Relative) Lengths

What are Viewport-Percentage Lengths?

From the linked W3 Candidate Recommendation above:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

These units are vh (viewport height), vw (viewport width), vmin (viewport minimum length) and vmax (viewport maximum length).

How can this be used to make a divider fill the height of the browser?

For this question, we can make use of vh: 1vh is equal to 1% of the viewport's height. That is to say, 100vh is equal to the height of the browser window, regardless of where the element is situated in the DOM tree:

HTML

<div></div>

CSS

div {
    height: 100vh;
}

This is literally all that's needed. Here is a JSFiddle example of this in use.

What browsers support these new units?

This is currently supported on all up-to-date major browsers apart from Opera Mini. Check out Can I use... for further support.

How can this be used with multiple columns?

In the case of the question at hand, featuring a left and a right divider, here is a JSFiddle example showing a two-column layout involving both vh and vw.

How is `100vh` different from `100%`?

Take this layout for example:

<body style="height: 100%">
    <div style="height: 200px">
        <p style="height: 100%; display: block;">Hello, world!</p>
    </div>
</body>

The p tag here is set to 100% height, but because its containing div has 200 pixels height, 100% of 200 pixels becomes 200 pixels, not 100% of the body height. Using 100vh instead means that the p tag will be 100% height of the body regardless of the div height. Take a look at this accompanying JSFiddle to easily see the difference!

Best Answer

Related Solutions

Html – How to disable browser autocomplete on web form field / input tags

Html – How to make a div 100% height of the browser window

Viewport-Percentage (or Viewport-Relative) Lengths

What are Viewport-Percentage Lengths?

How can this be used to make a divider fill the height of the browser?

HTML

CSS

What browsers support these new units?

How can this be used with multiple columns?

How is 100vh different from 100%?

Related Topic

How is `100vh` different from `100%`?