Iphones' safari and chrome doesn't play video (html5) and throws NotsupportedError: The operation is not supported

Question

I've built two scripts. One is to record video and upload it to bubble server, second is to play the video from uploaded video's url.

All works fine in all platforms/browsers except the browsers of Iphones (Safari and Chrome). It uploads successfully but while playing Iphones throws NotsupportedError. Iphone browsers plays perfectly when uploaded via Iphone browsers only. Its just an issue when I try to play the video in Iphone browsers which is uploaded from Mac/Windows PC.

I know it must be some small fix in uploading or playing script.

Script 1 - record and upload video,

let mediaRecorder;
let cameraView;
let recordedChunks = []; // the stream data is stored in this array
instance.data.streamWebcam = await getCamera();
mediaRecorder = new MediaRecorder(stream);
        mediaRecorder.ondataavailable = function (e) {
            if (e.data.size > 0) {
                recordedChunks.push(e.data);
            }
        };
        mediaRecorder.onstop = function () {
      const blob = new Blob(recordedChunks, {
            type: 'video/mp4'
        });
        var reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onloadend = function () {
            var filename = 'video_' + (new Date()).getTime() + '.mp4';
            var base64data = reader.result;
            var uploadData = base64data.substr(base64data.indexOf(',') + 1);
            context.uploadContent(filename, uploadData, function (err, url) { //upload to the bubble database
                URL.revokeObjectURL(blob); 
            });
        }
  };
cameraView = document.createElement('video'); //create the video element
        cameraView.srcObject = instance.data.streamWebcam;
        cameraView.style.width = '100%';
        cameraView.style.height = '100%';
        cameraView.style.overflow = 'hidden';
        cameraView.style.objectFit = 'cover';
        cameraView.style.display = 'block';
        cameraView.muted = true;
        cameraView.autoplay = true;
        cameraView.playsInline = true;
cameraView.onloadedmetadata = function (e) {
            cameraView.play(); //play the video on load
        };
        instance.canvas.append(cameraView); //add element to canvas
mediaRecorder.start(200);

Script 2 - play video from url

let playerVideo = document.createElement('video');
            playerVideo.type = 'video/mp4'
playerVideo.style.overflow = 'hidden';
            playerVideo.style.objectFit = 'cover';
            playerVideo.style.display = 'block';
            playerVideo.src = playerVideoUrl + "#t=0.001";
            playerVideo.controls = field_showControls;
            playerVideo.autoplay = autoplayValue;
            playerVideo.muted = true;
            playerVideo.playsInline = true;
            playerVideo.style.width = '100%';
            playerVideo.style.height = '100%';
            instance.canvas.append(playerVideo);
playerVideo.play();