VideoPlayer black after changing src

Hi all, a preemptive thanks for the help.
I have a page where the visitor can upload a video and see the video in a video player. However, when I upload a video into the upload button and change the video player src to the fileurl of the uploaded video, the video player just goes black. Sometimes, the video’s thumbnail will be a frame of the uploaded video, but it still doesn’t play anything. Further, if I try to save the video into a database, I get a console error saying an item doesn’t exist. Has anyone encountered this before? Or is this just a fault of my code.

Code attached.

var introVideo;

export async function uploadIntroVideo_change(event) {
    if ($w('#uploadIntroVideo).value.length > 0) {
        await $w('#uploadIntroVideo').uploadFiles().then( (uploadedFile) => {
            console.log(uploadedFile[0].fileurl)
            introVideo = uploadedFile[0];
            $w('#candidateVideoWriteTo').setFieldValue('introVideo', introVideo.fileurl);
            $w('#candidateVideoWriteTo').save().then( () => {
                $w('#candidateVideoWriteTo').refresh();
                $w('#introVideoPlayer').src = introVideo.fileurl;
            })
       })
   }
})