Media Overlay-Komponente

[david (David Taylor)]

Fortsetzung von https://meta.discourse.org/t/media-overlay-plugin/60549…

Discourse Media Overlay Theme

Diese Theme-Komponente ermöglicht es Benutzern, Medien in ein schwebendes Fenster „auszublenden", während sie die Seite durchsuchen. Sie können sogar zu einem anderen Thema navigieren, und die Medienwiedergabe läuft weiter.

Es funktioniert mit jedem <iframe> oder <video> (mit besonderer Behandlung für lazyYT). Es fügt jeder kompatiblen Komponente einen Button hinzu, der ein kleines Popup in der rechten unteren Ecke öffnet.

Anschließend können Sie es „minimieren", wodurch die Audiowiedergabe im Hintergrund weiterläuft, oder es vollständig schließen.

Derzeit wird die Größe des Videos durch die ursprüngliche Einbettung festgelegt. Ich möchte eine „Größenanpassung"-Funktion hinzufügen, entweder durch „Klicken und Ziehen" oder einfach über drei Buttons: „klein", „mittel", „groß".

Derzeit verdeckt dies den Editor. Die einfache Lösung ist, das Popup einfach zu schließen, wenn Sie einen Beitrag verfassen möchten .

Installation

Die Theme-URL lautet:

https://github.com/davidtaylorhq/discourse-media-overlay-theme

Führen Sie zur Installation folgende Anweisungen aus:

Installing a theme or theme component

This is a guide for installing and managing themes and theme components in Discourse. Required user level: Administrator Installing and customizing themes can significantly improve the look and feel of your Discourse site. You can easily import and manage themes and their components through the Discourse admin panel. This guide covers: Importing new themes and theme components Adding theme components to a theme Managing automatic updates Additional resourc…

[david (David Taylor)]

@_vincent

Is there any way to make the media overlay button compatible with this YouTube player CSS hack?

Discourse Vincent theme - #89

I have fixed this with the addition of an explicit z-index, and some explicit colours. With the vincent theme it now looks like this when you mouse-over:

You may want to add some further customisation to make it match your forum’s style

[_vincent]

Thanks a lot! Works like a charm.

[_vincent]

Just noticed this little

[subtenko]

This is great! However Im not sure if its just be but while the video is playing if you:

1.change positions or minimmize and remaximize

2.pause and attempt to unpause

3. play or pause in post, and to the opposite in the media overlay

It just freezes to the default play button and video thumbnail

Anyone else have this issue?

[rkaplan]

Can you clarify - is this a them or a theme component?

[david (David Taylor)]

It is a theme component

[rkaplan]

OK works now -thank you

[Anatolia]

It might be better if we can scale the screen and move it to anywhere with mouse.

[ssvenn]

Soll die Overlay-Komponente mit eingefügten Links zu .mp4-Dateien funktionieren? Wie hier: Should audio and video tags be allowed? - #7 by codinghorror ?

Ich habe es auf meinem Forum aktiviert, und die Videobox verschwindet komplett, wenn das Video über einen mp4-Link einzeilig eingebunden wird. Ich habe es auch mit iframes getestet, und das funktioniert wie erwartet, aber iframes sind etwas schwieriger korrekt zu formatieren

[smrtey]

Wir haben dies gerade installiert, damit Nutzer Anhörungen zur Amtsenthebung verfolgen können, ohne ein weiteres Fenster öffnen zu müssen. Es war ein voller Erfolg (ein Kommentar lautete: „Das ist sehr praktisch. Fantastisch. Dies ist bei weitem die beste Forumsoberfläche, die ich je erlebt habe.“), sodass auch Nutzer von Smartphones und Tablets dies wollten. Da auf mobilen Geräten keine mehreren Fenster gleichzeitig geöffnet werden können, ist dies eine großartige Funktion.

Um dies auf Tablets und Smartphones zu aktivieren, entfernen Sie einfach no-touch aus den Zeilen 64 und 82 der Common CSS-Datei. Anschließend passen Sie den Player auf kleineren Bildschirmen mit etwas wie folgendem Code an:

@media (max-width: 1024px) {
    #media-overlay,
    #media-overlay iframe{
        width: 400px;
        max-height: 225px;
    }
}
@media (max-width: 768px) {
    #media-overlay,
    #media-overlay iframe{
        width: 320px;
        max-height: 180px;
    }
    #media-overlay {
        &.dock-right {
            right: 10px;
        }
        &.dock-left {
            left: 10px;
        }
    }
}
@media (max-width: 480px) {
    #media-overlay,
    #media-overlay iframe {
        width: 240px;
        max-height: 135px;
    }
    #media-overlay {
        &.dock-right {
            right: 0px;
        }
        &.dock-left {
            left: 0px;
        }
    }
}

