H5P in Safari

Submitted by jyamamo on Mon, 07/13/2020 - 16:15
jyamamo's picture
Forums: 
General discussion

It occurred to me to check how my content appears in other browsers, and I found it's fine in most major browsers, but in Safari the content doesn't appear at all and I get the following error message:

  • Misdirected Request: The client needs a new connection for this request as the requested host name does not match the Server Name Indication (SNI) in use for this connection.

I get this message with all types of H5P content - videos, quizzes, etc.

Has anyone else experienced this problem or have any ideas about how to resolve it?

Thank you!

John

Summary: 
"Misdirected Request" message for H5P content in Safari browser

afreed

Mon, 07/20/2020 - 23:05

I think this might be related to same-site controls. We're having similar issues with Kaltura and are working on setting up a CNAME certificate for our Kaltura instanace. I don't know if H5P supports the same thing for SAS hosted clients, but it is going to become more common with Chrome and Firefox soon as well.

jyamamo's picture

jyamamo

Wed, 07/22/2020 - 01:51

Is there anything I can do to get rid of the Misdirected Request message and get H5P content running properly in Safari? Others trying to access my H5P content in Safari or on their iPhones are having the same problem.

Or - if these problems are about to spread to other browsers - should I just abandon H5P and try to find a different technology to support interactive content?

BV52's picture

BV52

Wed, 07/22/2020 - 18:57

Hi Everyone,

I'm trying to isolate the issue so that we can report this directly to the core team. I am unable to reproduce the issue if the test the contents here in H5P.org so it could be a combination of different factors. If you can provide the information below it will help us isolate the issue:

  1. Detailed steps to reproduce the bug (exactly how and when did it happen)
  2. Platform and version number. E.g. Drupal, Wordpress, Moodle.
  3. Mobile or Desktop
  4. Browser: Chrome, Firefox, Safari etc
  5. H5P plugin version
  6. H5P content type and version (if a content type was used), and a sample URL or attached H5P.
  7. Any browser console errors
  8. Any PHP errors
  9. Screenshots if it's a visual problem

If it was working before:

  1. Any recent changes to the environment (new plugins/modules, updates, configuration changes etc.)
  2. Any recent changes to the browser you're using (new extensions, updates etc.)

The more information you provide, the quicker the community will be able to fix it and the quicker you'll have a working solution!

-BV

jyamamo's picture

jyamamo

Thu, 07/23/2020 - 00:09

Hi! Thank you for your reply. I spent a long time with my host provider (GoDaddy) trying to work out if the problem was at their end, and one of the things that came up was that, as you say, H5P content on the h5p.org website displays correctly in the Safari browser, which suggests that the problem may lie with the host server rather than with the h5p content in itself. However, they were adamant that there was nothing wrong at their end.

So, let me try to answer your questions...

1. I had created some new H5P material and wanted to check what it looked like on my iPhone. This was when I realized that none of the H5P content was working on the iPhone. The iPhone browser is Safari, so I checked using Safari on my MacBook and got the same error message.

Only the H5P content was affected. Other content displayed correctly.

2. I create the H5P content from the WordPress dashboard of my website. According to that, I am using "WordPress 5.4.2 running Twenty Seventeen theme".

3 & 4. The problem is with the Safari browser, on both iPhone and MacBook. Windows users are not reporting any problems, but anyone using Apple's default Safari browser will, I think, get the same error message.

5. H5P version = Version 1.15.0 | By Joubel |

6. This problem arises with all the H5P content I am using. So far that's Interactive Video, Multiple Choice and Drag Text. I'm not sure where to find the details of the content version.

Here are a couple of URLs of pages on my site which are affected:

The H5P content can be viewed on other browsers, but not on Safari.

7. The error message is as follows:

Misdirected Request

The client needs a new connection for this request as the requested host name does not match the Server Name Indication (SNI) in use for this connection.

 

Apparently this is error 421.

