Login

nimru · 25.08.2022, 17:57

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.

***admin*** · 26.08.2022, 21:22

Warum soll das Select Ding in einer anderen Datei rein und der div mit den Js in eine andere Datei stehen?
Das ergibt für mich gerade keinen Sinn.
Dass man JS in einer anderen Datei packt ist normal , aber das verstehe ich nicht.

Auch Footer und Navigation kann man in einer anderen Datei packen , das ist sogar normal. Die bindet man mit PHP ein oder auch mit Javascript wäre möglich.

Erklär doch mal was du genau vorhast , damit ich dein Vorhaben auch nach vollziehen kann

***admin*** · 26.08.2022, 21:32

Und warum mischst du Vanilla Javascript mit jQuery so. JQuery brauch man heute nicht mehr.
Zb so sollte das auch ohne jQuery laufen.
Ist aber ungetestet

Code:
<!doctype html>

<html lang="de">

  <head>

    <titel> test</titel>

    <style>

    </style>

  </head>

  <body>

    <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">

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

</DIV>

    <script>

const vid= document.querySelector("video")

trackList= vid.videoTracks;

trackList.onchange = function(event) {

  trackList.forEach(function(track) {

    updateTrackSelectedButton(track.id, track.selected);

  });

};

const was=document.getElementById('auswahl');

function auswaehlen(){

 vid.setAttribute('src',was.value);

    was.addEvgentListener('change',function(){

 vid.setAttribute('src',was.value);

});

}

auswaehlen();

    </script>

  </body>

</html>

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken