Medienbiene: Videoabruf funktioniert nicht bei Chrome und mobilen Geräten

Hallo Leute, ich bin neu hier und sitze nun seit Tagen einem kleinen (großen) Problem.

Ich habe eine eigene Webseite proggrammiert in der auch soweit alles funktioniert, auch die mobile Ansicht.

Mein Problem ist folgender: Ich habe eine Videoauswahl auf meiner Webseite die bei Firefix, IE und Edge funktioniert. Sie funktioniert allerdings nicht auf mobilen Geräten und bei Chrome.

Hier der Quelltext der Seite:

<script>
var thumbs;
var boxmp;
var boxog;
var boxm4v;
var boxwebm;
var box;
var beschreibung;

window.onload=function(){
     thumbs = document.getElementsByTagName("option");
     box = document.getElementById("video");
     boxmp = document.getElementById("mp");
     boxog = document.getElementById("og");
	 boxm4v = document.getElementById("m4v");
     boxwebm = document.getElementById("webm");
	 beschreibung = document.getElementById("bild");
     for (var i = 0; i < thumbs.length; i++){
        thumbs[i].setAttribute("data-i", i);
        thumbs[i].onclick = function(){
            zeigeVideo(
                // Das element übergeben
                thumbs[this.getAttribute("data-i")],
                //den wert übergeben, der im feld name des Elements steht
                thumbs[this.getAttribute("data-i")].getAttribute("name")
            );
        }
    }
}
function playPause(){ 
    if (box.paused){
        box.play(); 
    } 
    else{
        box.pause(); 
    }
}
function zeigeVideo(element, name){
    boxmp.src = "Video/"+name+".mp4";
    boxog.src = "Video/OGG/"+name+".ogv";
	boxm4v.src = "Video/m4v/"+name+".m4v";
	boxwebm.src = "Video/webm/"+name+".webm";
	beschreibung.src = "Video/beschreibung/"+name+".jpg";
    box.load();
    for (var i = 0; i < thumbs.length; i++){
       thtext = thumbs[i].innerHTML;
       thtext = thtext.replace("pausiere","wechsel");
       thumbs[i].innerHTML = thtext;
    }
  text = element.innerHTML;
    text = text.replace("wechsel","pausiere")
    element.innerHTML = text;
    playPause();
	
}

</script>
</head>

<body>
<!-- Texte der Projekte -->
<div class="box">
  
 		<p style="padding-top: 25px; margin: 0 auto;"><img src="Bilder/Filme.jpg" alt="" /></p><br/>
        
      
       
     <form action="index.php?seite=filme" >
       		<select>
            	<option selected="selected"> -- Bitte Ausw&auml;hlen -- </option>
                <option name='Skijoering'>Skij&ouml;ring 2017</option>
                <option name='Stoppelcross 2016'>1. Stoppelcross Saalfelder H&ouml;he</option>
                <option name='krimimobil'>Imagefilm krimimobil-Kom&ouml;die zum Essen!</option>
                <option name='Saaltec'>Imagefilm Saaltec Systems GmbH</option>
                <optgroup label="Trailer Th&uuml;ringer Reiseservice Ltd.">
                	<option name="Reise-A" >Reise A: Erfurt - Weimar - Jena</option>
                    <option name="Reise-B" >Reise B: Saalfeld und Umgebung</option>
                    <option name="Reise-C" >Reise C: Lausitzland</option>
                    <option name="Reise-E" >Reise E: Eisenach und Umgebung</option>
                    <option name="Reise-F" >Reise F: Erzgebirge</option>
                    <option name="Reise-G" >Reise G: Altenberg und Umgebung, inkl. Dresden</option>
                    <option name="Reise-H" >Reise H: Harz</option>
                    <option name="Reise-L" >Reise L: "Rotkäppchenland"</option>
                    <option name="Reise-M" >Reise M: Dresden und Umgebung</option>
                    <option name="Reise-N" >Reise N: Thüringer Wald</option>
               </optgroup>
          </select>
        <!-- <input type="submit"  value="Ausw&auml;hlen" />-->
   		</form>      
        
        <p style="padding-top:25px;"> 
        	<video id="video" width="75%" style="box-shadow:5px 5px 10px #000;" controls autoplay="autoplay">
            	<source id="mp" src="" type="video/mp4" />
              	<source id="og" src="" type="video/ogv" />
                <source id="m4v" src="" type="video/m4v" />
                <source id="webm" src="" type="video/webm" />
                	
            </video>
       </p>
       
       <p style="padding-top:50 px;">
       <img id="bild" alt="" />
       </p>

	
