Add audio option for introductory media of content types

Description

Acceptance criteria

  • H5P.Audio can be added as an introductory medium in Multiple Choice

  • H5P.Audio can be added as an introductory medium in Fill in the Blanks

  • H5P.Audio can be added as an introductory medium in True/False Question

  • H5P.Audio can be added as an introductory medium in Mark the Words

  • Will include adding H5P.Image and H5P.Video as well

  • H5P.Audio can be added as an introductory medium in Drag the Words

  • Will include adding H5P.Image and H5P.Video as well

  • In H5P.Audio, editor only shows Enable controls option if playerMode is set to full.

  • In H5P.Audio, editor does not show Fit to wrapper option if playerMode is set to transparent.

Background

Currently, some content types offer to add an introductory image or an introductory video on top of an exercise (e.g. Multiple Choice). From time to time, the community asks to add audio to the list of options. Also, while e.g. Multiple Choice, Fill in the Blanks and True/False Question offer these options, for some reason it's not given in Mark the Words or Drag the Words where users may expect it as well.

Sources

Further notes

  • Replaces https://h5ptechnology.atlassian.net/browse/HFP-2916

  • It is, of course, desirable to a) have that audio option in all content types that offer introductory media and b) to update the dependencies in compound content types that use these content types. I am willing to donate more time to update all that if this ticked it handled.

Acceptance Criteria

None

Attachments

1

Activity

Oliver Tacke October 25, 2021 at 9:51 AM

Just one additional note: The same problem today exists in any other content type that puts an audio player to high up in the H5P iframe, e.g. Course Presentation or Column.

Oliver Tacke October 25, 2021 at 9:44 AM

The controls menu (that neither Firefox nor Safari offer currently, seems to be a Chromium specific implementation for now) can be customized using the ControlsListAPI ( / ). It can be used to remove the options individually - and actually there’s precedence in H5P.Video where the download option was removed ( ) - presumably for making it a little harder to download the source files - so it could be done here as well.

That would remove the extra menu completely.

While removing the download option might be justified with reference to the same in H5P.Video, it would be a shame to get rid of the playback rate changer however even though no other browser engine supports it.

I had a look at the code of the Blink engine (at least at the CSS file for the audio element, and doesn’t look to promising either), but I didn’t find anything that could be used to change the direction of the menu, unfortunately, and the menu doesn’t seem to be part of the DOM, so we’d not be able to detect an overflow.

An alternative would be to implement a custom player similar to H5P.Video. On the bright side, that would ensure the same look across all browsers and leave the option to control the visual design completely, but that would mean a little work and probably mess with some existing content.

Oliver Tacke October 25, 2021 at 7:58 AM

Oooh, I see! For the menu! To be honest, I had not even checked that. Let’s see if I can come up with something for that.

Thomas Marstrander October 25, 2021 at 7:50 AM
Edited

No, this is the problem:

I guess we could:

  • give more height to the introduction section

  • or make the introduction section scrollable when it overflows

 

I could not find any way to style the chrome specific audio controls menu, but if we could find that the ideal solution would probably be to make the menu expand downwards instead of up.

Oliver Tacke October 22, 2021 at 2:15 PM

Is it related to ?

Done

Details

Assignee

Reporter

Labels

Original estimate

Time tracking

No time logged

Sprint

Priority

Created September 11, 2021 at 12:40 PM
Updated October 26, 2021 at 1:47 PM
Resolved October 26, 2021 at 1:47 PM