nicht angemeldet
Videoabruf funktioniert nicht bei Chrome und mobilen Geräten
0 
Gunnar Bittersmann
0
0 2
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ählen -- </option>
<option name='Skijoering'>Skijöring 2017</option>
<option name='Stoppelcross 2016'>1. Stoppelcross Saalfelder Höhe</option>
<option name='krimimobil'>Imagefilm krimimobil-Komödie zum Essen!</option>
<option name='Saaltec'>Imagefilm Saaltec Systems GmbH</option>
<optgroup label="Trailer Thü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ä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 :)
-
@@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-
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
-
@@Medienbiene
Die Seite begrüßt mich im Firefox mit
wegen
Weder
video/ogvnochvideo/m4vstehen 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-
HAst du danach auch ein Video ausgewählt?, denn wie man im Code liest ist ja am Anfang kein Video "gesetzt"
-
Du suchst aber vielleicht trotzdem
video/oggundvideo/mpv.-
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
-
Der Screenshot ist aus dem Firefox und die falschen Medientypen stehen sogar in deinem JavaScript drin.
-
-
-
@@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 FunktionzeigeVideo()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 Klasseboxgibt. Ich würde es z.B.videoElementnennen.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 eintemplatetun und erst beim ersten Aufruf vonzeigeVideo()in DOM tun (wie in diesem Beispiel fürli-Elemente gemacht).LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
@@Gunnar Bittersmann
BTW, die Benennung der Variablen
box = document.getElementById("video");ist gar keine gute IdeeUndglobale Variablensind überhaupt keine gute Idee. Machelokale Variablendraus – durch Voranstellen vonvarconstOops, 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
-
-
-
-
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-
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 :)
-
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
-
-
-
-
-
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-
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.
-
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
-
-
-
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.
-
Danke ich werde es mal probieren
-
Danke an alle ... habe es heute früh zum laufen bekommen, vorerst aber leider nur mit mp4.
-
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
-
-
