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

iOS中的React Video重新渲染问题

1 个答案: