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

Submitted by jesse.safran on Fri, 08/13/2021 - 19:55
Forums: 
Bugs in content types

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: 
Interactive Video
BV52's picture

BV52

Fri, 08/13/2021 - 21:45

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: 
Image icon Screenshot.png

jesse.safran

Fri, 08/13/2021 - 21:55

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

BV52

Fri, 08/13/2021 - 22:09

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

Attachments: 
Image icon Publish option H5P.com_.png

jesse.safran

Fri, 08/13/2021 - 22:56

Sorry about that.  Thought I had.  Fixed!

BV52's picture

BV52

Sat, 08/14/2021 - 00:49

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

Attachments: 
Image icon Screenshot3.png
Image icon Browser console.png

jesse.safran

Fri, 08/13/2021 - 21:49

See https://jessesafran.h5p.com/content/1291403273524626728 for an example

thomasmars's picture

thomasmars

Mon, 08/16/2021 - 13:51

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

thomasmars

Mon, 08/16/2021 - 15:41

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.

jesse.safran

Mon, 08/23/2021 - 20:01

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

fnoks

Tue, 08/24/2021 - 13:21

Hi Jesse,

Your proposed solution should do the trick!