3

I want to have an inline video of my video hosted on a S3 bucket. I use a HTML video tag to achieve this and have changed the following settings, in defaults.xml

<!-- Preferences for iOS -->
<preference name="AllowInlineMediaPlayback" value="true" />

If I build my Iphone app the config.xml file display this setting correctly:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.phonegap.helloworld" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
    <preference name="AllowInlineMediaPlayback" value="true" />

In my app I have the following code: 

<div className="hub-videobox">
    <video webkit-playsinline >
        <source src="https://s3-eu-west-1.amazonaws.com/mybucket/0rdrd88" type="video/mp4"/>
    </video>
</div>

I would expect that this would result in an inline video. However, the native video player is launched, and it plays fullscreen. Why is this happening?

Thanks!

Im using phonegap/cordova 4.2.0

swennemen
  • 945
  • 1
  • 14
  • 24

3 Answers3

2

So far I found, no matter how many things you try, still it will happen. See this apple developer link, it's mentioned that if the screen is small then native app will catch the video. There is no mention of avoiding it.

Optimization for Small Screens

Currently, Safari optimizes video presentation for the smaller screen on iPhone or iPod touch by playing video using the full screen—video controls appear when the screen is touched, and the video is scaled to fit the screen in portrait or landscape mode. Video is not presented within the webpage. The height and width attributes affect only the space allotted on the webpage, and the controls attribute is ignored. This is true only for Safari on devices with small screens. On Mac OS X, Windows, and iPad, Safari plays video inline, embedded in the webpage.

Now the things you tried are suggested by many. But those do not work as expected. So I guess it's not possible. See the upvote on comments in the first answer of Can I avoid the native fullscreen video player with HTML5 on iPhone or android? This shows this inline things do not work properly. iPhone will continue to grab the video and if proper big screen is found then inline properties will work.

Community
  • 1
  • 1
AtanuCSE
  • 8,832
  • 14
  • 74
  • 112
  • Thanks, then I can stop trying. Maybe in the future I could convert the video to .gif, for now i just have to accept the fullscreen – swennemen Mar 12 '15 at 19:46
0

The best method for this I've seen is to display the video in an HTML5 canvas.

Basically, take advantage of the fact that a canvas can draw an image directly from a video frame. Set up a loop that increments the video time, grabs the current frame, and then draws it. For most videos the effect will be seamless, and it won't go full screen because you're not playing the video file, you're just using it as a reference for the canvas.

Note that if you need audio, since canvas doesn't support audio directly, you'll need an HTML5 audio element that somehow plays and syncs audio to the video.

Here is a github repo that works well for this purpose, although you could certainly write your own solution.

jered
  • 11,220
  • 2
  • 23
  • 34
0

I was having the same problem with Cordova 6.3.1 and an iPhone running iOS 10. I managed to stop it with the brute-force but apparently effective:

      mediaElement.play()
      mediaElement.webkitExitFullScreen()
      mediaElement.controls = false
Simon Cozens
  • 755
  • 4
  • 16