Inline and Auto Video Playback in iOS 10

Browser & Compatibility
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