Split screen Transcript layout

[swashbuck]

Subject of the enhancement

I would like to explore the possibility of introducing a split screen transcript option. We have done this in projects before, so it's just a matter of working out the best way to implement it in open source.

The new transcript option would:

• Position the video in the left 50% of the screen and the transcript on the right 50% of the screen
• Allow the user to read the transcript while they watch the video
• Scrolling vertically in the transcript would still keep the video visible on screen
• Use a Notify popup or something else entirely for the transcript text

[kirsty-hames]

Good suggestion @swashbuck. How did you handle the layout responsively in your projects? I imagine this would be a desktop only layout.

[swashbuck]

Good suggestion @swashbuck. How did you handle the layout responsively in your projects? I imagine this would be a desktop only layout.

@kirsty-hames In our project, we customized the Transcript to open in a Notify popup. So, on mobile, it simply opened over the page like a typical Notify. For desktop, I positioned the Notify to the right side as shown in the wireframes above.

[kirsty-hames]

Hey @swashbuck, I thought I'd share a media player instance I've seen elsewhere which was similar to the enhancement you raised.

The transcript in this instance is inline and toggles open/close. Having this toggle inline means users can still have full width video if they don't require the transcript.

Out of scope for this issue but a couple of nice features to mention too:

• The transcript is synced with the timing of the video. You can see the current text highlighted and the transcript scrolls as the video plays.
• Skip to transcript start/end links.

[swashbuck]

Thanks, @kirsty-hames . This is exactly what I had in mind (minus the out of scope features, which would be nice).

Having the Transcript button on the toolbar would help with some of the layout issues I've ran into, too. I'm not sure how difficult it would be to do that with MediaElement? Something to look into, though.