h5p interactive video not showing video toolbar unless screen is resized in Chrome

Steps to reproduce:

  1. In Moodle (in mod_h5p or mod_hvp, it impacts both), or on H5P.com, create an interactive video with an uploaded mp4 file.
  2. Give it a title and interactive title
  3. Uncheck Toolbar Below Content (note that this is needed on H5P.com only.  The Display action bar and frame option on mod_hvp seems to have no impact either way)
  4. Save
  5. In Chrome, play the video.  Notice video toolbar/progress bar has disappeared.  Resize the screen.  The toolbar will reappear.
  6. In Firefox, play the video.  Notice the video toolbar/progress bar has not disappeared.  Resize the screen.  The toolbar will still be available.

I'm a bit stumped as to what the expected behavior SHOULD be.  I would expect that the bar should fully go away and stay away when the option is unchecked, but the fact that it stays on Firefox makes it confusing.  

Content types: 
BV52's picture

Hi jesse.safran,

I'm a unsure which part of the content you would to hide. The options that you are disabling for Moodle and H5P.com are both used to remove the "Standard H5P Toolbar" which you can see for any content type that you use:

Screenshot

You cannot hide the Interactive Video toolbar within the settings of the content. You can do this using  PHP hook, to add your own CSS-file to the content type. Please visit the Visual Changes page for Moodle. For H5P.com this is not enabled by default and you need to send an email to the H5P.com support to have it enabled. For your reference this is the documentation for CSS in H5P.com. If the goal of removing the toolbar/progress bar in Interactive Video is for students to not skip the video you won't need the hook, instead you can just place a check on the "Prevent skipping forward in a video" in "Behavioural settings" of Interactive Video.

-BV

 

Attachments: 

Thank you for the quick reply!

Thank you for for explaining the difference between the interactive video toolbar and standard toolbar!  That makes total sense.

What I want to have happen is the interactive video toolbar to stay available on Chrome.  Take a look at https://jessesafran.h5p.com/content/1291403273524626728.  I have the standard toolbar set to hidden, but when the video is played in Chrome, the interactive video toolbar disappears until I resize the screen.  Strangely enough, if I edit that H5P to include the standard toolbar, the interactive video toolbar DOES stay, which is where my confusion on the setting came from.

 

BV52's picture

Hi jesse.safran,

Would you mind changing the publishing option to "Public". It is possible that it is currently set to "Unpublished" or "Protected".

 

Screenshot2

This is so that there is no need to login to see the content.

-BV

Sorry about that.  Thought I had.  Fixed!

BV52's picture

Hi Jesse,

Thank you for updating the content.

I have escalated your concern to the H5P.com development team and they will get back to you on Monday once they are in the office.

Notes:

  1. I can only see the issue 50% of the time. I also can only reproduce this on a newly opened Chrome in Incognito mode.
  2. Issue is cannot be reproduced on a "regular" Chrome.
  3. My Chrome version is  92.0.4515.131 (Official Build) (64-bit)
  4. Attached is the screenshot of the issue and browser console.

-BV

thomasmars's picture

Thanks for reporting this.
I've raised an internal issue for this, and will update you when we have fixed the issue.

thomasmars's picture

You can work around this until we have a fix ready by removing the poster or change the ratio of the poster to have a higher height. The problem is that the video does not resize properly after it has been loaded, so it retains the ratio/size of the poster.

Thomas,

Thanks for this!  What is the recommended ratio/size to use so this does not happen?  Just make the poster image the same size as the video itself?

-Jesse

fnoks's picture

Hi Jesse,

Your proposed solution should do the trick!