Why Embedded Audio Player needs to look like a video?

[themidiman]

My usual community forum presence is in the Canvas Developers group. I'm also planning on asking our CSM about this, but I'm curious to know from the general community why a simple audio playback interface is not available when inserting media that is 100% audio only, yet the playback interface makes it look like a video. Simple HTML5 audio player varies between browsers, so I suppose it could be just trying to make it consistent for all users regardless of browsers. A few months ago lately the media playback interface has been updated such that all media is minimized by default (like it would be for a DocViewer supported file), and then when clicked on it expands/maximizes to a ginormous size that takes up way too much screen real estate needed for a simple audio player.

Prior to June of 2024:

When copied to a new shell it's 'reduced' to this interface:

While it doesn't expand when the play button is clicked, it still seems like it could look more like a simple audio player with no need for a visual area (i.e. for video). Here's the simple version that appears for a HTML5 audio element for Chromium/Edge/Chrome:

In short, the current media playback player seems like could have additional options for course designers to make better use of the screen real estate, such as the case for foreign language courses. We're already seeing some poor performance of pages loading multiple instances of the playback engine and failing to display them all. For example, here's one for embedded videos for an ASL course:

When copied forward to a new course shell it breaks further down the page:

I've got a few tickets raised with Support about this because I'm curious what the community thinks and also worried about what Instructors returning for Fall 2024 will notice different about their content when they set up their courses using their Spring 2024 course shells as the source to copy from.

[chriscas]

Hi @themidiman,

Do you happen to know if the audio/video files you have there have been uploaded into the Files area of Canvas, uploaded through the Media Upload option in the rich content editor, or are inserted via an external took like Canvas Studio/Panopto, etc...

I ask this because my institution uses Kaltura for media storage/playback, so we have a lot of the other options disabled.  Identifying where the media is coming from will at least narrow down whether this is a core-Canvas issue, a 3rd party thing, or something else entirely.

Hopefully you can reply back with this info soon!

-Chris

[themidiman]

Hi @chriscas 

These are .mov files that the instructor uploaded to the Files area of their course. Preliminary responses from Instructure Support about the 403 Forbidden Rate Limited error message aren't producing any easy solutions. There is a way to edit the HTML in the RCE to revert back to the 'minimized' thumbnail version of the video, but once the course copies to a new shell they are back to what Instructure support is calling a UI/UX unification for all media files, and we're back to square one. Whilst grappling with the tech assigned to our case not understanding that the 'upgrade' is causing us a headache, I do have a workaround that would involve embedding from within Canvas Studio or migrating these video files to an outside source like YouTube or 3rd party web server. For now the video player that comes for free within the Canvas RCE is the culprit that we hope we can get someone in Instructure Engineering to admit wasn't fully thought out given this use case.

Support is telling us to solve the issue is to not embed so many videos on the same page. In the case of a quiz, we have been told to set the quiz to display one question at a time.  But in my example above, these videos are for a vocabulary page for an American Sign Language course and there are at least 12 of these vocabulary pages in the course...every time the course is copied we'd have to edit the HTML to revert them back to the new upgraded/improved UI/UX versions of the video player. They were working just fine before the UI/UX update. <VENT>Being told that we're using the product the wrong way after it was working just fine isn't very good support IMO, but we're working through that support tech's comment via our CSM.</VENT>

I'll come back to this question once we get an audience with our CSM.

[chriscas]

Thanks for the extra info, that really helps.

I'm a Canvas admin myself, so I totally understand the frustration around issues like this where things seemed to work fine previously and you one day find everything suddenly in shambles with no warning.  When that happens you have to try to prove to people that there was actually a change, because you can't really go back to the way things were X days ago in Canvas.  I shall join your vent on this one!

As I mentioned, we have Kaltura for media, at my institution, and we went that direction because we noticed early on that uploading media content to Canvas files was resulting in suboptimal experiences for users.  As you noted, the playback experience isn't great, we had audio/video out of sync, playback that would just stop in the middle of longer videos, there are no captions, etc...  This was almost 10 years ago, and I know changes have been made and not all of those issues exist anymore, but I really feel like having a dedicated video platform is better overall than relying on Canvas.  Should Canvas be better at this?  Probably...  But media is very complex, and I know there are only so many development resources to go around (sad but true).

If you have Canvas studio in addition to Canvas LMS, I'd probably encourage you to move as much of the media as possible from Canvas files over to Studio.  I think you'll likely get a better playback experience (though maybe not exactly what you want, I'm not exactly sure), and things will be more accessible for students too, which is super important if you're in the USA with the Title II changes coming in the next couple years.  It may even solve the rate limit issue, though I can say even with Kaltura, we occasionally get "access denied" or other errors when there are a large amount of videos embedded onto a single page (or discussions where students all post their own video responses).\

Please do feel free to continue the discussion and update the community with findings if you get to talk to your CSM about this!

-Chris

[themidiman]

Thanks for being a listening ear @chriscas .

I'm pointing the finger directly at the RCE embedded media player which also apparently will take the file from the Files area and treat it as though it were uploaded into the RCE.

If anyone from Instructure or the general community is reading this and can offer insights to my other question about the fact that a video player shows up when it's only audio file being played back would also be welcomed. Once we have our meeting with our new CSM I will reference this post to them, and return with what we learn/gain from that discussion.

[chriscas · Accepted solution]

Oh, I do have one thought about your last question (more from Kaltura-land than Canvas specifically though).  The reason a video player may have been chosen, if it was intentional, is for accessibility reasons.  With most audio players, there is no space for captions to display, which is a problem for users that require captions.  We had to make this very decision recently when upgrading our Kaltura players.  We could choose a small audio-only player, but lost captions (they now have a popout transcript available, but it's still not perfect).  We chose to have audio playback in a video player just like what's happening for you now to make sure accessibility concerns were met.

The behavior in Canvas may be totally unrealted to this, but I did think it would be worth sharing with you.

-Chris

[themidiman]

Accessibility in mind does make sense for audio file needing captions. So if there was a way to accept an answer for just that part of my question in the community, I would do that. Unfortunately I chose to put more than one question into the same post so I can't. 😐