This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

A cookie will be stored in your browser regardless of choice to prevent you being asked this question again. You will be able to change your cookie settings at any time using the link in the footer.

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Select-Option & Video Source mit 2 Dateien
#1
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.
Zitieren
#2
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
Hier sind alle meine Lösungen aus allen Foren. Ich helfe auch in Facebook-chat
Als Lösung markieren Zitieren
#3
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
<!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>

Hier sind alle meine Lösungen aus allen Foren. Ich helfe auch in Facebook-chat
Als Lösung markieren Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste