Mobile Interactive Video Fullscreen won't work in lesson

Submitted by esor on Mon, 11/26/2018 - 12:32
Forums: 
General discussion

Hi,

I have a course in moodle and the h5p plugin installed. When I create an element as h5p interactive content and view it on my mobile device I see the fullscreen button and can tip on it. But when I create a lesson and want to have a h5p interactive video in there which I can see in fullscreen on my mobile device, I can't copy the embed link from my content on this site here because there is no fullscreen button available.

When I copy the embed link from the h5p interactive element in moodle into my lesson, I can see the fullscreen button but on click he doesn't do anything. Any advice on how to view h5p videos in fullscreen on mobile in moodle?

Content types: 
Interactive Video
BV52's picture

BV52

Tue, 11/27/2018 - 06:43

Hi esor,

In order to give your bug report the best chance of getting answered, please include the following information:

  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

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

-BV52

esor

Wed, 11/28/2018 - 12:42

Thanks bv52 for response.

Here is what I found out:

1. First issue is that there is no fullscreen button on desktop when copying the embed link of my interactive video content from h5p.org. I have to create a h5p element in moodle first and then copy the embed link from the video of this element to get a fullscreen button (See Screenshot1). Second issue is that I can't view it on mobile because the fullscreen button doesn't react.

2. can't really say because I am not the admin but I would say it's a newer version of moodle

3. first issue desktop, second one mobile. 

4. browser desktop is ie 11.0.95, mobile desktop safari

5. can't say because I am not the admin

6. content type is interactive video (example view in screenshot1)

7. One console error: Mismatched anonymous define() module: function(){return g} http://requirejs.org/docs/errors.html#mismatch

8. no php errors

9. see Screenshot1. Mobile Screenshot not available but it's like Screenshot1 but instead of going to fullscreen the fullscreen button just get focused with blue border around him.

Attachments: 
Image icon Screenshot1.png
BV52's picture

BV52

Thu, 11/29/2018 - 06:34

Hi Esor,

Thank you for the information. Would you mind providing a sample site where the issue is showing?

-BV52

esor

Thu, 11/29/2018 - 11:16

Here is a little sample: https://esor.moodlecloud.com

Username: testuser

PW: test

Just click on the test course and the test lesson. You will see a lesson with one content page where an iframe is embedded from a content element from my h5p.org account. You can see that there is no fullscreen button.

I can't directly show you the h5p interactive content element in moodle because I don't have permission to install the h5p plugin on this test site and embedding the link from my other site is impossible too because there is also no permission. I can only give you the screenshot from above how the h5p element looks like when embedding the iframe link from moodles h5p interactive content.

BV52's picture

BV52

Fri, 11/30/2018 - 03:36

Hi esor,

Would it be possible to check in another desktop. The full screen button is showing for me using Firefox, Chrome and Safari. I've also tested using a phone running in Android and the full screen works. The only issue I was able to reproduce was on an Ipad, the full screen button is not showing both in Safari and Chrome.

-BV52

esor

Fri, 11/30/2018 - 09:28

Oh ok good to hear it! Then I have to look at it on another desktop and phone. If there is still a problem I write here. Thanks for now!

BV52's picture

BV52

Mon, 12/03/2018 - 02:25

Hi Esor,

Here are some things you can try to isolate the issue in the browser;

  1. Disable add ons in the browser to isolate the issue. 
  2. Use incognito/private browsing mode.

-BV52

esor

Mon, 12/03/2018 - 10:34

Hi BV52,

the good thing is that in other browsers (on computer) like firefox or chrome I see the fullscreen button and it's full functional. The bad thing is that on mobile device (iphone) the fullscreen button isn't viewable in safari, firefox, chrome. I can see the button from the h5p element in moodle but with no functionality. Maybe you are able to test it with iphone?

Will test it later with android and reply with my results.

BV52's picture

BV52

Mon, 12/10/2018 - 03:29

Hi esor,

I've been trying to replicate the issue using a content I created but to no avail. Having said this there is a possibility that somewhere in your setup the full screen button is getting blocked or stripped. The most likely cause of this type of scenario is a plugin. Disabling other plugins may help you isolate the issue.

-BV52