Приложение Cordova вылетает из-за видео с субтитрами на ios 12. * - PullRequest
Новая
       77

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

1 голос
/ 04 июня 2019

Я и команда создаем приложение для 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 аннулирует любую гарантию и это не так просто, мы не хотели этого делать.

1 Ответ

0 голосов
/ 04 июня 2019

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

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

Предоставленное свойство elapsedVideoTime будет представлять собой истекшее время видео в миллисекундах, которое можно получить из элемента video с помощью события timeupdate.

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

...