javascript - 使用 react-native-video 不会显示字幕

Question

漏洞

嘿，我正在使用 react native 构建一个 AndroidTV 应用程序，我正在尝试从一个 url 为我的视频（这是一个 .m3u8 文件）添加字幕，但我什么也没得到，屏幕上什么也没有显示。

*编辑：我还在 react-native 版本 0.61.2 0.61.5 0.64.0 上对其进行了测试，但没有得到任何结果。

环境信息

反应原生信息输出：

 System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz 
    Memory: 2.06 GB / 11.90 GB
  Binaries:
    Node: 14.16.0 - C:\Program Files\nodejs\node.EXE       
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: Version  4.1.0.0 AI-201.8743.12.41.7042882
    Visual Studio: 16.5.30011.22 (Visual Studio Community 2019)
  Languages:
    Java: 1.8.0_282 - /c/Program Files/OpenJDK/openjdk-8u282-b08/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: Not Found
    react-native-tvos:  0.63.4-0
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

库版本：^5.1.1

重现步骤

1. npm install -g @react-native-community/cli
2. react-native init TestApp --template=react-native-tvos
3. npm i react-native-video

预期行为

字幕显示在视频顶部，但没有显示任何内容。

可重现的示例代码

完成所有步骤后，将 App.js 中的内容替换为：

import Video, {TextTrackType} from 'react-native-video';

const App = () => {
  const VideoRef = useRef(null);

  const onBuffer = () => {
    console.log('buffering');
  };

  return (
    <>
      <Video
        source={{
          uri: 'https://www.w3schools.com/html/mov_bbb.mp4',
        }} // Can be a URL or a local file.
        ref={VideoRef} // Store reference
        onBuffer={onBuffer} // Callback when remote video is buffering
        onError={(e) => console.log(e)} // Callback when video cannot be loaded
        style={{width: '100%', height: '100%'}}
        resizeMode="contain"
        selectedTextTrack={{type: 'language', value: 'en'}}
        textTracks={[
          {
            title: 'test',
            language: 'en',
            type: TextTrackType.VTT,
            uri:
              'https://brenopolanski.github.io/html5-video-webvtt-example/MIB2-subtitles-pt-BR.vtt',
          },
        ]}
      />
    </>
  );
};

export default App;

标签： javascriptreact-nativevideo-playersubtitlereact-native-video