Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed Caption support? #77

Open
localpcguy opened this issue Dec 13, 2018 · 22 comments
Open

Closed Caption support? #77

localpcguy opened this issue Dec 13, 2018 · 22 comments

Comments

@localpcguy
Copy link
Contributor

Does Chewie (or video_player) support Closed Captions?

It is a requirement for us (and generally something that a video plugin should probably support for good accessibility).

I wasn't sure if I should start here or if that would be a feature of video_player itself and I should be asking over on that repo.

@snaeji
Copy link

snaeji commented Dec 17, 2018

I was looking at the video plugin and from my understanding the video plugin doesn't currently support closed captions.

@localpcguy
Copy link
Contributor Author

I've added an issue for the video_player plugin, if anyone wants to add comments there:
flutter/flutter#25388

From a UI perspective in Chewie, it could potentially need a CC button and control menu added to the controls bar.

@cbenhagen
Copy link
Collaborator

@localpcguy did you make any progress with this? I think this might be too high-level for the VideoPlayer plugin as you would also need some controls for it and a way to style or position the captions.

@localpcguy
Copy link
Contributor Author

I agree the UI itself (i.e. the CC button) would be good to implement in Chewie, but the basic functionality needs to be in the VideoPlayer plugin. Otherwise people who don't implement Chewie (i.e. those who need a custom UI) would have to implement CC themselves and it's not likely to happen.

@cbenhagen
Copy link
Collaborator

cbenhagen commented Jan 28, 2019

What would be that basic functionality? Would that include rendering the text on top of the Video? Where do we draw the line?

What about a completely separate CC plugin which can then be used by Chewie or other players? It would not care about drawing, but just read the subtitles files and provide a Listenable with the text to be rendered? A CcController which you then could pass to Chewie?

Adding this external to the core plugins would also allow us to move much faster with this while reducing the workload of the core devs.

Customising the UI of Chewie already is and will be much easier in the near future.

@localpcguy
Copy link
Contributor Author

localpcguy commented Jan 29, 2019

I think it is really important that VideoPlayer at a minimum reads the subtitle files and provides a method to subscribe to the text to be rendered. I do not think that can be a separate plugin, particularly since it is really mostly exposing functionality in the underlying Android/iOS functionality.

I'm not necessarily opposed to seeing the functionality in an external addon to get the functionality available if that's faster, but I firmly believe that functionality mentioned above should be part of the core plugin as soon as possible and then that plugin would be able to be deprecated.

It should not specifically be tied to Chewie either.

In the end, IMO if Flutter does want to be considered for apps that need to be accessible, functionality that provides accessibility needs to be provided by core plugins, not community ones. It needs to be a first class, core feature, not an "afterthought".

@rakyat-game
Copy link

Please first update core plugins video_player first, look at
This

Try to update chewie for displaying purpose only one file:

  • lib/src/material_controls.dart

How to use:
Before: VideoPlayerController.network(videoUrl)
Updated: VideoPlayerController.network(videoUrl, subtitleUrl)

File Attachment
material_controls.zip

@snaeji
Copy link

snaeji commented Jun 24, 2019

I was able to build on @rakyat-game code and read VTT files and default to subtitles in the HLS stream.

The solution is rather dirty, language default is hardcoded and defaults to Icelandic subtitles if they are included in the HLS stream.
But this will maybe help somebody if he wants to use it for reference etc.

https://github.com/snaeji/video_player-0.10.1-3
https://github.com/snaeji/chewie-0.9.7

Update:
video_player doesn't default to icelandic anymore.
video_player fetches all subtitles from HLS and chewie gives an interface for selection of subtitles.

@cbenhagen
Copy link
Collaborator

@snaeji can you open a PR or review the one @kirill09 made? #188

@snaeji
Copy link

snaeji commented Sep 5, 2019

Hey @cbenhagen !

I went over #188 and it looks pretty solid.

My implementation depends on changes to the video_player plugin. Exoplayer takes care of reading external or embedded subtitles and passes a list of available subtitles and what subtitles to display back to Chewie. It works on Android but i haven't looked at the IOS side and would definitely need some help with that or someone to take the lead.

@kirill09 #188 takes in a subtitle file as a string and displays the subtitle over the video. Not sure which format but probably srt. Implementation would not work with embedded subs.

