iOS 10 and HTML5 Video and HTML5 Audio on HTTPS sites

There seems to be a bug in iOS 10 that kills HTML5 video and audio playback. The media just fails to load and playback. I noticed it quite soon after iOS 10 was released and at first thought that it was something to do with the SSL certificate that I was using. But a number of sites with SSL certificates from other sources have reported the same.

The fact that I have not seen more around the web about this troubles me. So I think that the cause of the actual problem is probably more complicated than this. But I know that bugs have been filed with Apple, and others on the Moodle.org forums have reported it also. (UPDATE 2017/10/18 Looks like its a cookie issue …. https://tracker.moodle.org/browse/MDL-56129 )

Anyway I decided to look at how YouTube manages to get around this. And their solution was quite interesting. They load the media using an AJAX request into a blob and then set the source of the video/audio object as that blob. This indeed would get around any finicky’ness on the part of the browser over SSL certificates etc.

So I createded  three PoodLL audio templates  and one PoodLL video template with the YouTube inspired workaround. These will use the “blob trick” when both the url is https and the OS is iOS. You can download the bundles below.

Note that these could work for VideoEasy but they assume the player libraries are in the PoodLL “3rdparty” folder. If you need VideoEasy versions, the template needs to be altered slightly to get the player libraries from a CDN. If you are unsure how to use bundles, then please see: https://poodll.com/poodll-3-docs/templates-and-bundles/

To download them, right click and choose “save as” or the equivalent.

Media Element Audio (with blob workaround)
mediaelementaudioblob

Audio JS  (with blob workaround)
audiojsblob

Adamplayer (with blob workaround)
adamplayerblob

Media Element Video (with blob workaround)
mediaelementvideoblob