How can I show file in DOM which I am fetching from IPFS without completely loading it first?

Question

Is it possible to achieve below stated goal, if yes, then how?

I have uploaded a video file on ipfs and I have its hash now. I used this hash in ipfs.cat function to get that file.

I am successfully getting the file and displaying it in DOM which is playing fine.

componentDidMount() {
        ipfs.cat(this.props.ipfsHash, (error, result) => {
            if (error) {
                console.error(error)
                return
            }

            var myArray = result;

            //convert Uint8array to blob
            var blob = new Blob([myArray], { 'type': 'video/mp4' });

            //convert blob to url
            var url = URL.createObjectURL(blob);

            //dynamically show video
            const video = document.querySelector('video');
            video.src = url;
            video.load();
            video.onloadeddata = function () {
                video.play();
            }
        })
    }

When I get file from IPFS what is happening is that ipfs.car or ipfs.get both functions first load complete file then show it on DOM.

What I want to achieve is that I don't want to wait for whole video (file) to get load first and then display to DOM instead I want to display it on run time as I keep getting data from IPFS.