Interactive video - Cannot prevent fullscreen on iPhone
Submitted by marco.gambero on Tue, 02/16/2016 - 16:27
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?
Tue, 02/16/2016 - 16:52
Ok, got it ;-) Just changed
Ok, got it ;-) Just changed this line:
self.justVideo = navigator.userAgent.match(/iPhone|iPod/i) ? true : false;
Wed, 02/17/2016 - 14:01
Hi! Yes, the interactivity is
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? :-)
Thu, 04/14/2016 - 16:25
Is there way to get interactivity to play?
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?
Fri, 04/15/2016 - 15:40
Not as far as I know :/
Thu, 08/11/2016 - 19:35
Some good news, it seems that Safari for iOS 10 will finally support inline video and autostart video on iPhone:
Inline and Auto Video Playback on iOS
webkit-playsinlineproperty 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.
of course this needs to be tested with H5P Interactive Video, does anyone have a beta of iOS 10 on iPhone?
Thu, 08/11/2016 - 21:56
Thanks for that information.
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 :)
Tue, 08/16/2016 - 12:44
Test on iOS 10 failed
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. :-(
Tue, 08/16/2016 - 13:51
That is exactly what I
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.
Tue, 08/16/2016 - 14:11
This is what is printed as errors on my installation (there is a bunch of CSS-warnings but no more errors):
Tue, 08/16/2016 - 14:46
Thanks a lot. We will look
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.
Thu, 08/18/2016 - 17:02
Btw, have you tried using the
Btw, have you tried using the video option in multiple choice. It should work on iOS10 with the webkit-playsinline fix.
Tue, 08/23/2016 - 21:27
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:
Maybe there is just the 'true' missing?
Tue, 08/23/2016 - 23:33
and for sure
the playsinline attribute must be invoked BEVORE video.scr
Wed, 08/24/2016 - 10:12
The webkit-playsinline does
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
Wed, 08/24/2016 - 10:25
Note: Playing youtube inline
Note: Playing youtube inline does not work yet, because of the following issue: https://code.google.com/p/gdata-issues/issues/detail?id=8487
Wed, 08/24/2016 - 16:46
if you belief the simulator of Xcode v. 8.0 beta 6
then all works as expected. tested with your smoothie demo.
(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)
Wed, 08/24/2016 - 17:00
ok i'm stupid
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.
Wed, 09/14/2016 - 03:18
I just updated my iPhone to
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?
Wed, 09/14/2016 - 09:30
We are hoping this will be
We are hoping this will be fixed for the upcoming release. Stay tuned :)
Sat, 10/01/2016 - 14:15
iPhone 6 running IOS10
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).
Thu, 10/20/2016 - 17:08
I have ipad pro with ios 10 i dont can fullscreen h5p content with lms moodle, how is possible?
Fri, 10/21/2016 - 08:38
Are you trying to say you are
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?
Sat, 10/08/2016 - 09:43
testing the demo video
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
Sat, 10/08/2016 - 10:02
Hi,As mentioned above, you
As mentioned above, you need to upgrade your phone to iOS 10.