React-video-js-player "no compatible source was found for this media"

See more:

Javascript

HTML

HTML5

React

, +

I am working on a product that takes a file from API and read as a blob. But pressing the play button on the video does not work. I have tried using tried using querySelector or a useState variable. All not working. There are no errors as you can see from the Logs.



It can read a local file but not from the API.

<pre lang="Javascript">

const [outputImg, setOutputImg] = useState(null);

useEffect(() => {

getOutput()

}, [])

async function getOutput() {

await axios.get("/output-image", {responseType: "blob"})

.then((response) => {

var imageUrl = (window.URL || window.webkitURL).createObjectURL(response.data);

setOutputImg(imageUrl);

var vid = document.querySelector(".img1")

console.log(response)

})

console.log("Output image", outputImg)

}



HTML section

<VideoPlayer className="img1" src={outputImg} poster={posterImg} controls width="100%" height="100%" />

Data type log: https://i.stack.imgur.com/8fVLh.png

Display: https://i.stack.imgur.com/DYwAo.png

What I have tried:

I have tried multiple different player and I have tried source.