0

I am testing a script that would essentially let me pull the video source URL through ajax and change the video source to try to hide the source of my video files from users (basically dont want people downloading my content).

I have no issues getting the ajax to work, but the "replaceChild" command doesnt seem to be doing anything for me. I stripped out all the ajax and tried to run a basic function calling this command with "alerts" along the way to show me what is working and what is not, it appears to me that the replaceChild command is not working.

Can anyone spot any issues with my code or offer alternate solutions?

<!DOCTYPE html>
<html>
    <head>
        <title>Test Script</title>
        <meta name="robots" content="noindex,nofollow">
        <script type="text/javascript">
            function testFunction(){
                var video = document.getElementById("video2").getElementsByTagName("source")[0];
                var source = "realvideo.mp4";
                clone = video.cloneNode(true);
                alert(clone.src);
                clone.setAttribute("src",source);
                alert(clone.src);
                video.parentNode.replaceChild(clone,video);
                alert(video.src);
            }
        </script>
    </head>
    <body onLoad="testFunction()">
        <div align="center">
            <video id="video" class="video-js vjs-big-play-centered" controls preload="auto" width="640" height="264" poster="realvideo.jpg">
                <source src="realvideo.mp4" type="video/mp4">
            </video>
        </div>
        <div>
            <video id="video2" class="video-js vjs-big-play-centered" controls preload="auto" width="640" height="264" poster="realvideo.jpg">
                <source src="sorry.mp4" type="video/mp4">
            </video>
        </div>
    </body>
</html>

That code alerts "sorry.mp4", "realvideo.mp4", "sorry.mp4"

davidgarcia14
  • 3
  • 1

1 Answers1

0

This is expected behaviour. When you call:

video.parentNode.replaceChild(clone,video);

video will not suddenly become a different element. It will still have the same src attribute as before. video is detached from the document by the above replaceChild call, and clone is injected in its stead... it's an in/out swap. So you should not expect that video still references the element in the document and becomes the same reference as clone.

To really verify the change you could end your function with this code:

video = document.getElementById("video2").getElementsByTagName("source")[0];
alert(video.src);
trincot
  • 317,000
  • 35
  • 244
  • 286
  • Thank you trincot you were correct, making that small change fixed the alert() issue, but my bigger issue now is that the video on my browser never changes to realvideo.mp4 is there something I need to do to get the browser to display realvideo.mp4? – davidgarcia14 Jul 28 '21 at 19:37
  • That's a different question. Look into the [`load`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/load) method. Look at other questions, like [this one](https://stackoverflow.com/questions/5235145/changing-source-on-html5-video-tag). If you cannot make it to work, please ask a new question. – trincot Jul 28 '21 at 19:45
  • 1
    thank you, load fixed the issue, I appreciate it! – davidgarcia14 Jul 28 '21 at 20:03