I have a working 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.
It can read a local file but not from the API.
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
<video src={outputImg} className="img1 video-js vjs-default-skin" style={{position: "absolute"}}autoPlay controls preload="auto" width="100%" height="100%" data-setup='{"textTrackSettings": false}'/>
