score:0

what you can do, to force the element unmounting, is to create two elements which extend your video element, and switch between them when you update the src. with conditional rendering, on each change, one of the video components will be unmounted, and another will be mounted in it's place.

following is the example using a set array of video srcs:

import react, { component } from 'react';

const videos = [
  'https://img-9gag-fun.9cache.com/photo/a9krqe1_460sv.mp4',
  'https://img-9gag-fun.9cache.com/photo/a3qq4pn_460sv.mp4',
  'https://img-9gag-fun.9cache.com/photo/ae2yq9o_460sv.mp4'
];

class app extends component {

  constructor(props) {
    super(props);
    this.onnext = this.onnext.bind(this);
    this.state = {
      current: 0
    }
  }

  onnext = event => {
     this.setstate((prevstate) => ({
       // using modulo to stay within the length of videos array
       current: (prevstate.current + 1) % videos.length 
  }));
};

  render() {
    return (
      <div classname="app">
          // switching between two video components if index is odd/even
        { this.state.current % 2 === 1
          ? <one current={this.state.current} />
          : <two current={this.state.current} /> }
        <hr />
        <button onclick={this.onnext}>next video</button>
      </div>
    );
  }
}

class video extends component {
  render() {
    return (
      <video key={'key-'+this.props.current} id="vid" classname="video-elem" playsinline src={videos[this.props.current]}  />
    );
  }

  componentdidmount() {
    console.log("componentdidmount");
  }
  componentwillunmount() {
    console.log("componentwillunmount");
  }
}

class one extends video {}

class two extends video {}

export default app;

running example on repl.it.

score:1

i'm not sure of what you are trying to accomplish but, you may want to check unmountcomponentatnode . it allows you to actually unmount your custom component and the references to it, not only the html elements. then, you can add your component again.

you can do something like:

reactdom.unmountcomponentatnode(document.getelementbyid(yournodeid));

sorry it's not a very complete answer but it's hard without knowing more of your implementation. anyway, maybe it points you to the right direction.


Related Query

More Query from same tag