search

Chocobozzz / PeerTube

ActivityPub-federated video streaming platform using P2P directly in your web browser
https://joinpeertube.org/
GNU Affero General Public License v3.0
12.81k stars 1.46k forks source link

Improve captioning UX #4221

Closed vermorel closed 3 years ago

vermorel commented 3 years ago

On PeerTube 3.1.0, the UX for the display of caption is weird. PeerTube displays the caption over 2 lines by inserting the new line at the top. This breaks the usual reading pattern from top to bottom. The line at the bottom comes text-wise before the line at the top, which antagonize all readers of Western languages AFAIK.

Here is a a video with English caption on PeerTube: https://tube.lokad.com/videos/watch/6c61733c-0103-49c1-8b3d-b03e918a3ce7?start=1m56s

The same video, with the same English caption on YouTube: https://www.youtube.com/watch?v=cNWTpejPz74&t=116s

It would be really nice if PeerTube was adopting the UX of YouTube for the caption. Two key points are:

This change would vastly improve the UX of captions on PeerTube.

Ps: I am reposting this entry as an issue. The original forum post was https://framacolibri.org/t/weird-captioning-ux/12450

Chocobozzz commented 3 years ago

Hello,

I think it's an issue of videojs, the player we use. Could you try to reproduce using the videojs player?

You can use their playground and add captions using <track kind="captions" src="//domain.com/path/to/captions_en.vtt" srclang="en" label="English" default> below the <source tags

frankstrater commented 3 years ago

I agree with the 2 key points, but if you look closely in your VTT file, there are overlapping timecodes. So, maybe your captions source file is the problem.

https://tube.lokad.com/lazy-static/video-captions/e84e2f7e-2fc3-4d9e-a524-7dc63ed72aa4-en.vtt

When I download the captions from YouTube with:

youtube-dl --write-sub --sub-lang en --skip-download https://www.youtube.com/watch?v=cNWTpejPz74

I get a totally different captions file (shortened for brevity), so it's not an equal comparison. Your source file (like an SRT) might be generated through a live video transcripting tool with these typical overlapping timecodes. I tested the PeerTube vtt in the videojs playground and it's definitely something in videojs. The second key point ("caption reads top first, bottom second") should be fixed there. The first key point is captions data related. If you don't want overlap, fix the source data... 

WEBVTT
Kind: captions
Language: en

00:00:07.840 --> 00:00:12.480
Previously on this channel we've discussed&nbsp;
the importance of a supply chain specialist&nbsp;&nbsp;

00:00:12.480 --> 00:00:17.120
over someone with more classic data science&nbsp;capabilities. Here at Lokad this is known as&nbsp;&nbsp;

00:00:17.120 --> 00:00:21.840
the Supply Chain Scientist and today we're lucky&nbsp;enough to be joined by one of our own, Maximilian&nbsp;&nbsp;

00:00:21.840 --> 00:00:26.640
Barth, who is going to tell us a little bit more&nbsp;
about his daily role and responsibilities.&nbsp;&nbsp;

00:00:26.640 --> 00:00:30.720
Maximilian, thank you very much for joining us today and&nbsp;
perhaps as always you could just start off by&nbsp;&nbsp;

00:00:30.720 --> 00:00:34.480
telling us a little bit more about your&nbsp;
background and also how you came to join&nbsp;&nbsp;

00:00:34.480 --> 00:00:40.320
Lokad. Sure! As you can probably tell by&nbsp;
my last name, I'm actually not French
vermorel commented 3 years ago

Thanks a lot for your follow-up. For your information, the .srt file is generated by YouTube itself.

frankstrater commented 3 years ago

Thanks a lot for your follow-up. For your information, the .srt file is generated by YouTube itself.

Aha, that makes sense now. The generated SRT file looks to be the 'English (auto-generated)' version. You can see this by clicking the settings wheel in the YouTube player and selecting this version of captions (live transcription). This type of captioning with rolling words is not supported by videojs (and therefore PeerTube). The normal one 'English' (of which I pasted a fragment above) works fine. If it's possible, download the none auto-generated file from YouTube...

vermorel commented 3 years ago

@frankstrater It works! I have downloaded the "edited" SRT from YouTube, and it looks great on PeerTube.

Ps: maybe the PeerTube deep fix would be to display a warning - or maybe an error even - if the SRT file does not have monotonously increasing time-stamps.