Javascript url parameters with html5 video tag not working on iphone/ipad

I am having problem playing videos on iphone/ipad. I have multiple videos on a single page called "VideoPlayer.html" with the following script.

<script>
        window.onload = function() {
                var videoPlayer = document.getElementById("videoPlayer");
                var videoId = queryObj()["V"];
                
                switch(videoId)
                {
                        case "MainMovie":
                          videoPlayer.src="../Videos/jude.mp4";
                          break;
                        case "Video2":
                          videoPlayer.src="../Videos/Puma_Slidshow.mp4";
                          break;
                }
        }
        
        function queryObj() {
                var result = {}, keyValuePairs = location.search.slice(1).split('&');

                keyValuePairs.forEach(function(keyValuePair) {
                        keyValuePair = keyValuePair.split('=');
                        result[keyValuePair[0]] = keyValuePair[1] || '';
                });

                return result;
        }

</script>

<div id="container">
<video id="videoPlayer" autoplay preload="metadata" controls></video>
</div>

Then i got a page called "Main.html" where i am linking these videos from Videoplayer.html with the following code.

<script>
        window.onload = function() {
                var videos = document.querySelectorAll(".link");
                for (var i = 0; i < videos.length; i++) {
                        videos[i].addEventListener('click', clickHandler, false);
                };
        }

        function clickHandler(el) {
                window.open("VideoPlayer.html?V=" + el.target.id, "_self" );
        }
</script>

<div id="menubar1">
        
                <a id="MainMovie" class="link">Play Movie</a>
        <a id="Video2" class="link">Scene Selection</a>
        <a href="#">Special Features</a>
        
</div>

It all works fine on desktop when I click the "Play Movie" the url opens up with VideoPlayer.html?V=MainMovie and plays the video in a new window. which is exactly what i want but i need this code to work on iphone/ipad as well. I am really new to JavaScript and HTML. All these videos and HTML files will be used offline.

Thanks