Show Inline Video

Question

I have a video embedded in a webpage. I would like to let him play inline on iOS and not expand to full screen when the play button is pressed.

I tried

adding webkit-playsinline

<video width="400" controls webkit-playsinline>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

I tried adding to JSFiddle <- Please view it using your phone / tablet

Any clues?

Answer 1

You should also set the following to Obj C.

webview.allowsInlineMediaPlayback = YES;

Your existing attribute is rights as shown below.

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

Other - use HTML5 FullScreen API

http://www.sitepoint.com/use-html5-full-screen-api/
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

Webkit.

• document.webkitCurrentFullScreenElement
• document.webkitCancelFullScreen
• document.webkitFullScreenKeyboardInputAllowed
• document.webkitIsFullScreen