How do I avoid the auto fullscreen video player on iOS?

Get help using Construct 2

Post » Tue Nov 03, 2015 3:51 pm

I've made a C2 page included a mp4 film by using Video plugin, when I watch it in iOS Safari or Weixin browser, the video player pops up and takes over the screen.
I found an answer from google said <video id="myVideo" width="xxx" height="yyy" webkit-playsinline> can stop the auto fullscreen, but how do I add the code to the video plugin?

Any suggestions for me?
B
31
S
6
Posts: 6
Reputation: 1,587

Post » Wed Apr 27, 2016 10:38 am

did you ever find a solution to this, been trying to figure this out myself
B
3
Posts: 8
Reputation: 193

Post » Wed Apr 27, 2016 5:17 pm

You can't avoid it. iOS is specifically designed to do this for all video playback. The video plugin also already applies webkit-playsinline - this allows inline playback on iPads, but not iPhones. I've looked and there's no workaround for iPhones! This appears to be a deliberate decision by Apple.
Scirra Founder
B
395
S
231
G
88
Posts: 24,367
Reputation: 193,684

Post » Mon Nov 21, 2016 10:12 pm

IOS 10 now supports playing video inline, on iPhone. The changes also incorporate auto-playing video without user interaction (muted videos only).
https://webkit.org/blog/6784/new-video- ... s-for-ios/

Plus, there is support for painting a video onto canvas, so potentially allowing background video in construct 2 on IOS!
"These new policies mean that more advanced uses of the <video> element are now possible, such as painting a playing <video> to a <canvas> without taking that <video> into fullscreen mode."

Someones cooked up a polyfill for IOS 8 and 9 as well:
https://github.com/bfred-it/iphone-inline-video
B
7
S
2
Posts: 22
Reputation: 529

Post » Fri Dec 02, 2016 12:53 pm

Would love to see this in construct 2, recently used inline play for IOS 10 on a none construct 2 html5 app and it works great, not sure if it has moved to construct 2 yet but these features would be an awesome addition.
B
3
Posts: 8
Reputation: 193

Post » Wed Dec 07, 2016 5:05 pm

I have just tested out playing inline videos again but not using wkebview and webkit-playsinline no longer works i believe (ipad iOS 10).

The video plays inside a player on ipad in landscape instead of inline as it should. Can someone else please test this. the webkit-playsinline tag has been deprecated so now the tag is playsinline as apposed to webkit-playsinline. any chance this can be added to a beta because i need my videos to play inline as they did in iOS 9 on ipad and overlay sprites on top.
B
3
Posts: 8
Reputation: 193

Post » Mon Jan 23, 2017 2:21 pm

Hi

I've got inline video working on iPhone ios 10 and iPad mini ios 9 (Cordova/PhoneGap).

I had to edit the default construct 2 video plugin: C:\Program Files\Construct 2\exporters\html5\plugins\video\runtime.js

Look for this.video.setAttribute("webkit-playsinline", "");
And beneath it add: this.video.setAttribute("playsinline", "");

Then, move both lines out of the if statement "if (this.useDom)" - put them above it. This is because ios 9/10 is now drawing the video to the canvas rather than using the dom. This means that you can now add objects on top of the video as it is being drawn on the canvas itself.

To make this work on Cordova I also had to add this setting to config.xml:
<preference name="AllowInlineMediaPlayback" value="true" />
B
7
S
2
Posts: 22
Reputation: 529


Return to How do I....?

Who is online

Users browsing this forum: Baidu [Spider], Yahoo [Bot] and 28 guests