Subtitles support in player

[smartharris]

Hi. I am looking to integrate subtitles (.srt) in this player. But unfortunately, there is no support available for this.

[seunghoh]

Hi @smartharris, The current Sandstone video player is simply Sandstone-themed video element. If you need any additional features, you can make it your own and attach the feature to the MediaControls. https://enactjs.com/docs/modules/sandstone/MediaPlayer/#MediaControls. We are listening to the requirement to add subtitles supporting. We will add it to the todo list. I can't tell you when we will add but I promise to add it. Thanks.

[seunghoh]

Hi @smartharris would be helpful to create a guide doc for you if you tell me what kind of app are you making for which device using Enact Video Player. As you can see the below link, web standard video element doesn't support srt file but we are working on it with vtt file anyway.

[smartharris]

Hi @seunghoh I am developing an OTT application for Samsung Tizen TVs using EnactJS.

[smartharris]

I am using SRT files for subtitles on other platform (Web/Android/iOS). When i received my content details from an endpoint, the endpoint contains content information (Playable link and Subtitles link). I fetched every content's subtitle link and pass it to the respective platform's player.

[seunghoh]

As Enact component is based on the W3C standard media support, I can't say we will add srt file support. I don't know about Tizen but you'd better check if the Tizen API supports srt subtitle from the Platform. However, Enact Video player has many rooms to customize, you can customize. There is a pattern on Enact Video Player - https://github.com/enactjs/samples/tree/master/sandstone/pattern-video-player and Full docs for Video player is - https://enactjs.com/docs/modules/sandstone/VideoPlayer/

[seunghoh]

We've added VideoPlaerCustom sample. It shows how to support vtt format subtitle. https://github.com/enactjs/samples/tree/develop/sandstone/pattern-video-player-custom Close this issue. Hope this helps.

[arulkumararul2000]

I need to know when it is on live @seunghoh

[seunghoh]

@arulkumararul2000 you can use it now via referring to the sample https://github.com/enactjs/samples/tree/develop/sandstone/pattern-video-player-custom The subtitle feature doesn't need the new Enact release.

[arulkumararul2000]

@seunghoh How to control subtitle font size Give me some guidance please

[vJIYEv]

@arulkumararul2000 You can add styles including font size to the .vtt file as below code.

WEBVTT

STYLE
::cue {
  font-size: 120%
}

00:00:00.000 --> 00:00:02.000
This is a subtitle test.

[arulkumararul2000]

Thank you @vJIYEv But I need control that font size for example in the subtitleselectionpanel we add some button like small, medium and large like that when the user choose the option that subtitle font size need to change.

[smartharris]

i have found a way around to download subtitles from the link, parse the subtitles and show the subtitles to user. Kindly use the following steps to implement subtitles in your application:

1. Install the dependency: npm i @qgustavor/srt-parser
2. Import the following in player file: import SrtParser from '@qgustavor/srt-parser';
3. Pass the subtitles link in the following code: const parser = new SrtParser(); const parsed = parser.fromSrt(link_of_subtitles_file_on_the_server);
4. In your callback "oncurrentplaytime" of your player, paste the following code: let currentSubtitleLine = ""; parsed.forEach((subtitle, index) => { const result1 = new Date(currentTime).toISOString().slice(11, 19); if (result1 >= subtitle.startTime && result1 <= subtitle.endTime) { currentSubtitleLine = subtitle.text; } }); console.log("Current subtitle link as per current time :: ", currentSubtitleLine);

[arulkumararul2000]

Thank you @smartharris for subtitle i use this https://github.com/enactjs/samples/tree/develop/sandstone/pattern-video-player-custom this is working fine for me but i am unable to change my subtitle font size.

[arulkumararul2000]

@arulkumararul2000 You can add styles including font size to the .vtt file as below code.

WEBVTT

STYLE
::cue {
  font-size: 120%
}

00:00:00.000 --> 00:00:02.000
This is a subtitle test.

This is not working @vJIYEv Is there any another option @seunghoh

[vJIYEv]

@arulkumararul2000 Have you tried absolute font size such as font-size: 100px; ? Maybe you can refer to https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API#styling_webvtt_cues page about styling vtt subtitles.

[arulkumararul2000]

@vJIYEv Not Working this also font-size: 100px;

[vJIYEv]

@arulkumararul2000 If you are working with our pattern-video-player-custom sample, please try this.

// src/App/App.module.less
.app {
	video::cue {
		font-size: 20%;
	}
}

::cue pseudo-element is supported on all major browsers, but styling in .vtt file does not work on Firefox. So if you use Firefox browser, you should add css styles to a separate file. And Firefox only supports "permitted properties". This can be helpful: https://developer.mozilla.org/en-US/docs/Web/CSS/::cue

[arulkumararul2000]

Thank you @vJIYEv It is working fine and this is what i made