8. I don't think there are any PHP errors.

9. It's not really a visual problem; just the error message as above.

If it was working before:

1. I don't know at what stage things went wrong, but it is possible that the content stopped displaying on Safari when GoDaddy switched my SSL certification programme such that there were several virtual hosts using the same certificate. I found a web developer complaining about what seems to be a related problem here:

2. I don't normally use Safari myself. I haven't changed its basic settings. I'm not sure if the browser itself has changed in any significant way.

Thank you for trying to resolve this! Let me know if there is any more information you need from me.

John

 

 

jyamamo's picture

jyamamo

Sun, 08/02/2020 - 18:54

Hi! I was wondering if there'd been any progress on this one...

jyamamo's picture

jyamamo

Mon, 08/17/2020 - 07:29

I have stopped working on H5P content for the time being. It doesn't seem worth it if the content isn't accessible on Safari, which is the deault browser for iPhones and used by a lot of the people who access my content. Please let me know if a solution is found.

jyamamo's picture

jyamamo

Sun, 06/13/2021 - 15:30

 I really, really want to develop H5P content on my site, and it is so disappointing that it won't work in Safari, so iPhone users will not be able to access it...

otacke's picture

otacke

Mon, 06/14/2021 - 09:19

Hi!

Have you already reached out to Apple? I think many developers are disappointed that Apple's web engine on iOS is causing lots of trouble in general, because it doesn't support web standards other engines support and sometimes implements things differently - and on top, users blame the application developers, not Apple ...

Best,

Oliver 

jyamamo's picture

jyamamo

Mon, 06/14/2021 - 09:31

Thank you for the suggestion! Actually, checking more carefully, it seems that the problem has mutated somewhat. It's an interactive video, and previously it did not show up at all on iPhone or on the Safari browser on a computer. Now it both appears and works on Safari on a computer, which is progress!

On an iPhone it appears, and starts to play, but the interactive buttons and things don't work. The video just stops at the first interactive button and won't continue. I tried using Firefox on my browser and had the same problem, so now it would appear to be a problem with getting the interactive elements to work  on an iPhone with any browser.

The other form of interactive content that I'm using sofar (quizzes) seems to work fine on the iPhone.

otacke's picture

otacke

Mon, 06/14/2021 - 13:04

Hi!

The first one may be caused by the video using webm format. H5P doesn't decode videos, but the browser does. If the browser doesn't provide a coded for a video format, then there's nothing that H5P can do. In fact, Apple refused to support the webm format but eventually added support for it recently.

You can try any browser on iOS: Safari, Chrome, Firefox - it doesn't make a difference. While on other platforms browser vendors are free to use their own engines, e.g. Chrome using the Bling engine, Firefox using Mozilla's engine (I think it's called Quantum), Apple forces them to use Apple's webkit engine on iOS. So, on iOS, Chrome and Firefox are kind of elaborates themes for the webkit engine (or Safari), but not different browsers. In consequence things that are broken or unsupported on webkit will not work in any browser on iOS.

Cheers,
Oliver

jyamamo's picture

jyamamo

Mon, 06/14/2021 - 22:49

Thank you for the reply. The video is in mp4 format, so there must be some other explanation!

otacke's picture

otacke

Mon, 06/14/2021 - 22:54

Then maybe someome else has some suggestions.

jyamamo's picture

jyamamo

Tue, 06/15/2021 - 00:50

I hope so! Thank you for your help.

jyamamo's picture

jyamamo

Tue, 06/15/2021 - 10:24

Success! I updated to the latest H5P version for video content, and all seems to be running smoothly. This is a great relief. Thank you, Otacke, for your suggestions and for taking an interest. Now to create more content...

BV52's picture

BV52

Tue, 06/15/2021 - 18:46

Hi jyamamo,

Just to add, if you are having issues with videos you might want to consider re-encoding the video for web using for example Handbrake, which is free and open-source (https://handbrake.fr).

-BV