Embedded interactive video hangs on loading video player (Moodle 3.3)

Submitted by Erho on Fri, 03/16/2018 - 15:57
Forums: 
Bugs in content types

When I try to embed an interactive video in a label  (embed code generated by h5p) in Moodle 3.3 the only result I see is a black bar with the text: 'Video player loading...' (see attachment). When I drag the browser window to my other screen, it suddenly works.

It's a riddle to me. Does anyone has a suggestion for a solution? Would be great!

Attachments: 
Image icon Loading.png
BV52's picture

BV52

Mon, 03/19/2018 - 06:37

Hi Erho,

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

apienk's picture

apienk

Mon, 08/06/2018 - 16:41

The iframe is loaded into a div with:

display: block;
box-sizing: border-box;
position: relative;
width: 100%;

and the embed is executed with:

<iframe style="width: 100%; height: 704px;" src="myserver/h5p/wp-admin/admin-ajax.php?action=h5p_embed&id=55" frameborder="0" width="800" height="500">

with the resizer script. The video is a FullHD clip from Youtube.

I get the "Loading" bar all the time when page is initialized. The player would open properly
only after the browser window would have been resized.

No console errors.

Backend: Wordpress.

Client: Latest Chrome and Firefox browsers on linux desktop, happens on both 1366x768 and 1920x1080 monitors.

H5P.InteractiveVideo-1.19

 

thomasmars's picture

thomasmars

Mon, 08/06/2018 - 14:09

Do you have a site where we can observe this ?
Make sure the resizer script is attached properly and running, it seems like the problem is fixed on 'resize', so if the resize-script is not properly attached the resize functionality is not running until your window is resized.

apienk's picture

apienk

Mon, 08/06/2018 - 16:37

Page where the error happens:

http://pistacja.kylos.net.pl/pistacja_test2/film/mat00102-zamiana-liczby-mieszanej-na-ulamek-niewlasciwy

The H5P embed will be loaded when you toggle Film/Zadania just below the playlist bar.

This is a test site, subject to change soon.

thomasmars's picture

thomasmars

Tue, 08/07/2018 - 08:38

This is happening because the Interactive Video is initially hidden. You have to trigger the 'resize' event on the browser window when the H5P content is shown so that it knows to resize itself. You can read more about this in our "Display H5Ps with 3rd-party JavaScript" documentation.

apienk's picture

apienk

Tue, 08/07/2018 - 11:57

Makes sense. Thank you for explaining.