Hallo Ihr beiden! Herzlichen Dank. Ich hab'S ans Laufen bekommen. Und wer so wenig fit ist mit CSS wie ich, dem spendiere ich hier meinen Code – hier erst mal das Stylesheet:
/* automatische Wahl passender Videogröße, abhängig von der Viewport-Breite
Die CSS-Datei wird vom Browser der Reihe nach abgearbeitet. Dadurch
überschreibt sozusagen die nachfolgende und zutreffende */
/* zur Wiedergabe von Video mit 480px Breite) { */
.jcevideo-480 {display: inline-block;}
.jcevideo-640 {display: none;}
.jcevideo-960 {display: none;}
/* } */
@media only screen and (min-width: 560px) {
.jcevideo-480 {display: none;}
.jcevideo-640 {display: inline-block;}
.jcevideo-960 {display: none;}
}
@media only screen and (min-width: 720px) {
.jcevideo-480 {display: none;}
.jcevideo-640 {display: none;}
.jcevideo-960 {display: inline-block;}
}
Alles anzeigen
Und hier der Code, wie er von mir plus dem JCE-Plugin im Joomla-Backend in den Beitrag eingesetzt wird:
<div class="jcevideo-960"><a class="jcepopup noicon" title="Titel des Link - 960" href="/images/vids/intro/ll-intro-960-540.mp4" type="text/html" data-mediabox="1" data-mediabox-width="976" data-mediabox-height="548" data-mediabox-title="Titel des PopUp 540p" data-mediabox-caption="Bildunterschrift des PopUp"><img style="margin-right: 16px; float: left;" src="images/pics/clemens/clemens-portrait_69x100.jpg" alt="clemens portrait" /> </a></div>
<div class="jcevideo-640"><a class="jcepopup noicon" title="Titel des Link - 640" href="/images/vids/intro/ll-intro-640-360.mp4" type="text/html" data-mediabox="1" data-mediabox-width="658" data-mediabox-height="370" data-mediabox-title="Titel des PopUp 360p" data-mediabox-caption="Bildunterschrift des PopUp"><img style="margin-right: 16px; float: left;" src="images/pics/clemens/clemens-portrait_69x100.jpg" alt="clemens portrait" /> </a></div>
<div class="jcevideo-480"><a class="jcepopup noicon" title="Titel des Link - 480" href="/images/vids/intro/ll-intro-480-270.mp4" type="text/html" data-mediabox="1" data-mediabox-width="496" data-mediabox-height="279" data-mediabox-title="Titel des PopUp 270p" data-mediabox-caption="Bildunterschrift des PopUp"><img style="margin-right: 16px; float: left;" src="images/pics/clemens/clemens-portrait_69x100.jpg" alt="clemens portrait" /> </a></div>
Herzlichen Dank für Eure Anregungen!
Leider bleibt das von mir im ersten Beitrag beschriebene, andere Thema:
Auf Desktop-Browsern kann das Video in der JCE-Mediabox / Lightbox abgespielt werden. In manchen Browsern auf Smartphones öffnet sich nur die Lightbox, aber das Video wird nicht geladen.
Wie schon gesagt, liegt es nicht an der h.264-Codierung des Video bzw. fehlendem Codec auf den Smartphones, denn: Ich hatte den direkten Link zum Video per eMail verschickt und wenn man den auf einem normal konfigurierten Smartphone anklickt, öffnet sich der Webbrowser und spielt das Video ab.
Alle Bekannte, die Probleme hatten, das Video auf der Website abspielen zu lassen, konnten das Video über den direkten Link aber in ihrem Browser korrekt wieder geben.
Ich vermute, dass die Ursache im Code liegt, den die Browser auf dem Smartphone aus irgendwelchen Gründen nicht fressen wollen. Im Quelltext meiner oben verlinkten Website sehe ich aber keine Auffälligkeiten dazu.
Hab's auf meinem Galaxy S5 mit LineageOS neu getestet:
Der Original-Browser zeigt die Videos in der Mediabox grundsätzlich nicht an, öffnet aber die JCE-Lightbox.
Firefox Klar und der "Privacy-Browser" (F-Droid) zeigen grundsätzlich die Lightbox nicht an, zeigen aber das Video vor einem schwarzen Hintergrund, wenn zuvor JS abgeschaltet wurde. Reaktion also ähnlich, als ob man die URL des Video direkt eingibt.
Auf der gleichen Website (Link im ersten Post) befinden sich unten Slider von NoNumber, die natürlich nur mit JS funktionieren. Bei allen drei Mobilbrowsern funktionierten die Slider einwandfrei. Also muss JS korrekt interpretiert werden.
Diese Bebachtungen bleiben gleich, auch wenn ich das Smartphone auf Querformat halte.
Und was, wenn im JS der JCE-Mediabox ein Fehler wäre, der nur bei Mobilgeräten auffällt? Prüfen kann ich das nicht.
Ich hab auch den Video-Link in der JCE-PopUp-Definition mal als text/html und mal als iframe definiert. Kein Unterschied!
Und auch ein erneuter Versuch mit AllVideos schlug fehl. Ich favorisiere nach wie vor JCE, weil JCE auf dem Desktop exakt so funktioniert, wie ich mir das wünsche: Video in Lightbox, Video skaliert aus einer Verkleinerung herauf bis zum vollen 100%-Wert und bei noch breiterem Viewport wird das nächst größere Video geladen. Und das ganz ohne JS und somit wenig aufwändig.
Meine Site wird von über 60% Besuchern mit Mobilgeräten besucht, Tendenz zunehmend. Es wäre schade, wenn die viele Mühe, die in den Videos steckt, nur einem kleinen Teil der Mobil-Besuchern zugänglich bliebe!
Was nun?
Habe gerade bei F-Droid einen Browser gefunden, installiert und ausprobiert, mit dem die Videos auf Anhieb genau so korrekt gezeigt werden, wie auf dem Desktop. Es ist:
IceCatMobile
Und das ist nix anderes als eine Firefox-Variante. Firefox-Klar ist aber ebenfalls eine FF-Variante und funzt nicht! Auch MIdori geht nicht. IceCat ist auf meinem alten Android 7.1 der einzige, der es richtig macht.
Bin gespannt, welche Ergebnisse bei anderen zustande kommen! – Und ich suche weiter nach der Lösung, die zumindest „öfters“ funktioniert, als jetzt.
