Inline and Auto Video Playback in iOS 10

Browser & Compatibility
1

Two popular Hype requests have been for videos to play inline on the iPhone and a way to autoplay videos on iOS. There is nothing we can do; this is an iOS restriction (though these are capabilities that are possible if you embed Hype content in your own native app with a UIWebView).

Today I discovered some good news - from the look at Apple’s prerelease documentation for the upcoming iOS 10, it looks like Mobile Safari is relaxing this limitation and will now support both of these features:

https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html#//apple_ref/doc/uid/TP40014305-CH11-DontLinkElementID_12

One could make an educated guess Hype might support this in a future version :wink:.

7 Likes
2

Hi there,

any news on how to implement inline video with autoplay within iOS10?

Tia!

T.

3

Until Hype has the option in the user interface you will need to add the playsinline attribute manually.

You can do this if you have created your video via innerHTML ,

<video autoplay loop muted playsinline>
  <source src="image.mp4">
   
</video>

Note also the autoplay and the muted attributes. Autoplay will only be honoured if there is no sound track or the muted attribute is included.

see new video policies for iOS for more in-depth info.

Or use javascript to add the attribute if you have dropped a video onto the scene…

Give the video an id and run something like this.

var vid = hypeDocument.getElementById('videoplayback1')
vid.setAttribute("playsinline", "");

Note when testing in Hype Reflect none of this will work you need to hit the Safari button in Hype Reflect to see it working.
It looks like Hype Reflect needs updating…

Also note that using the Autoplay from a dropped video and the GUI will not work but does if you manually create the video container in the innerHTML.

2 Likes
4

Hi,

thanks a lot! Im just wondering if there is a way to check if the user has iOS below version 10 and then show an alternative layout without video?

Cheers,
T.

5

If you read the link I supplied they mention a Media query .

This may do that?

6

Note: Inline and Autoplay for iOS 10+ are now available as options in Hype 3.6+.

1 Like
7

Hello!

I am able to get videos to play inline if I view the hype file via iPad’s Safari.

However, I am developing a Cordova app, and inline does not work. I realise this is likely an apple problem and not a hype problem, but does anyone know if there might be a workaround for Cordova / ionic / react native apps?

Edit: Found solution that should work. I should have googled before posting here, sorry!
https://cordova.apache.org/docs/en/3.1.0/guide/platforms/ios/config.html

Edit 2: This does indeed work, in case anyone else comes up against this!

2 Likes