nicht angemeldet
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 :)
Gunnar Bittersmann