Click here to Skip to main content
15,741,581 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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(() => {


}, [])

async function getOutput() {

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

.then((response) => {

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


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



console.log("Output image", outputImg)


HTML section

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

Data type log:


What I have tried:

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

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900