iOS中的React Video重新渲染问题 [英] React Video re-rendering issue in iOS

问题描述

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

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

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

On onError I see that error has code 3.

我尝试了 MEDIA_ERR_DECODE的教程多次播放后在iOS UIWebView中的HTML5视频上播放:

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

  }
}

仍然没有成功

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

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

推荐答案

解决方案是删除视频，然后再卸载

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

这篇关于iOS中的React Video重新渲染问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！