Auf Touch-Geräten entspricht ein langer Druck dem Hover, um das Steuersymbol oder die Mediensteuerung anzuzeigen. Tippen Sie dann irgendwo anders hin, um es wieder auszublenden.

Ich wollte es ursprünglich auf Smartphones deaktivieren lassen, aber es ist auch auf einem Smartphone nützlich, da Sie den Ton anhören können, während der Player minimiert ist.

Ich gehe davon aus, dass dies eine bekannte Einschränkung ist, aber YouTube-Videos geben keinen Ton von sich, wenn sie minimiert sind. Wenn Sie ein YouTube-Video aus einem Beitrag abspielen und dann entscheiden, es in ein schwebendes Fenster zu verschieben, gibt es keine Möglichkeit, das Video im schwebenden Fenster abzuspielen. Sie müssen es zuerst verschieben, bevor Sie es abspielen, und können es dann im schwebenden Fenster abspielen.

[orchardstreet]

Soll das mit eingebetteten YouTube-Videos funktionieren?

[smrtey]

Es scheint, dass es bei YouTube-Videos korrekt funktioniert, wenn Sie diese als iFrame einbetten, anstatt nur den Link zu posten und Discourse LazyYT zu verwenden.

Damit dies funktioniert, müssen Sie YouTube-iFrames auf Ihrer Website aktivieren. Gehen Sie dazu zu Einstellungen → „erlaubte iFrames“ und fügen Sie https://www.youtube.com/ zur Whitelist hinzu.

Wenn Sie dann einen iFrame-Code einfügen (den Sie für jedes Video auf YouTube unter Teilen → Einbetten finden), wird das über iFrame eingebettete YouTube-Video vollständig mit der Media-Overlay-Komponente funktionsfähig sein. Das heißt, Sie müssen folgenden Code posten:

<iframe width="560" height="315" src="https://www.youtube.com/embed/Ft1waA3p2_w" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

anstatt https://www.youtube.com/watch?v=Ft1waA3p2_w.

Der iFrame-Code funktioniert nicht auf discourse.org, da sie https://www.youtube.com nicht in ihren Einstellungen für „erlaubte iFrames“ freigegeben haben. Es ist jedoch einfach, dies in Ihrem eigenen Forum nachzurüsten.

So sieht es auf unserem Forum auf meinem Handy aus, wenn der Media-Player erweitert ist:

und eingeklappt:

[Anatolia]

@Anatolia

Es wäre vielleicht besser, wenn wir den Bildschirm skalieren und mit der Maus an eine beliebige Stelle verschieben könnten.

Außerdem setzen sich Videos nicht fort, wenn ich ihre Position ändere.

[smrtey]

Wenn du über YouTube-Videos sprichst, lies bitte meinen Beitrag über deinem und verwende den Iframe-Code, dann hast du dieses Problem nicht.

[Anatolia]

Kann ich es auf Ihrer Website ausprobieren?

[smrtey]

Sicher, hier ist ein Beitrag mit einem eingebetteten YouTube-iframe:
https://unstuckpolitics.com/t/new-topic-do-not-read/242/53

[smrtey]

Die Media Overlay-Komponente verhinderte, dass Videos von Seiten wie Imgur in unserem Forum angezeigt wurden. Wir haben das Problem behoben, indem wir video aus Zeile 103 entfernt haben, also von $('iframe, video, .lazyYT', $elem) zu $('iframe, .lazyYT', $elem) geändert.

    function addOverlays($elem) {
      $('iframe, video, .lazyYT', $elem).wrap("<div class='media-overlay-eligable'></div>")

Jetzt funktionieren Imgur-Videos wieder, und das Overlay funktioniert weiterhin mit iFrames und lazyYTs.

[Falco]

Für Nutzer, die an dieser Funktion interessiert sind, bieten iOS Safari und Firefox dies bereits standardmäßig an, während Chrome dies für seine nächsten Versionen plant.

[Justin_Vega]

@Falco

Chrome plant dies für ihre nächsten Versionen.

Haben sie nicht geplant, es in Google Chrome 82 zu veröffentlichen? Ist es außerdem in einem der Google Chrome Insider-Kanäle verfügbar?