CODEWITHSUNDEEP
javascriptjqueryhtmlcss
code-8
code-8

Reputation: 58672

Display Video Inline

I have video embedded in a webpage. I would like to let it play inline on the iOS and not expanding to full screen when clicking on the play button.

I've 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've tried added in JSFiddle <-- Please View it use your Phone/Tablet

Any hints ?

Upvotes: 4

Views: 905

Answers (1)

Venkat.R
Venkat.R

Reputation: 7746

You have to set the following in Obj C as well.

webview.allowsInlineMediaPlayback = YES;

Your existing attribute is right like 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

Below are the Webkit Fullscreen properties to play around.

  1. document.webkitCurrentFullScreenElement
  2. document.webkitCancelFullScreen
  3. document.webkitFullScreenKeyboardInputAllowed
  4. document.webkitIsFullScreen

Upvotes: 1

Related Questions