Video JS shows net::ERR_FILE_NOT_FOUND when I change the source but when I played the same video on the home page, it plays

Question

So, I have this video player

    `<div id="video-player">
                <video
                    id="my-video"
                    class="video-js vjs-big-play-centered vjs-16-9 vjs-controls-enabled vjs-workinghover vjs-v8 vjs-theme-city vjs_video_3-dimensions"
                    controls
                    preload="auto"
                    data-setup="{}"
                >
                    <source src="http://ip_address.index.m3u" type="application/x-mpegURL" />  
                    <p class="vjs-no-js">
                        To view this video please enable JavaScript, and consider upgrading to a
                        web browser thats
                        <a href="https://videojs.com/html5-video-support/" target="_blank"
                        >supports HTML5 video</a
                        >
                    </p>
                </video>
    </div>`

and it plays the video on the source no problem when it loads the page. Also, I have this button

    `<button onclick='videoChange(new_ipAddress.index.m3u)'>My Button</button>` which changes the video source. `
    const videoTag = document.getElementsByTagName('video')[0];
    function videoChange(address) {
    videoTag.src = address;
    videoTag.load();
}`

However, when I click the button, it shows this net::ERR_FILE_NOT_FOUND error on the console and does not change the video. Even if I put the same ip address on the button, it does not play the video. I am using VJS for the video player. I tried using setTimeOut too but did not work. How do I change the video source?