Приложение Cordova аварийно завершает работу из-за видео с субтитрами на iOS 12.*

Я и моя команда создаем приложение для iPad Pro 10,5", это приложение React с оболочкой Cordova. Возникает проблема, из-за которой приложение падает на странице с видео с субтитрами VTT. Субтитры вызывают сбой приложения на iOS 12.2. (который был установлен на iPad) Сначала мы думали, что это кодировка видео, но после тестирования различных вариантов мы выяснили, что удаление дорожки субтитров решило проблему.

Мы пытались воспроизвести его на iPad с установленной iOS 12.3.1, этот тоже вылетел. Также пробовал на iPad с iOS 10.3.3, и тот не завис. С тех пор мы пробовали его на нескольких других версиях, не могу вспомнить их все, но большинство из них были в диапазоне iOS 10-11. Они не разбились, что заставило меня поверить, что проблема заключается в использовании iOS 12.

Поскольку iPad принадлежит клиенту, мы не хотим обновлять его до другой версии. Кроме того, его необходимо установить вручную на 40 разных iPad другими людьми, кроме нас, и поскольку понижение версии iPad аннулирует любую гарантию, и это не так просто, мы не хотели этого делать.


cordova video ios12 subtitle webvtt
person René    schedule 04.06.2019    source источник
comment
Да, я могу подтвердить эту проблему с iOS 12 и реализацией Brightcove Video.js — я отправил дамп Xcode о сбое рендеринга субтитров, и Apple немедленно отреагировала, что заставляет меня думать, что они знают и молчат. Я только что перекомпилировал Cordova 9.0.0, и проблема все еще существует — не пробовал бета-версию iOS 13, но, вероятно, она не исправлена, если им нужна дополнительная информация.   -  person Brent Colflesh    schedule 12.08.2019

Ответы (1)


arrow_upward
0
arrow_downward

Мы не могли понять, почему приложение вылетает именно на 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.

Это просто обходной путь для другой проблемы. Если кто-то знает, как действительно решить проблему, я был бы рад услышать решение. На данный момент это работает для нашего варианта использования.

person René    schedule 04.06.2019