Uncaught TypeError: Cannot read property 'appendChild' of null javascript

Question

I have been trying to play a video from local folder using a video tag .The path of the video file that set to the element as source is correct and iam able to play it browser using "localhost/filepath.." but still the appendChild saying its null

function PlayWordFile(fileNam)
        {
            debugger

            if (fileNam=="")
            {
                alert('No file attached.');
                return;
            }
            var extn = fileNam.split('.').pop();             
            if (extn == "mp4") {              
                var y=fileNam;
                var video=document.getElementById('VideoPlayer');
                var source=document.createElement('source');
                source.setAttribute('src',"/x/"+y);
                video.appendChild(source);

                alert(source)

                video.play();
            }
        }

Html Code:

<div id="PanelMainPlayer" runat="server">
     <video id="videoPlayer" width="250" height="200" controls autoplay></video>
</div>

can anybody spot what i have been doing wrong here any help is apreciated

Answer 1

Typo. You have videoPlayer in the HTML and VideoPlayer in the JS.