Safari desktop - HTML5 video progress bar and volume issue

I'm facing an issue with html5 video tag on Safari.

We are trying to load multiple videos in the same page (Most of them are MP4 but I tried adding WEBM videos too), these videos are loaded dynamically, I mean we receive an array from configuration and for each video this array contains the source path, poster, etc. to create the HTML5 tag to be appended in the HTML document. The problem is with the first video, we can not move forward or backward the progress bar. Also we are not able to set the volume with the bar, it only accepts the max volume and mute.

Another thing is if we repeat that video in the position 4 for example (that video will be displayed twice) but with the second video we are able to go forward or backward with the progress bar and the volume bar is also enabled.

I tested in Chrome and Firefox and I didn't find this issues, it only happens with safari.

This is the html:

<video id="id-video-2-0" controls poster="outdoor_sofa.jpg">
<source src="outdoor_sofa.mp4" type="video/mp4">
<source src="outdoor_sofa.webm" type="video/webm">
</video>

This is the js code:

var video = document.createElement('video');
video.id = elementId;
video.controls = true; 

for (sourceIndex = 0; sourceIndex < sourcesLen; sourceIndex++) {
    source = document.createElement('source');
    source.src = sources[sourceIndex].src;
    source.type = sources[sourceIndex].type;
    //handle the error on the last source in case any video works
    if (sourceIndex === sourcesLen - 1) {
        source.onerror = loadFallbackVideoImage.bind({
            source: source,
            img: img,
            imageSrc: model.get('fallbackVideoImage')
        });
    }
    video.appendChild(source);
}
li.appendChild(video);

This is the video:

https://drive.google.com/file/d/1UmMg30ovlZH9Z8HNWi6f7CrqBGS3ljxC/view?usp=sharing