</div>




</body>
</html>

Ich hoffe es kann mir jemand helfen. Denn ich sehe meinen Fehler net mehr vor lauter Programmierung. (Das SCRIPT habe ich im Internet gefunden... ) bin auch leider kein Genie in der Sache...

Wäre echt super wenn ihr mir helfen könntet.

Danke

Biene :)

  1. @@Medienbiene

    Hier der Quelltext der Seite:

    Und wo die Seite online?

    Ich hoffe es kann mir jemand helfen. Denn ich sehe meinen Fehler net mehr vor lauter Programmierung.

    Sieht ihn die Konsole im Entwicklungswerkzeug deines Browsers?

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. JA sieht er... das ist ja das komische. hab ja auch wie du siehst alle möglichen Formatevarianten damit es bei jedem Browser abspielbar ist.

      http://www.medientechnik-probst.de/index.php?seite=filme

      es wird source nicht übergeben bei Chrome... bei den Firefox zum beispiel schon... ich glaube ich sehe den wald vor lauter bäumen nicht mehr

      1. @@Medienbiene

        Die Seite begrüßt mich im Firefox mit

        „Kein Video mit ünterstütztem Format und MIME-Typ gefunden.“

        wegen

        Meldungen in Konsole über ungültige Medientypen

        Weder video/ogv noch video/m4v stehen auf der Liste der Medientypen. Das wird wohl der Grund sein, warum manche Browser kein für sie passendes Format finden.

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. HAst du danach auch ein Video ausgewählt?, denn wie man im Code liest ist ja am Anfang kein Video "gesetzt"

          1. Du suchst aber vielleicht trotzdem video/ogg und video/mpv.

            1. er sucht es nicht, er setzt die werte nicht. ich denke es liegt hier nicht an den Formaten, sondern Chrome hat ein Problem mit der Funktion die aufgerufen wird - das ist das Problem, wo ich gerade keine Lösung finde und Hilfe suche

              1. Der Screenshot ist aus dem Firefox und die falschen Medientypen stehen sogar in deinem JavaScript drin.

          2. @@Medienbiene

            ist ja am Anfang kein Video "gesetzt"

            Dann sollte das video-Element am Anfang nicht dargestellt werden, sondern erst, wenn etwas darin zu sehen ist, d.h. nach Aufruf der Funktion zeigeVideo()

            Im HTML:

            <video id="video" hidden  >
            

            Im JavaScript:

            function zeigeVideo(element, name){
            	box.removeAttribute('hidden');

            BTW, die Benennung der Variablen box = document.getElementById("video"); ist gar keine gute Idee, zumal es ein anderes Element der Klasse box gibt. Ich würde es z.B. videoElement nennen.

            Im Stylesheet ggfs. um den Platz freizuhalten:

            #video[hidden]
            {
            	display: inline;
            	visibility: hidden;
            }
            

            Richtig ist das allerdings auch noch nicht. Das src-Attribut darf nicht leer sein:

            “The src attribute gives the address of the media resource. The value must be a valid non-empty URL potentially surrounded by spaces.” [HTML §4.7.4]

            Wäre kein src-Attribut besser? Nein, das wäre auch nicht richtig:

            “This attribute must be present.” [ebenda]

            Wenn man also gültiges HTML haben will, darf das video-Element am Anfang gar nicht im DOM sein. Man könnte es in ein template tun und erst beim ersten Aufruf von zeigeVideo() in DOM tun (wie in diesem Beispiel für li-Elemente gemacht).

            LLAP 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            1. @@Gunnar Bittersmann

              BTW, die Benennung der Variablen box = document.getElementById("video"); ist gar keine gute Idee

              Und globale Variablen sind überhaupt keine gute Idee. Mache lokale Variablen draus – durch Voranstellen von var (bzw. ab ES 6 const).

              Oops, die Variablen wurden ja vorher deklariert.

              LLAP 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      2. Hallo Medienbiene

        es wird source nicht übergeben bei Chrome...

        Die Reihenfolge, in der die source (die Videoformate) angeboten werden, ist nicht gleichgültig. Im Moment kann ich das nicht nachsehen, aber mp4 sollte wohl als letztes angeboten werden.

        Ohnehin wäre aktuell mp4 und webm ausreichend.

        Mit besten Grüssen
        Richard

        1. mag sein... aber das ist nicht die Lösung... auch wenn ich Reihenfolge, so wie du es meinst, ändern sollte, ändert es nichts daran... aber danke :)

          1. Hallo Medienbiene

            mag sein... aber das ist nicht die Lösung... auch wenn ich Reihenfolge, so wie du es meinst, ändern sollte, ändert es nichts daran... aber danke :)

            Ich habe mich geirrt: mp4 sollte an erster Stelle stehen.

            Es könnte aber trotzdem daran liegen, dass Videoformate angeboten werden, die das Video-Element schlicht nicht versteht. Ich habe mit Chrome jedenfalls kein Problem mit mp4 und webm.

            Mit besten Grüssen
            Richard

  2. Hallo Medienbiene,

    warum bekommt denn jedes option-Element einen onclick-Handler zugewiesen anstatt das onchange-Event des select abzufangen? Mir scheint der ganze Code etwas (zu) kompliziert.

    Viele Grüße
    Robert

    1. bei onchange muss ich doch trotzdem eine funktion aufrufen. somit würde es sich bei dem option-Element nichts ändern. ich brauch ja den namen davon, da die Filme entsprechend auch so heißen die aufgerufen werden sollen. kann auch ein denkfehler meinerseits sein....

      sicherlich ist der code nicht ganz einfach (wie oben schon gesagt den habe ich im internet gefunden), aber das ist der Code der einigermaßen das macht was ich will....

      lass dich nicht von boxog und so irritieren, das sind die variablen für die formate später.

      1. Hallo Medienbiene,

        bei onchange muss ich doch trotzdem eine funktion aufrufen. somit würde es sich bei dem option-Element nichts ändern.

        Doch, es ist ein Unterschied, ob ich bei einem Element auf ein Event warte oder bei vielen.

        ich brauch ja den namen davon, da die Filme entsprechend auch so heißen die aufgerufen werden sollen.

        Den Namen (du meinst doch eigentlich auch den Wert!) bekommst du, ebenso den Index der ausgewählten Option.

        sicherlich ist der code nicht ganz einfach (wie oben schon gesagt den habe ich im internet gefunden), aber das ist der Code der einigermaßen das macht was ich will....

        Wie ich schon einmal schrieb, halte ich nicht viel von Cargo-Kult-Programming.

        Viele Grüße
        Robert

  3. Mein Problem ist folgender: Ich habe eine Videoauswahl auf meiner Webseite die bei Firefix, IE und Edge funktioniert. Sie funktioniert allerdings nicht auf mobilen Geräten und bei Chrome.

    <script>
         thumbs = document.getElementsByTagName("option");
         for (var i = 0; i < thumbs.length; i++){
            thumbs[i].onclick = function(){
    

    Genau da liegt der Hase im Pfeffer. Das onClick für die Options wird nicht von allen Clients umgesetzt. Ändere die Logik auf onChange für das Select.

    1. Danke ich werde es mal probieren

    2. Danke an alle ... habe es heute früh zum laufen bekommen, vorerst aber leider nur mit mp4.

      1. Hallo Medienbiene,

        habe es heute früh zum laufen bekommen, vorerst aber leider nur mit mp4.

        WebM sollte doch der Chrome können … Hast du denn schon einen Blick in die Entwickler-Tools (F12 in allen Browsern) geworfen, insbesondere die Konsole? Und hast du die MIME-Types gefixt?

        Viele Grüße
        Robert