微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

字幕不会使用 react-native-video

如何解决字幕不会使用 react-native-video

错误

嘿,我正在使用 react native 构建一个 AndroidTV 应用程序,我正在尝试从 url 向我的视频(这是一个 .m3u8 文件添加字幕,但我什么也没收到,屏幕上也没有任何显示

*edit:我也在 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;

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。