Interactive video transcript #5631
Conversation
bjester
changed the title
bjester
added
TODO: needs review
indirectlylit
removed
the
TODO: needs gherkin update
|
Added issue #6034 |
|
Great to be able to activate/deactivate the captions by keyboard! 👍 👏 One issue I run into with this is when the user is navigating up and down the transcript while video is playing, video player bar with all the rest of controls disappears, not only visually, but from the TAB order too. This results in user being unable to navigate back and pause/stop or control the playback in any other way. Happens with both positions of the transcript (sidebar and below). (screencast here, too big for GH attachment) Not sure what here is the best solution: are we able to keep the control bar visible, and in the TAB order while the keyboard focus is inside the transcript? Second problem might be more hairy: I see a real issue when the video is long, and the list of captions becomes interminable. Could we think about the option to allow users to go to beginning or the end of the transcript with some keyboard shortcut? 🤔 I was looking at various patterns at WAI-ARIA Authoring Practices, and several (for example Listbox) include using Home and End keys for precisely this, and add that Supporting this key is strongly recommended for lists with more than five options. Now, I'm not suggesting you refactor the transcript completely to reflect this whole pattern, just to see if we could add something similar to be able to navigate more easily to beginning and the end of the long transcripts |
That's a good catch. I'm not a fan of the control bar disappearing, but that was an existing part of the renderer, so without the transcript, the issue exists with it disappearing from the TAB order.
That could work, but I think you found a larger issue in that it disappears with or without the transcript. So perhaps a solution shouldn't be dependent on the transcript? Perhaps in keyboard modality, we keep the control bar visible regardless?
I think adding support for Home and End should be reasonably straightforward. Perhaps longer term we could think about changing the roles of the items in the transcript such that it's traversalable by arrow keys and perhaps Tab jumps between |
I think this a reasonable solution, considering how much keyboard-only users depend on easily locating controls they need, and control bar disappearing by default makes that more difficult! If this approach does not involve too much tweaking, go for it 👍
Yes, I like this suggestion a lot! 😍 Thank you! |
…t language tracks
| @@ -41,6 +41,9 @@ export default function KThemePlugin(Vue) { | |||
| outline: 'none', | |||
| }; | |||
| }, | |||
| $inputModality() { | |||
| return globalThemeState.inputModality; | |||
| }, | |||
There was a problem hiding this comment.
I had tried to add it as a computed prop solely to the media player component, but it wouldn't update. Although, this works even though it's nearly the same.
Summary
This adds a new transcript feature to the video player in Kolibri. It utilizes existing text tracks that generate the subtitles (captions) to create a transcript that appears alongside of the video.
In technical terms, this uses the component architecture of Video.js to add and modify behavior within the video's container managed by Video.js. Mixins are used to connect Vue components with the Video.js components to allow for using Vue within the Video.js container. The mixin connection allows for utilizing some of handling that video.js provides as well as the flexibility of Vue components and our infrastructure built upon that.
Reviewer guidance
Testing areas:
Known issues:
References
https://www.notion.so/learningequality/Interactive-Video-Transcript-9ac195ce394942838a85ed22c0ebeaf0
Contributor Checklist
PR process:
Testing:
Reviewer Checklist
yarnandpip)