Interactive video - Cannot prevent fullscreen on iPhone

Hello,

I cannot get an interactive video to work on an iPhone. The video is loaded in a WebView on an iPhone and iOS plays it fullscreen w/o interactivity.

I've tried what Apple advise for forcing a video to play inline (i.e. add the "webkit-playsinline" attribute to the <video> element) but it doesn't work.

Do you have any advice?

Thank you,

Marco

Ok, got it ;-) Just changed this line:

interactive-video.js: 74

self.justVideo = navigator.userAgent.match(/iPhone|iPod/i) ? true : false;

Thanks anyway,

Marco

icc's picture

Hi! Yes, the interactivity is disabled on iPhone/iPod by default since it uses a separate app to play the videos. 

May I ask in which WebView you are putting the Interactive Video? :-)

I heard a rumour that H5P has started to work better in apple's mobile devices - is there currently a way to get interactivity in video to work somehow?

falcon's picture

Not as far as I know :/
gpakat's picture

Some good news, it seems that Safari for iOS 10 will finally support inline video and autostart video on iPhone:

https://developer.apple.com/library/prerelease/content/releasenotes/Gene...

 

Media

Inline and Auto Video Playback on iOS

  • When the webkit-playsinline property is specified, Safari on iPhone allows videos to play inline. Videos without the property will commence playback in fullscreen, but users can pinch close on the video to continue playing the video inline.

  • On iOS, videos without audio tracks or with disabled audio tracks can play automatically when the webpage loads.

Picture in Picture on OS X

  • Safari 10 for OS X brings Picture in Picture to OS X so users can watch video in a separate, resizable window that stays on top of other application windows and remains on-screen when switching desktop spaces.

  • Safari's default HTML5 video controls includes a new Picture in Picture control.

  • If you use custom HTML5 video controls, you can add Picture in Picture functionality using the JavaScript presentation mode API.

of course this needs to be tested with H5P Interactive Video, does anyone have a beta of iOS 10 on iPhone?

 

 

 

fnoks's picture

Thanks for that information. Unfortunately, the only iOS device I had available right now is an old iPod Touch (5th generation), which is not supported by the iOS 10 Beta program. Anyways, I have prepared H5P.Video, so that it should be possible to test it out from a local H5P server (not h5p.org).

I hope I will be able to test this on an iOS device within a few days. Stay tuned :)

pheraph's picture

I added the video attribute as suggested in your github commit and loaded an interactive video on an iOS 10 device - but the video isn't shown at all. :-(

fnoks's picture

That is exactly what I experienced aswell. I have on my TODO-list to connect an iOS-device running iOS 10 to my iMac, to see what kind of error messages are printed to the console. If someone out there has the possibility to do that before me, you are welcome.

pheraph's picture

This is what is printed as errors on my installation (there is a bunch of CSS-warnings but no more errors):

Attachments: 
fnoks's picture

Thanks a lot. We will look into these problems. Hopefully, we will find a fix which will be part of the release we are working on right now.

fnoks's picture

Btw, have you tried using the video option in multiple choice. It should work on iOS10 with the webkit-playsinline fix.  

my son just crashed the last iPad screen, so I can not test it in the next days, but this fixed the problem the last time for me:
video.setAttribute('webkit-playsinline, 'true'); // must be set before src is set or it will be ignored

Your new line 64 of html5.js is: 
video.setAttribute('webkit-playsinline', '');

Maybe there is just the 'true' missing?

the playsinline attribute must be invoked BEVORE video.scr

fnoks's picture

The webkit-playsinline does not need a value, ref https://webkit.org/blog/6784/new-video-policies-for-ios/

I think the real problem was that webkit-playsinline has been unprefixed, even if I can not find any documentation on this on Apple's web pages.

I have tested this on the latest iOS Beta on iPhone SE, and it is now possible to play inline :) The following commit is relevant: https://github.com/h5p/h5p-video/commit/808e53ac35

fnoks's picture

Note: Playing youtube inline does not work yet, because of the following issue: https://code.google.com/p/gdata-issues/issues/detail?id=8487

if you belief the simulator of Xcode v. 8.0 beta 6
then all works as expected. tested with your smoothie demo.
Thank you!

(now I have to update 175 iPads of the school of my son to make it happen (iPads of all ages) or find a way to make it work under iOS 9)

your demo also works well iOS 9.3 on iPads.
it is a crazy html5 canvas animation that confused safari on iOS9 on my test site, sorry.

I just updated my iPhone to iOS 10.0.1 and Interactive Videos no longer show up at all. I've tried setting webkit-playsinline and playsinline in the html5.js file (per https://github.com/h5p/h5p-video/commit/808e53ac35529318bf52954054ed4962...), but it's still not working. Are there other changes that need to be made to make this work with iOS 10? 

fnoks's picture

We are hoping this will be fixed for the upcoming release. Stay tuned :)

gpakat's picture

Works now for me on Wordpress with latest H5P installed on iPhone 6 running IOS 10. See attachment.

Also seems to work better on Android Phones now (landscape, fullscreen interactive video or course presentation).

I have ipad pro with ios 10 i dont can fullscreen h5p content with lms moodle, how is possible?

fnoks's picture

Are you trying to say you are not able to get H5P content into the fullscreen mode? Which content type? What happens when you click the fullscreen button? Nothing, or something else?

The interactive timeline does not show up on https://h5p.org/interactive-video

Only the full video playing with not interactions within.

Using an iPhone 6 iOS 9.3.4 with latest dl of FireFox / Safari / Chrome

fnoks's picture

Hi,

As mentioned above, you need to upgrade your phone to iOS 10.