iPhone: first click always opens fullscreen, closing and resuming can show video inline (plus CSS hack to hide native controls)

[marinaglancy]

Moodle is including Video.JS 5.11.8 in Moodle 3.2 (due to be released on 28 November 2016). We have looked at many other players and agreed that Video.JS is the best for both look and accessibility. Great job guys! The only modification we made so far is for the size of audio (as I commented on #2777).

Now during integration testing my colleague who uses iPhone has found some problems with it. I use only Android myself, love open-source (work for Moodle too) but still iPhone has a huge share of mobile phones market and we have to think about our users. Some use IE too, sigh. Anyway...

I have found lots of discussions about Video.JS on iPhone but all issues are closed. Still I'm opening a new issue since I believe iOS developers have changed something.

Problem: Videos automatically opens in fullscreen Several issues here (#1978 , #1364, #896) say something like:

iPhones will always enter the fullscreen native player with html5 video. Not a bug and nothing you or us can do about it.

This is no longer true.

Here is a test page with a video, if you open it on iPhone and click play button the video opens in fullscreen mode. Then you can close full screen mode and after that you will be able to resume video inline. This means that videos CAN be played without fullscreen on iPhone when pressing video.js controls. I believe this now can be addressed by Video.JS team and videos can start playing inline when the play button is clicked first time.

Example: http://prototype.moodle.net/media/videojs1.htm

Reported in Moodle tracker as https://tracker.moodle.org/browse/MDL-56854

[misteroneill]

Thanks for the great, detailed report @marinaglancy - it's really appreciated!

I believe this family of issues with iOS 10 and fullscreen/double controls may have been fixed in the 5.12 line of Video.js. Would you mind trying that?

You can install it via npm install video.js@next.

[thijstriemstra]

I'm using this JS hack to hide the native controls: https://github.com/collab-project/videojs-wavesurfer/blob/master/videojs.wavesurfer.js#L87

[marinaglancy]

Here is the test files with 5.12.6: http://prototype.moodle.net/media/videojs3.htm http://prototype.moodle.net/media/videojs4.htm (with CSS hack)

I see exactly the same behavior on iPhone :(

But good to know that 5.12 is now fully released, I'll pull it in moodle before our 3.2 release

[misteroneill]

Thanks.

5.12 was promoted to "latest" today on npm and 5.13 is now released as "next" - that said, I don't think 5.13 includes a fix for this. We can discuss this because I know we've seen it at Brightcove and had a fix for it.

[marinaglancy]

great news about release. Unrelated: http://videojs.com/getting-started/ yesterday had links to 5.11.9 but today it is pointing to 5.8.8, you might want to fix it

[gkatsev]

I just fixed the getting-started page earlier today. Possible it's cached on your end or unpkg.com didn't respond. Though, I do still need to update the fallback version.

[hartman]

BTW, for me the examples by @marinaglancy don't work at all (presumably because lack of Range headers, which seem to be a requirements on newer versions of Safari).

[mister-ben]

The examples do not have the playsinline attribute, which enables inline playback on iOS 10.

You should also add the type to your sources. That's used to figure out which source can be played.

[marinaglancy]

@hartman sorry, I was trying to create examples completely independent from moodle environment but it looks that our prototype site web server does not send correct headers. I have changed the sample htm files now to get mp4 files served by moodle, they should have proper headers. I have also added "type" attribute (but I don't think it makes any difference).

@mister-ben THANK YOU!!!!! I had no idea about this attribute. Found it now on https://webkit.org/blog/6784/new-video-policies-for-ios/ I added Examples 5 and 6 to files http://prototype.moodle.net/media/videojs3.htm http://prototype.moodle.net/media/videojs4.htm (with CSS hack) with the playsinline attribute. On iOS 10 even without CSS hack videos are displayed without native controls.

Thanks so much! We are now going to release Moodle 3.2 providing similar user experience across platforms!

[marinaglancy]

to video.js team: @mister-ben suggested awesome solution (awesome = Australian word :) ) to specify plainsinline attribute for

[mister-ben]

Glad that worked for you. I think playsinline is detailed in one of the doc updates in progress at the moment.

Defaulting to inline playback is something to consider, but probably should come in a major release.

I think the Americans might dispute ownership of awesome...

[marinaglancy]

P.S. http://videojs.com/getting-started/ still points to the wrong version!

[misteroneill]

@marinaglancy For me it points to 5.12.6 which is the current latest version on npm ({ latest: '5.12.6', next: '5.13.2' }). We always stagger our new minor releases as the next dist-tag on npm to iron out any remaining bugs before promoting it to latest.

[DieterPagel]

Does anyone perhaps have a working code example for me on how to play video inline on iOS? We have read extensively in the forums and tried all suggestions but we just can't seem to get it to work

[Yalhu]

Video still enter fullscreen on iPhone6P(maybe IOS8) ,playinline doesn't work. IOS10 is ok.If there is a solution ,please mark me.

[gkatsev]

Only iOS 10 and up support playsinline.

[bcorvino]

Hi I'm still seeing this issue in WKWebView. I'm loading the following page in an iframe in an Ionic3 app. I get empty native controls with no video on iOS10. The video begins playing inline underneath. If I close the native controls, I can then interact with the video. This is in the simulator and on actual devices.

It works on iPad, but not on iPhone. Any info would be greatly appreciated.

playsinline is set on the video tag in the player and AllowInlineMediaPlayback is true in my app (hence the video playing inline underneath the empty native controls.

Player can be seen here: https://p.batterypop.net/apps/omv/?distribution_id=760d645f-0071-0e6e-cbc0-c082db5b2649&ms_uuid=51be9511-c822-c147-4b26-5c4805671ff4&autoplay=true&autoresume=true&debug=1