React Video re-rendering issue in iOS

问题

I've working on React app where you have 20+ steps, and each steps re-renders video component with new source. The problem I got is that iOS browsers (safari and chrome) after re-rendering video few times it stops playing it.

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>
    );
  }
}

On onError I see that error has code 3.

Edit:

I tried tutorial from 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>
    );

  }
}

Still no success

What may cause this issue nd how to properly reaolve this?

回答1:

The solution was deleting video before unmount

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>
    );
  }
}

来源：https://stackoverflow.com/questions/51499951/react-video-re-rendering-issue-in-ios