Add support for EchoVideos from Echo360 as source

[echo360-damyon]

At Echo360 (https://echo360.com) we have been asked by our customers to allow videos captured in our EchoVideo platform to be able to be included in H5P content. We have added these features in our test environment and they will be released generally at the end of the year.

For this to work in the same way as other supported video platforms it will require changes to both this repository as well as the H5P Editor php library. Our changes are modelled after the other video platforms.

[otacke]

@echo360-damyon Hi! I just wanted to let you know that I have been asked to review your pull request(s). I am going to use github's regular review features unless you prefer a different way.

[echo360-damyon]

Thanks, that's fine with me.

[echo360-damyon]

Thanks Oliver,

Responses to the points listed as Functional:

1. "video chooser in the upper right-hand corner"

This is because Echo 360 Videos can have multiple video tracks and the user can switch between them while they watch the recording. E.g. talking head and powerpoint slides.

2. Features / options

{boolean} controls:

I have added this to the query string in the iframe url - in future we can update the Echo360 to follow this option.

{boolean} autoplay:

I have added this.

{boolean} loop:

I have added this.

{object} poster:

Echo Video has it's own media editor where the poster image can be set.

{object}[] tracks:

Echo Video has it's own system for handling captioning for media including paid for captioning by third party providers.

{boolean} disableFullscreen:

I have added this to the query string in the iframe url - in future we can update the Echo360 to follow this option.

{boolean} deactivateSound:

I have added this to the query string in the iframe url - in future we can update the Echo360 to follow this option.

{number} startAt:

The handler performs a seek when the video is loaded if this option is present.

Resuming (restarting at the time code that the user left off) works fine in Interactive Video, but not when run in Column.

I'll investigate column mode in more detail today.

Changing the playbackrate

The timing sync of the playback rates is under active development at the moment and this is not specific to h5p.

When using the play button of Interactive Video or the handler's play function directly, ... Audio will only play if the user clicks on the video to play it.

I have addressed this by adding allow="fullscreen, autoplay" to the iframe which grants permissions to play the audio.

[echo360-damyon]

With regards to the Column mode - when testing I noticed that the patch for echo-h5p-editor-php-library looks correct against the current version on master branch - but when used with an older version (e.g. on h5p.org directly) - it requires additional changes to load the video the same way as youtube does it.

If you search for Youtube in the scripts/h5peditor-av.js file - you can see it has special handling if the source provider is youtube. If used against the older library - those checks will need to be repeated for EchoVideo.

[otacke]

@echo360-damyon I was asked by H5P Group to have a 2nd look. I think I found some issued that I decided to fix directly with a short comment per commit instead of leaving extra comments that take longer to write. Please find https://github.com/echo360-damyon/h5p-video/pull/1.

Apart from that, I think that it's your player that needs changing now. Unless you agreed on something else with H5P Group, I think you may want to check:

• Video should use the full player canvas. Additional platform features should be added in an overlay as in YouTube or Vimeo, not next to the video.
• When videos run standalone, e.g. in Column, then they should receive proper controls (unless deactivated in the options), so “play”, “pause”, “seek”, “mute”, “full screen” + ”current time / duration” (optionally playback rate)
• When videos run inside Interactive Book (or any other parent content type which requests to deactivate the full screen button), no full screen button should be visible.
• When videos are run inside Interactive Video, when seeking, the knob jumps back to the original position briefly and then jumps back to the requested position. It feels a little odd (doesn’t happen for YouTube, for instance) and should probably be fixed, but that’s up to the UX team of H5P Group to decide.
• When resizing, there’s some noticeable flickering going on and should probably be fixed, but that’s up to the UX team of H5P Group to decide.
• When running the video standalone where one currently needs to click on the video to play/pause it, this click doesn’t always seem to be registered properly. One sometimes needs to click multiple times to see an effect.

[echo360-damyon]

Hi @otacke, thanks for the review again.

I have merged in your changes to the PR.

Also any testing against our QA server would have been hard recently because our QA system is changed between development and release regression testing as needed. It has just been reset to the latest release and will be acceptable to test against for a short time (not determined - probably a few weeks).

Here are responses to your further comments:

"Video should use the full player canvas..."

• This is not reasonable. Our player has a lot of features you aren't aware of and it's not feasible to re-implement the controls as an overlay.

"When videos run standalone, e.g. in Column, then they should receive proper controls..."

• They are if the option is set to display controls - this may not have appeared not to work because of the version on our QA environment when you tested.

"When videos run inside Interactive Book ... no full screen button should be visible."

• It is not visible - this may not have appeared not to work because of the version on our QA environment when you tested.

"When videos are run ...seeking jumps back and forward"

• This happens in our normal player even outside of H5p and is in the backlog of things which we will address in time.

"When resizing, there’s some noticeable flickering"

There is is minimal flickering while resizing - this can be addressed in future but is not in scope of this H5P change.

"When running the video standalone...this click doesn’t always seem to be registered properly. "

This was addressed and is to do with the iframe permissions.

[otacke]

@echo360-damyon Thanks for getting back to me.

"Video should use the full player canvas..."

• This is not reasonable. Our player has a lot of features you aren't aware of and it's not feasible to re-implement the controls as an overlay.

That's not up for me to decide, and I was not part of your discussions with H5P Group. I merely compared your solution to the four other handlers and those fill the whole Canvas. That's what users of H5P are used to. If that's something that's not reasonable on your end, then you probably either have discussed this with H5P Group already (that's why I mentioned "Unless you agreed on something else with H5P Group [...]"), or their UX team will probably reach out to you anyway if they have an issue with that.

"When videos run standalone, e.g. in Column, then they should receive proper controls..."

• They are if the option is set to display controls - this may not have appeared not to work because of the version on our QA environment when you tested.

Yup, seems to be working nicely now.

• One thing that H5P Group may not be too happy about is using the title attribute on the buttons. While this is a normal HTML feature, it seems to cause trouble with some screen readers. If this is a custom view for H5P, then it might not cause to much trouble to remove it. But it's your side of the implementation. And again, that's not up for me to decide.

• When used with the keyboard, the play button works as it should, but all the other buttons don't trigger their respective function, but also trigger play/pause.

"When videos run inside Interactive Book ... no full screen button should be visible."

• It is not visible - this may not have appeared not to work because of the version on our QA environment when you tested.

Still doesn't seem to work, but this seems in fact to be an issue with H5P.InteractiveBook/H5P.Column/H5P.Video.

"When videos are run ...seeking jumps back and forward"

• This happens in our normal player even outside of H5p and is in the backlog of things which we will address in time.

Will let H5P Group know.

"When resizing, there’s some noticeable flickering"

There is is minimal flickering while resizing - this can be addressed in future but is not in scope of this H5P change.

Will let H5P Group know. This is up to their UX team.

"When running the video standalone...this click doesn’t always seem to be registered properly. "

This was addressed and is to do with the iframe permissions.

Will also let H5P Group know. Also, while checking again, I noticed that double clicking on the video toggles the full screen mode. Again, um to H5P Group.

[devland]

When used in h5p-course-presentation, the video plays but it doesn't take up all the space the editor allows it.