Select-Option & Video Source mit 2 Dateien

[nimru]

Hallo

Ich stehe vor folgenden Problem.
Diese Variante funktioniert perfekt wenn alles in einer Datei steht.

<DIV class="media_DIV1">

<select id="auswahl1" class="select_style1">
<option value="" disabled selected hidden>Videos</option>
<option value="media/video1.mp4">Video1</option>
<option value="media/video2.mp4">Video2</option>
<option value="media/video3.mp4">Video3</option>
<option value="media/video3.mp4">Video4</option>
</select>

</DIV>



<DIV class="media_DIV2">

<script type="text/javascript">
$(document).ready(function()
{
$('video').attr('src',$("#auswahl1").val());
$("#auswahl1").change(function()
{
$('video').attr('src',$(this).val());
});
});
</script>

<video controls autoplay width="1000" height="600"><source src="media\previewvideo.mp4" type="video/mp4"></video>

</DIV>

Inhalt der functions.js für den Player die im Head Bereich includiert wird:
-------------
var trackList = document.querySelector("video").videoTracks;

trackList.onchange = function(event) {
  trackList.forEach(function(track) {
    updateTrackSelectedButton(track.id, track.selected);
  });
};

-------------

Aber wie sieht es aus, wenn der <DIV class="media_DIV1"> Container samt Inhalt in Datei1.html steht und der <DIV class="media_DIV2"> Container samt Inhalt in Datei2.html

Wie kann das Problem gelöst werden, dass die Select Auswahl in Datei1.html ein Video im HTML Player der in der Datei2.html steht auch wiedergibt?
Beide Elemente sind ja jetzt getrennt, da sie in je einer anderen Datei zu finden sind.
Ich habe das schon mit sämtlichen HTML include Varianten versucht, aber das funktioniert nicht.
Auf PHP will ich gänzlich verzichten und hoffe es gibt eine nicht allzu komplizierte Javascript Möglichkeit.