mp4-Video mit JCE-Mediabox auf allen Plattformen abspielbar machen

    Gerade hatte ich nach einiger Diskussion hier im Forum (https://forum.joomla.de/thread/11780-videos-datensparsam-in-responsive-design-anzeigen-wie-geht-das/) eine Lösung gefunden und das Resultat auf meiner Produktiv-Site auf dem Desktop mit drei verschiedenen Browsern getestet. Alles funktioniert. Design verbesserungswürdig.


    Auf meinem Smartphone (Galaxy S5) funktioniert es mit dem eingebauten Android-Browser und dem Firefox-Klar nicht. In einem über F-Droid angebotenen Browser namens "Privatsphäre", der übrigens mit deaktiviertem JS daher kommt, spielt das Video einwandfrei, umgeht dabei natürlich die Lightbox-Funktion der JCE-Mediabox und nimmt sich die dort verlinkte URL zum Video.


    Ein Freund hat ein Galaxy S7 mit Samsung und mit Chrome-Browser. Der Samsung-Browser zeigt die Lightbox und spielt das Video ab, der Chrome-Browser zeigt die Lightbox und lädt dann endlos am Video herum.


    Ich habe dann auf einer zweiten Website das Video mit verschiedenen Aufrufen bereit gestellt (JCE-Mediabox mal mit Ajax/html, mal mit iFrame, mal mit Größenangaben, mal ohne) und zusätzlich AllVideos installiert und damit einen Link erstellt.

    Egal, was ich unternommen hab, das Ergebnis war immer das Gleiche.


    Auf beiden Smartphones kann das Video über die direkte URL zum Speicherort auf dem Server im beliebigen Webbrowser abgespielt werden. Es liegt also nicht am Codec des Video (h.264-Varianten)!


    Der Link zur Website (Video etwa horizontal mittig in der Seite) https://lebenslust-jetzt.de


    Was muss ich verändern, damit das Video auf allen Plattformen bei aktiviertem JS in der Lightbox von JCE angezeigt und abgespielt wird?


    Übrigens möchte ich bei JCE-Mediabox bleiben, weil ich damit Vorteile gegenüber z.B. AllVideos habe: Ich kann die je Video drei Dateien in drei Größen plus Vorschaubild in einem Verzeichnis ordnen und ich habe es einfach, die Videos in einer Lightbox erscheinen zu lassen. Ist für die Übersichtlichkeit / Navigation wichtig. Zudem skaliert JCE-Mediabox die Lightbox zusammen mit dem Video – auch wenn während des Abspielens z.B. das Smartphone gedreht wird. Nachteil ist natürlich das Inline-JS, das die JCE-Mediabox in den Seitenquelltext hineinbringt und das sich anscheinend nicht vermeiden lässt.

    Tja und schon krieg ich's leider nicht hin: denn @media Verzweigungen können nicht als Inline-CSS definiert werden.


    Unter unwissentlicher Missachtung dieser Tatsache hatte ich dann den folgenden Code in eine meiner experimentellen Websites eingefügt:

    Warum ich diesen Code überhaupt hier einfüge? Weil ich hoffe, dass meine Absicht so deutlich wird:

    Abhängig vom Ergebnis der @media-Abfrage sollen verschiedene Versionen des Link zur JCE-Mediabox auf der Website eingeblendet oder ausgeblendet werden.


    Jeder Link zur JCE-Mediabox beginnt mit:

    Code
    <a class="jcepopup noicon" title="Titel des Link" 
href="/images.....

    Meine Idee ist: In die CSS-Datei des Template füge ich die @media-Abfragen ein sodass der Erfüllung einer solchen Abfrage eine bestimmte Klasse zugeordnet wird. Z.B. Klassenbezeichnungen, aus denen die Videobreite erkennbar ist:

    .jcevideo-270 .jcevideo-360 usw.


    Diese Klassen füge ich dann in den Anfang des Links zur JCE-Mediabox ein, z.B.:

    Code
    <a class="jcepopup noicon jcevideo-360" 
title="Titel des Link" href="/images

    Wie müsste der Code in der CSS-Datei mitsamt der @media-Abfrage aussehen, damit das so (oder so ähnlich) funktionieren kann?

    Vielleicht darf ich mit dieser Frage speziell JoomlaWunder ansprechen?

    Oh hoppla! Jetzt habe ich zwei Themen vermischt, nämlich die Frage, was dem Abspielen des Videos über die JCE-Mediaboy manchen Smartphones im Weg steht und manchen nicht und die Frage betr.der @media-Abfragen.


    Re:Later Deine Bemerkung verstehe ich, kann aber mangels Fachkenntnis nicht die notwendigen Schlüsse zur Umsetzung daraus ziehen.

    Zitat von Clemens-XS

    nicht die notwendigen Schlüsse zur Umsetzung daraus ziehen.

    Viele Schlüsse kannst du aus meiner Bemerkung nicht ziehen, außer dass du invaliden Code verwendet hast.


    Nebenbei entdecke ich in deinem obigen Code weitere Fehler. Zeile 5 schließt du den A-Tag zu früh siehe schleißende eckige Klammer.


    JoomlaWunder hatte dir in der Konversation ja eigentlich schon den richtigen Ansatz gezeigt. Umgesetzt auf deinen Code: Jeder deiner Links oben bekommt eine eigene CSS-Klasse und die sprichst du dann innerhalb der MediaQuery-Schleifen in einer CSS-Datei an. Die unerwünschten Links versteckst du mit jeweils display:none, den erwünschten zeigst du an mit display: inline-block.


    Nachteil: Alle 3 Links müssen im Beitrag eingesetzt werden.

    Bzgl. der Konversation:

    Über die erstellten Klassen in der custom.css ( oder wo auch immer du das einbauen möchtest) wird sichergestellt, dass nur noch der Link zu dem gewünschten Video angezeigt wird. Die anderen Links werden automatisch ausgeblendet. Du musst für jeden Link genau 1 Klasse anwenden (natürlich die richtige)


    Beispielsweise legst du den Link bzw. dein Bild mit dem Link in ein <div class="video-zeigen"> oder ähnliches....

    (Da muss man aber andersherum denken, da man nicht 1 Link einblenden kann, sondern alle anderen ausblenden muss)


    Das Media-Zeugs hat beim Link nichts mehr zu suchen. Du musst dir halt nur überlegen, auf welche Art und Weise du dein Video aufrufen möchtest und wo es angezeigt wird.

    Wie die verschiedenen Browser mit der Videoanzeige zurechtkommen, ist ein anderes Problem und man muss echt ausprobieren und testen. Irgendwo wirst du wohl immer Abstriche machen müssen.

    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:

    Und hier der Code, wie er von mir plus dem JCE-Plugin im Joomla-Backend in den Beitrag eingesetzt wird:


    Code
    <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.

    Nun hab ich trotz des schönen Wetters noch mal voll Zeit investiert, um eine media-query einzubauen mit dem Ziel, sobald touch-screen-devices erkannt werden, die JCE-Mediabox links nicht mehr gelten und gesonderte Links aufgerufen werden. Diese führen direkt zu der Video-URL und haben per CSS-Datei auch eine transparenten background-color definiert bekommen, sodass das Ergebnis dem einer Lightbox ähnelt, aber eben keine dahinter liegende Webseite durchscheint.


    Die media-Abfrage habe ich mit mehreren Kriterien versucht, nämlich:

    Code
    @media (hover: none), (hover: on-demand)
oder
@media (hover: none), (pointer: coarse)
oder 
@media (hover: none) and (min-width: 560px)

    Resultat: Die meisten Mobilbrowser (auf meinem alten Galaxy S5 mit Andoid 7.1) interpretieren die hover oder pointer Definitionen nicht.

    Selbst wenn ich die JCE-Links für den Desktop auf "display: none" setze, erscheinen diese Links in einigen Mobilbrowsern immer noch! Unglaublich!


    Zur Gegenkontrolle habe ich versuchsweise die CSS so gestaltet, dass die eigentlich für die Mobilversion gedachten Links zum Video nur im Desktop gezeigt werden sollen und die JCE-Links mit "display: none" ausgeblendet sein müssten. Resultat: Der Desktop-Firefox ignoriert die Anweisungen:

    Code
    @media (hover: hover)
oder (pointer: fine)

    Unklar ist mir übrigens aufgrund unterschiedlicher Beschreibungen auf diversen Internet-Quellen, ob man eine @media Verzweigung mit mehreren media-Features durch "and" verbinden kann wie z.B.:

    Code
    @media  (hover: none), (pointer: coarse) and (min-width: 560px)

    Wenn schon, wie hier, die @media-Konditionen von den verschiedenen Browsern nicht korrekt interpretiert werden, obwohl CSS-4 inzwischen Standard sein sollte, dann brauche ich meine weiteren Versuche mit kombinierten Klassen nicht weiter zu probieren wie z.B.:

    Immerhin war es einen Versuch wert.


    Aber vielleicht bringe ich mit meinem Beitrag jetzt ein paar Leser auf Ideen, wie ich es "richtig" mache, falls im oben Beschriebenen doch ein Denkfehler wäre.

    Danke für den Link. Nein, diese Tabelle kannte ich nicht. Die von mir auf dem alten Android verwendeten Browser sind in der Tabelle nicht aufgeführt – vermutlich, weil sie meist nur Forks von anderen bedeutenderen Browser-Entwicklungen sind. Ich schrieb ja auch, dass IceCat, als Fork von Firefox weitgehend richtig anzeigt, ausgenommen aber die gerade beschriebenen Konditionen mit "(hover: none)" usw.

    Mein IceCat (auf Android) ist absolut auf neuestem Stand und der Firefox auf meinem Desktop sowieso, weil er über mein Manjaro-Linux automatisch brandaktuell gehalten wird. Dennoch zeigt auch der Desktop Firefox falsche Interpretationen von (hover: none) usw.

    Auf meinem Android kann ich nicht alles ausprobieren, weil es aus Datenschutzgründen google-frei ist (LineageOS).

    Hallo,


    zum eigentlichen Thema kann ich nichts sagen, da ich mich damit nicht auskenne - auch nicht in Verwendung habe.


    Hab das hier gefunden: https://css-tricks.com/touch-devices-not-judged-size/.

    Gibt dazu auch Links zu W3C, wo es (auch) um: coarse, fine, none, media queries usw. geht. Beispiel: https://drafts.csswg.org/mediaqueries/#mf-interaction

    https://drafts.csswg.org/mediaqueries/#hover


    Liebe Grüße

    Christine

    Liebe Christine! Danke für deine Link-Empfehlungen. Die Quellen hatte ich bereits gefunden und bei meinen Versuchen berücksichtigt. Um so erstaunter bin ich ja, dass selbst der Firefox-Desktop-Browser auf "@media (hover: none)" oder "@media (pointer: course)" dennoch die darunter stehenden CSS-Defintionen ausführt.

    Nun hab ich eine Lösung gefunden, die fast beinahe überall richtig funktioniert: Statt der JCE-Mediabox, die immer wieder mal Probleme macht und deren CSS schlecht durchschaubar und anpassbar ist, habe ich jetzt RokBox von RocketThemes eingesetzt.


    RokBox kann eigentlich alles, was die JCE-Medioabox auch kann.


    Mein Video erscheint mit Desktop-Browsern immer korrekt. Bei Mobil-Browsern hab ich nur Android getestet. Da hab ich ein älteres LineageOS als Betreibsystem auf dem Galaxy S5 und 9 verschiedene Browder getestet, die ich bei F-Droid gefunden habe. Resultat:


    Nur ein einziger Browser macht alles richtig: IceCat Mobil (aktuelle Rev.) IceCat ist ein Firefox-Derivat.


    Sechs von den neun Browsern bringen nach Klick auf das Vorschaubild zum Video erst mal für ca. 3 Sekunden in der sich öffnenden Lightbox eine Fehlermeldung, danach erscheint das Video indirekt über den PlayButton auf weißem Grund. Nach Klick auf den PlayButton spielt das Video korrekt ab und verhält sich insgesamt normal. Auch die Vollbildfunktion innerhalb des Videos funzt einwandfrei. Und auch der Klick in die LIghtbox schließt selbige wieder zuverlässig.

    Um hier Support zu erhalten, müsste ich mir für 19 Euro den Zugang zu deren Forum bezahlen und ob mir dann geholfen werden kann, ist ja auch noch ungewiss.

    Diese sechs Browser sind:

    jQuarks, DuckDuckGo, FOSS-Browser, PrivacyBrowser, mBrowser, Lightning (der mBrowser ist vor 4 Jahren upgedatet worden, Lightning vor 7 Monaten, alle anderen sind aktuell)


    Zwei Browser zeigten erstaunlicher Weise das Vorschaubild zum Video und somit keinen Link an! Beide sind etwas älter, der eine ist das Android-Web-Frame, der andere Midori.

    Auf meiner Homepage ist vertikal in der Mitte jetzt das mittels RokBox eingebundene Video zu sehen:


    Ich bin sehr gespannt auf Rückmeldungen, mit welchen weiteren Browsern die Lightbox und das Video einwandfrei funktionieren, besonders auch auf iOS / Safari und iPhones.

    Erste telefonische Rückmeldungen:

    neues iPhone: Modalbox und Video funktionieren wie gewünscht. -- Ältere iPhones Reaktion unbekannt.

    Samsung Galaxy S7 mit mitgeliefertem Browser: Modal lädt und auch das erste Bild des Videos, dann aber erscheint ein dickes schwarzes Rechteck mir abgerundeten Ecken und das Video wird nicht gestartet. Schließen der Modalbox funktioniert wieder.


    Da also RokBox doch auch auf moderneren Geräten nicht zuverlässig genug läuft, habe ich jetzt einen Text-Link zum Video neben das Vorschaubild gesetzt. Das Video öffnet dann in einem neuen Browserfenster, sodass bei Abbruch mit der Return-Taste des Smartphones oder des Browser-Zurück-Button der Besucher immer noch sicher auf meine Site zurück kehrt.


    Der Textlink mag zwar befremdlich auf manche User wirken, ist aber IMHO immer noch besser als die Frustration, ein Video nicht anschauen zu können.


    Auf der Demo-Website von RokBox hier: https://demo.rockettheme.com/joomla-extensions/rokbox/ funktionieren die Video-Links auf meinem Smartphone gar nicht, egal mit welchem Browser. Peinlich! :)