javascript - iOS 中的 React 视频重新渲染问题

Question

我正在开发 React 应用程序，其中有 20 多个步骤，每个步骤都使用新源重新渲染视频组件。我遇到的问题是，iOS 浏览器(safari 和 chrome)在重新渲染视频几次后会停止播放。

import React, {Component} from "react";
import PropTypes from "prop-types";
import LoadingPoster from "assets/images/loading_video_poster.jpg";

export default class Video extends Component {
  static propTypes = {
    videoUrl: PropTypes.string.isRequired
  };

  constructor(props) {
    super(props);
    this.state = {
      videoUrl: this.props.videoUrl
    };
  }

  onVideoError = (e) => {
    console.log('error', e.target.error.code);
  };

  render = () => {
    return (
        <video
          key={this.props.videoUrl}
          onError={this.onVideoError}
          muted
          loop
          autoPlay
          playsInline
          preload="auto"
          className="workout_page__exercise__video"
          poster={LoadingPoster}
          src={this.state.videoUrl}
        >
          Videos are not supported
        </video>
    );
  }
}

在 onError 上，我看到该错误的代码为 3。

编辑:

我尝试了 MEDIA_ERR_DECODE on HTML5 video in iOS UIWebView after many plays 的教程:

import React, {Component} from "react";
import PropTypes from "prop-types";
import LoadingPoster from "assets/images/loading_video_poster.jpg";

export default class Video extends Component {
  static propTypes = {
    videoUrl: PropTypes.string.isRequired
  };

  constructor(props) {
    super(props);
    this.state = {
      videoUrl: ''
    };
  }

  shouldComponentUpdate(nextProps, nextState){
    return nextProps === this.props
  }

  componentDidMount = () => {

    this.refs.video.src= "";
    this.refs.video.load();
    this.refs.videoWrapper.removeChild(this.refs.video);

    setTimeout(() => {
      let clone = this.refs.video.cloneNode();
      clone.classList.add('clone');
      clone.src = this.props.videoUrl;
      clone.load();
      this.refs.videoWrapper.appendChild(clone);
      console.log('added', this.refs.videoWrapper);
    }, 100)

  };

  onVideoError = (e) => {
    console.log('error', e.target.error.code);
  };

  render = () => {
    return (
      <div ref={'videoWrapper'}>
        <video
          key={this.props.videoUrl}
          onError={(e) => this.onVideoError(e)}
          muted
          loop
          autoPlay
          playsInline
          preload="auto"
          className="workout_page__exercise__video"
          poster={LoadingPoster}
          src={this.state.videoUrl}
          ref={'video'}
        >
          Videos are not supported
        </video>
      </div>
    );

  }
}

还是没有成功

什么可能导致此问题以及如何正确解决此问题？

Answer 1

解决方案是在卸载之前删除视频

import React, {Component} from "react";
import PropTypes from "prop-types";
import LoadingPoster from "assets/images/loading_video_poster.jpg";

export default class Video extends Component {
  static propTypes = {
    videoUrl: PropTypes.string.isRequired
  };

  componentWillUnmount() {
    this.refs.video.src = '';
    this.refs.video.load();
  }

  render = () => {
    return (
      <video
        key={this.props.videoUrl}
        autoPlay
        muted
        loop
        playsInline
        preload="auto"
        className="workout_page__exercise__video"
        poster={LoadingPoster}
        src={this.props.videoUrl}
        ref={'video'}
      >
        Videos are not supported
      </video>
    );
  }
}