由于ios 12上的带有字幕的视频，Cordova应用程序崩溃。*

Question

我和一个团队正在为一个iPad Pro 10.5创建一个应用程序，它是一个Cordova包装的React应用程序。出现了一个问题，该应用程序在一个包含带有VTT12.2字幕的视频的页面上崩溃。字幕使应用程序在iOS 12.2 (安装在iPad上)上崩溃。一开始我们认为是视频的编码问题，但在测试了不同的选项后，我们发现删除字幕轨道解决了这个问题。

我们试图在安装了iOS 12.3.1的iPad上重现它，这个也崩溃了。我也在装有iOS 10.3.3的iPad上尝试过，那个没有崩溃。从那时起，我们已经在其他几个版本上尝试过了，不能全部记住，但大多数都在iOS 10-11范围内。它们没有崩溃，这让我相信问题出在使用iOS 12上。

由于iPad是客户的，我们不想将它们升级/降级到不同的版本。此外，它还需要由我们以外的人手动安装在40台不同的iPad上，因为降级会使任何保修失效，而且并不是那么容易，我们不想这么做。

Answer 1

我们不知道为什么应用程序会在iOS 12上崩溃，我们需要一个快速的解决方案，因为截止日期快到了，我们决定编写我们自己的组件来显示字幕。

我们使用subtitle包来解析vtt文件：npm install subtitle --save

Subtitles.jsx组件：

import React, { PureComponent } from "react";
import PropTypes from "prop-types"
import * as Subtitle from 'subtitle';

class Subtitles extends PureComponent {
  constructor(props) {
    super(props);
    this.vtt = [];
  }

  componentDidMount() {
    if (this.props.lang) {
      this.loadVTT(this.props.lang);
    }
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (prevProps.lang !== this.props.lang) {
      this.loadVTT(this.props.lang);
    }
  }


  loadVTT(lang) {
    fetch(`path_to_subtitles_directory/${lang}.vtt`)
      .then(response => response.text())
      .then(response => {
        this.vtt = Subtitle.parse(response);
      })
  }

  render() {
    const { time} = this.props;

    // find subtitle text to be displayed at the video's current time
    const subtitleLine = this.vtt.find(function(element) {
      return time > element.start && time < element.end;
    });

    return (
      <div>
        {subtitleLine && (
          <div dangerouslySetInnerHTML={{__html: subtitleLine.text}} />
        )}
      </div>
    );
  }
}

Subtitles.propTypes = {
  time: PropTypes.number,
  lang: PropTypes.string,
};

export default Subtitles;

现在我们可以从我们的视频中渲染Subtitle组件

<Subtitles
  lang={subtitleLanguage}
  time={elapsedVideoTime}
/>

提供的elapsedVideoTime属性是视频经过的时间(以毫秒为单位)，可以使用timeupdate事件从视频元素中检索到。

这只是另一个问题的变通方法。如果有人知道如何真正解决这个问题，我很乐意听到解决方案。目前，这适用于我们的用例。