Issues with changing HLS video i video.js player

Web Development
1

Dear all,

I am trying to play HLS video into video.js player. At the start, the video is playing well.
The second step is to change the HLS URL video on the keypress on the keyboard, and then the problem starts.

Following steps from the official doc for the player and what I’ve found for the KotlinJS doc, I didn’t resolve issues for starting other URLs.

Video code snippet for video node is:

“<video\n” +
" id="my-video"\n" +
" class="video-js"\n" +
" controls\n" +
" preload="none"\n" +
" width="100%"\n" +
" data-setup="{}"\n" +
" style="min-width: 100%; min-height: 100%; width: auto; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);">\n" +
" <source id= "srcId" src="MY_URL" type="application/x-mpegURL" />\n" +
" "

Imports for player.js in index.html is:

<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.min.js"></script>

in the body tag is my .js file created on the build project.

Changing video code is:

        val video = document.getElementById("my-video") as HTMLVideoElement
        val source = document.getElementById("srcId")
        video.pause()
        video.load()
        video.src = URL.createObjectURL(MediaSource())
        source?.setAttribute("src", "https://nmxlive.akamaized.net/hls/live/529965/Live_1/index.m3u8")
        source?.setAttribute("type", "application/x-mpegURL")

And finally, screenshots from the browser, the first image is for the starting video, and the second is what I have when the URL is changed.

1
11302×121 19 KB

2
21307×120 19 KB

Thanks for help