Cordova 应用程序因 ios 12 上带有字幕的视频而崩溃。*答案

【问题标题】：Cordova app crashes because of video with subtitles on ios 12.*Cordova 应用程序因 ios 12 上带有字幕的视频而崩溃。*
【发布时间】：2019-10-19 21:03:00
【问题描述】：

我和一个团队正在为 iPad Pro 10.5" 创建一个应用程序，它是一个 Cordova 包装的 React 应用程序。出现一个问题，即应用程序在包含 VTT 字幕视频的页面上崩溃。字幕使应用程序崩溃在 iOS 12.2 上（安装在 iPad 上）。起初我们认为这是视频的编码，但在测试了不同的选项后，我们发现删除字幕轨道解决了问题。

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

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

【问题讨论】：

是的，我可以通过 iOS 12 和 Brightcove 的 Video.js 实现来确认这个问题 - 我发送了字幕渲染失败的 Xcode 转储，Apple 立即做出了回应，这让我认为他们知道并且是保持安静。我刚刚使用 Cordova 9.0.0 重新编译，但问题仍然存在 - 尚未在 iOS 13 测试版上尝试过，但如果他们想要更多信息，它可能无法修复。

标签： cordova video ios12 subtitle webvtt

【解决方案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;

现在我们可以从视频中渲染字幕组件

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

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

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

【讨论】：