Open james-cohen opened 8 months ago
@james-cohen I had similar issues on iOS. Could you try https://github.com/react-native-video/react-native-video/pull/3461 and see if that resolves ur issues?
Hi @brycnguyen, unfortunately not. It's now playing without freezing, but the sound is still missing and the text tracks aren't loading at all. This is the response body from onLoad:
{
"textTracks": [],
"canStepForward": true,
"canPlayFastForward": true,
"canPlaySlowReverse": true,
"audioTracks": [],
"currentTime": 0,
"canPlayReverse": true,
"duration": 17.753999710083008,
"canPlaySlowForward": true,
"target": 1719,
"canStepBackward": true,
"naturalSize": {
"height": 1920,
"width": 1080,
"orientation": "landscape"
}
}
I've confirmed in a separate console log that the transcriptionUri is definitely being supplied
for me passing texttracks just breaks playback entirely
Hey, I am facing a similar issue where the video doesn't work at all with the following props:
selectedTextTrack={{
type: 'language',
value: 'en',
}}
textTracks={[
{
title: 'English',
language: 'en',
type: TextTracksType.VTT,
uri: 'https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt',
},
{
title: 'Deutsch',
language: 'de',
type: TextTracksType.VTT,
uri: 'https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt',
},
]}
With a known .VTT file that works where the values on the are:
...
textTracks={ [{"language": "en", "title": "English", "type": "text/vtt", "uri": file:///Users/paulrinaldi/Library/Developer/CoreSimulator/Devices/<ID>/data/Containers/Data/Application/<ANOTHER_ID>/Documents/captions.vtt" }] }
selectedTextTrack={{"type": "title", "value": "English"}}
...
when I enable captions (i.e. set the selectedTextTrack
)
on iOS
in 6.0.0-beta.5
the video becomes a black screen and the video and audio stop.
on android
in 6.0.0-beta.5
the video keeps going but no captions are shown.
Cloud someone test this PR #3557 ?
I'm also having freezes when using a VTT.
In my case, the video uses a signed S3 URL but VTT is public. It seems that if both are public URLs, the video plays properly but subtitles are currently not appearing on v6.0.0-rc.0.
Same problem here, any solution? On Android everything works ok, but on iOS the VTT subtitles do not appear at all
<Video paused={paused} source={url} style={[styles.video, !ios && fullscreenContext.value && fullscreenStyle]} rate={velocities[currentRate]} resizeMode="contain" fullscreen={fullscreenContext.value} onLoad={handleLoad} ignoreSilentSwitch="ignore" volume={volume} onProgress={handleProgress} onEnd={handleEnd} ref={playerRef} thumbnail={thumbnail || null} onBuffer={onBuffer} onLoadStart={onLoadStart} playInBackground={backgroundAudio} selectedTextTrack={{type: 'index',value: selectLegendas, }} textTracks={[ { index: 0, title: 'English CC', language: 'en', type: TextTrackType.VTT, uri: legendaEn}, { index: 1, title: 'Português PT', language: 'pt', type: TextTrackType.VTT, uri: legendaPt}, { index: 2, title: 'Spanish ES', language: 'es', type: TextTrackType.VTT, uri: legendaEs} ]} />
Any updates? Facing the same problems
Any updates? Facing the same problems
As we identify this is a limitation from avplayer, but maybe we are wrong, there is no chance for a quick fix ...
Any updates? Facing the same problems
As we identify this is a limitation from avplayer, but maybe we are wrong, there is no chance for a quick fix ...
Could you please elaborate? What is the limitation from AvPlayer?
I forgot to put the link ... Here is a thread explaining the complexity to implement the feature: https://stackoverflow.com/questions/43161124/how-to-add-external-webvtt-subtitles-into-http-live-stream-on-ios-client
Huh, I see. My use case might be a bit different. I'm scratching my head as to why for some .vtt
files, captions and video playback works, but others do not. For example, here is my code:
<Video
source={{ uri: "https://res.cloudinary.com/dqw5s3atw/video/upload/mm-depression-1" }}
ref={videoRef}
onBuffer={onBuffer}
onError={onError}
onLoad={e => onLoad(e)}
onLoadStart={e => onLoadStart(e)}
style={styles.video}
controls={true}
fullscreen={true}
paused={paused}
onSeek={handleSeekForward}
poster={thumbnail || fallbackThumbnail}
playInBackground={false}
textTracks={[
{
title: "English CC",
language: "en",
type: TextTrackType.VTT,
uri: "https://rsysdemo-b7be9.web.app/MIB2-subtitles-pt-BR.vtt", // THIS WORKS
// uri: "https://res.cloudinary.com/dqw5s3atw/raw/upload/v1712945521/mm-depression-1.vtt" // THIS DOES NOT
}
]}
selectedTextTrack={{
type: SelectedTrackType.TITLE,
value: "English CC"
}}
/>
Both should be unsigned, public URLs. In my implementation, I don't have `uri` passed twice, just showing for example here.
Your issue seems different, here the issue is that you cannot mix m3u and vtt. But your issue is that some vtt files don't work. Btw we don't process the file we just give it to avplayer...
m3u and vtt.
Are you saying the video url is m3u? Or the vtt file that I am trying to use is m3u?
Nevermind, I see the issue. Thanks!
Just reinforcing that this is still an issue and also lemme share my observations:
react-native-video@6.1.2 Testing with simulators
In case somebody wants an easy solution, I'm now using another package to handle showing subtitles.
Should the title of this issue be altered to be more accurate?
Just reinforcing that this is still an issue and also lemme share my observations:
passing an array of URL subtitles to "textTracks" prop will simply kill Video, most likely because the URLs of my project have HMAC authentication
I'm downloading the subtitles and using the local files, which makes it works a little better
the selectedTextTrack property cannot be of type "DISABLE", it must be "INDEX" and if you want no subtitles, set an invalid index, I use -1 (don't know if this is expected)
selecting different subtitles causes different effects. Eg: let's say the video has 2 subtitles, "En" and "Es". If there's none selected, the video image will get stuck even tho it's playing. If I select "En", the video will play normally with no audio. If I pick "Es" the audio comes back on but the image gets black.
sometimes hot-reloading the project will make it work perfectly!
99% of the time, if I let the video play till the end, It will be fixed(only once it didn't fix the issue).
once in a full moon it works perfectly. I think It happened twice.
react-native-video@6.1.2
Testing with simulators
How has this solution been working for you? I am going to try your suggestions but am also searching for other options to add subtitles support for my app where subtitle support is a requirement for accessibility compliance
This is still an issue. Is there a proposed fix or work around? How are others getting subtitle support for videos?
@stuttskl - I used react-native-subtitles to solve this problem
Any fix for this one? Subtitles work on Android but IOS causes video player to crash. Don't want to use a bit outdated react-native-subtitles
Bug
I am trying to show captions on my videos using the textTracks and selectedTextTrack properties. I am using VTT as per guidance in the documentation as it is the only type supported by iOS and Android.
On Android, I have no issues and it works perfectly. On iOS, there are several serious issues if textTracks and selectedTextTrack are provided - they resolve if removed:
The VTT file is being served from a signed S3 URL. By the fact that it works on Android and occasionally shows on iOS, I am assuming that the URL itself is not the problem.
Platform
Environment info
Library version: 6.0.0-beta.3 Device: iPhone 11, iOS 17.2
Steps To Reproduce
Watch streamed MP4 video with streamed VTT subtitles
Expected behaviour
Reproducible sample code
I have tried with 2 versions of the same VTT data, one with optional style and index properties set and one without. Both result in the same issues:
With style and order properties set:
Without: