Updating video element src with different streams via blob URL - reactjs

Question

My react component 'VideoPlayer' doesn't update its src attribute as its props change.
Each time getUrlStreamForMostRecentMP4OnDb() is called a new blob Url object is created. This object streams the most recent video added to the database. No matter what the latest video on the database is the video element always renders the same initial video.
App.js
import React, { Component } from "react";
import VideoPlayer from "./VideoPlayer";
export default class App extends Component {
constructor(props, context) {
super(props, context);
this.getUrlStreamForMostRecentMP4OnDb = this.getUrlStreamForMostRecentMP4OnDb.bind(
this
);
this.state = {
playerSource: null,
};
}
async getUrlStreamForMostRecentMP4OnDb() {
fetch("http://localhost:4000/ytdl/streamMP4")
.then(re => re.blob())
.then(blob => URL.createObjectURL(blob))
.then(url => {
this.setState({ playerSource: url });
})
.catch(err => {
console.log(err);
});
}
render() {
return (
<div>
<button onClick={this.getUrlStreamForMostRecentMP4OnDb}>
Get url stream for most recent mp4 from db.
</button>
{this.state.playerSource ? (
<VideoPlayer
key={this.state.playerSource}
playerSource={this.state.playerSource}
/>
) : (
<div />
)}
</div>
);
}
}
VideoPlayer.js
import React, { Component } from "react";
export default class VideoPlayer extends Component {
constructor(props, context) {
super(props, context);
}
render() {
return (
<div>
<video
id="video"
width={300}
ref="player"
muted={true}
autoPlay={true}
loop
crossOrigin="anonymous"
src={this.props.playerSource}
>
</video>
</div>
);
}
}

Answer 1

I know this is an old question, but I got it to work by manipulating the dom directly like this:
const onUpload = ({ event, ContentId, ContentIndex }) => {
if (event.target.files.length) {
var UploadedVideo = event.target.files[0];
var MediaUrl = URL.createObjectURL(UploadedVideo);
var VideoElement = document.getElementById(`video_${ContentId}`);
if (VideoElement) {
VideoElement.src = MediaUrl;
VideoElement.load();
}
}
}