So it really depends upon what direction we want to take. What is your take on this @cbenhagen ?

@kirill09
Copy link

kirill09 commented Sep 5, 2019

hi @snaeji yes I use STR format. I forgot to make an example.
I don't think the solution should depend on the platform. video_player gives you the ability to show video of everything else better to write on dart

@localpcguy
Copy link
Contributor Author

localpcguy commented Sep 5, 2019

We are getting closer to the point were we are going to need this functionality, and we definitely want it to utilize embedded subtitles. We have experience implementing this in both iOS and Android natively in the past, so if we get to the point where we have the time to contribute to this functionality and the Video_Player plugin isn't updated yet, we'll be submitting PRs to them to add in the functionality.

I like the idea that for Chewie, the solution presented accepts the subs from Video_Player, regardless of whether they are embedded or standalone originally. That seems to be the most flexible and keeps Chewie as a UI library as opposed to needing to fetch/load subs itself.

@brianegan
Copy link
Collaborator

@localpcguy Completely agree with that strategy -- Chewie really is meant to just be the UI portion and the core logic would be best implemented in video player and the corresponding UI portion could be handled by Chewie.

Not sure if you're interested, but frankly I only use this project myself on the side and not in a professional project, and I'd love to get more maintainers on this project that are using it for real-life business purposes. Would you be interested in being added as a maintainer to this project so you can merge PRs and ship releases?

@snaeji
Copy link

snaeji commented Sep 11, 2019

I’ll be back from vacation in a week and then i’ll refine the code and submit a pr to chewie and the video_player plugin.

@localpcguy
Copy link
Contributor Author

@brianegan thanks! I would be interested in helping as a maintainer since we do use this in our production app, and currently point to a fork we have (which needs to be updated). It'd be great to be able to contribute. At the same time, I'd be careful to maintain the vision of Chewie as a UI wrapper for Video_Player.

@Joran-Dob
Copy link

I now created my own package for this implementation in the dart, it wraps a video player and accepts a video player in its controller to now the current position.

You can find it here, hope it helps

@tuanbs
Copy link

tuanbs commented Feb 13, 2020

Based on this example, I am able to show subtitle using Chewie and the latest version of Video Player (0.10.7) which supports closed caption (srt format). But it doesn't show subtitle in fullscreen mode.

return AspectRatio(
  aspectRatio: _videoPlayerController.value.aspectRatio,
  child: Stack(
    alignment: Alignment.bottomCenter,
    children: <Widget>[
      Chewie(controller: _chewieController), // Use the VideoPlayer widget to display the video.
      ClosedCaption(
        text: _videoPlayerController.value.caption.text,
      ),
      // _PlayPauseOverlay(controller: _videoPlayerController),
      VideoProgressIndicator(_videoPlayerController, allowScrubbing: true),
    ],
  ),
);

Some other issues I found are:

  • The subtitle text is not aligned center.
  • The subtitle's text size is not responsive. i.e it has a fixed size regardless of the width of video in portrait or landscape mode.

Any ideas or workaround is much appreciated. Thanks.

@mploigt
Copy link

mploigt commented Apr 9, 2020

This would be exactly what I need, but woking subtitles on full screen is essential.

@JohnGalt1717
Copy link

+1 with WebVTT support since that's what most browsers actually support natively.

@markfili
Copy link

markfili commented Nov 9, 2021

Closed Captions (or Subtitles in Chewie language), it seems, are now working on mobile, great work 👍
I tried to replace the subtitles depending on the selected app language and there is a setSubtitle(List<Subtitle> subtitles) method on ChewieController, but the subtitles are not changed when the video starts playing. It seems the Closed Captions are final in the VideoPlayerController so setting them later on does not seem to have any effect. Is there any way to trigger the controller to reload the subtitles?

@jvinai
Copy link

jvinai commented Mar 4, 2024

Any update on how to change subtitles on the fly?
I have a selector that's allowing the user to select languages for the subtitles but using setSubtitle doesnt seem to do the job...

@kvenn
Copy link

kvenn commented Mar 10, 2024

I've switched to https://github.com/itsSagarBro/modern_player which automatically supports subtitles and mkv file format.

It's just missing full screen support, which should be coming soon.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests