Interactive video - Fullscreen does't work

Submitted by tessadriessen on Fri, 05/17/2019 - 14:50
Forums: 
Bugs in content types

Hi everyone,

I made an interactive video on Moodle. I embedded it in a SCORM package, and put thet SCORM package on Moodle. This works fine, except for fullscreen. Fullscreen works in the interactive video, but once I open the video in the SCORM package, I can't do fullscreen. I can press the button, and some things change visually (see attached screenshot), but it definitely doesn't work as it's supposed to. I hope anyone can help me out!

I embed the video in the SCORM by adding an external HTML object. The embed code is 

<iframe src="https://www.elearningprivacy.nl/mod/hvp/embed.php?id=146" width="2173" height="1283" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="https://www.elearningprivacy.nl/mod/hvp/library/js/h5p-resizer.js" charset="UTF-8"></script>

but I've also used webkitallowfullscreen mozallowfullscreen allowfullscreen style="width:100%; max-height: 100%;" to try to make fullscreen happen. It's good to note that this works perfectly fine for Vimeo content.

It happens in Safari, Chrome and Firefox, on desktop as well as mobile. The version of H5P installed on Moodle is 1.17.2.

Attachments: 
Image icon After clicking fullscreen.png
Image icon Before clicking fullscreen.png
Content types: 
Interactive Video
BV52's picture

BV52

Mon, 05/20/2019 - 05:27

Hi tessadriessen,

Would you mind checking if you have any errors in the browser console? This might give us a clue to what is happening.

-BV52

tessadriessen

Mon, 05/20/2019 - 12:03

Hi BV52, 

There are no errors appearing in the browser console when I press the fullscreen button. However, when the page within the SCORM project is loading, it gives me a few errors. I am not sure if these are related to the video iframe. These errors are:

- Unhandled Promise Rejection: SyntaxError: The string did not match the expected pattern.
- TypeError: undefined is not an object (evaluating 'NSSS.portalInstallFlowCS._handleEventFromPortal')

I hope this is of any help.

icc's picture

icc

Tue, 05/21/2019 - 17:22

Hi,
If you right click and choose Inspect Element, you can check if the SCORM pack is adding its own iframe element around the embed iframe. This can cause the browser to refuse to allow fullscreen. I believe all iframes inside of each other must have the allowfullscreen attributes.

tessadriessen

Mon, 05/27/2019 - 15:24

the SCORM pack does in fact add iframes around it. There are 3 iframes (including the iframe I actively made), of which one does not have 'allowfullscreen'. Unfortunately, the issue isn't fixed by simply adding 'allowfullscreen'...

Do you have any experience using H5P and Lectora/SCORM?

serettig's picture

serettig

Tue, 05/21/2019 - 17:37

Hi,

If you've used my SCORM packager at https://deutsche-h5p-uebersetzungscommunity.tk/scorm-h5p to create the SCORM package, it's quite likely that the missing allowfullscreen attribute in the iframe the h5p-standalone package creates is the problem. I've checked and h5p-standalone doesn't include it. I will see if I can patch the library for this to work, but I won't find time before the weekend. This is something that should be changed in tunapanda's library, however. I'm also not sure if Moodle's SCORM integration creates an Iframe and thus prevents the fullscreen mode.

If you haven't used my tool, you can checkout if it works for your use case, even if I don't think it will for fullscreen mode. ;)

Sebastian