CommunityToolkit / CommunityToolkit/Maui

[Proposal] Add Subtitle Support to Media Element

Open
#1,899 7 comments 0 reactions 1 assignee Claimed by @ne0rrmatrix View on GitHub
📽️ MediaElement approved champion proposal
Dominant language
C#
Stars
2.7k
Forks
500
Avg merge
2d 14h
Merged PRs (30d)
7

Description

### Feature name

Media Element Subtitles

### Link to discussion

https://github.com/CommunityToolkit/Maui/discussions/1867

### Progress tracker

- [X] Android Implementation
- [X] iOS Implementation
- [X] MacCatalyst Implementation
- [X] Windows Implementation
- [ ] Tizen Implementation
- [ ] Unit Tests
- [x] Samples
- [ ] Documentation

### Summary ###

Add support for Subtitles to Media Element. Initial support for Windows, Mac, iOS, and Android. Subtitle format allowed at launch include srt and sub.

### Windows
![windows-subtitle-normal](https://github.com/CommunityToolkit/Maui/assets/4167863/7b5989cb-27f2-4bb7-8a2e-b2b219d151ff)

![Windows-subtitle-fullscreen](https://github.com/CommunityToolkit/Maui/assets/4167863/8e4f022a-4948-41cd-8aa8-e64c7a1f7ca7)

### Android

![Android-normal-subtitles](https://github.com/CommunityToolkit/Maui/assets/4167863/c331279c-f230-4bbb-a6b3-78149d0b621a)

![Android-subtitles-fullscreen](https://github.com/CommunityToolkit/Maui/assets/4167863/82e1deda-11aa-4640-b200-9e510f12a692)

### IOS
https://github.com/CommunityToolkit/Maui/assets/4167863/ab3c3f09-ddb4-4ba4-a8db-f84efba15ab9

## Motivation

I would like to help support people who have difficulty with hearing or need assistance in loud noisy environments where it is hard to hear the dialogue. Or people that want translations of foreign languages spoken that they do not know. Other people just like subtitles. This will add robust support that can be expanded later.

## Detailed Design

### API: ###
```
///
/// Backing store for the property.
///
public static readonly BindableProperty SubtitleFontProperty = BindableProperty.Create(nameof(SubtitleFont), typeof(string), typeof(MediaElement), string.Empty);

///
/// Backing store for the property.
///
public static readonly BindableProperty SubtitleFontSizeProperty = BindableProperty.Create(nameof(SubtitleFontSize), typeof(double), typeof(MediaElement), 16.0);

///
/// Backing store for the property.
///
public static readonly BindableProperty SubtitleProperty = BindableProperty.Create(nameof(SubtitleUrl), typeof(string), typeof(MediaElement), string.Empty);
```

## Usage Syntax

### XAML Usage: ###
```csharp


```

### C# Code behind example ###
```csharp
MediaElement.SubtitleFont = "monospace";
MediaElement.SubtitleFontSize = 16;
MediaElement.SubtitleUrl = "https://raw.githubusercontent.com/ne0rrmatrix/SampleVideo/main/SRT/WindowsVideo.srt";
MediaElement.Source = MediaSource.FromResource("WindowsVideo.mp4");
```

### Drawbacks

Currently it uses a custom class to read the subtitle files and convert them to strings that can be used at specific times in a text box appropriate for each OS. This is a new class that only supports plain text at the moment. Non standard files and RTF formatted files are not supported.

### Alternatives

The custom class for reading subtitle files was written to allow iOS and Mac Catalyst support as the current methods are to use m3u8 files and do not support directly linking a subtitle file. ATM we have support for m3u8 files but we have no control over how or what is displayed at all. Android and Windows both have robust libraries that support subtitles. They do not support any common format of subtitles.

ATM if you want uniform support for multiple different formats on each and every device my custom class is the way to go.

### Unresolved Questions

Do we want to use this custom implementation or go with native libraries? I have both ready for testing.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.