YouTube Media Provider: Regex erfasst den Timestamp nicht

  • Affected App
    WoltLab Suite Core

    Hallo,

    anscheinend funktioniert mit dem aktuellen Regex des YouTube Media Providers die Erfassung des Timestamps, ab welcher Stelle das Video gestartet werden soll, nicht. Ein kleines Beispiel, dass es auch hier auf woltlab.com so ist:

    https://youtu.be/DLzxrzFCyOs?t=35

    External Content youtu.be
    Content embedded from external sources will not be displayed without your consent.
    Through the activation of external content, you agree that personal data may be transferred to third party platforms. We have provided more information on this in our privacy policy.

    Das Video sollte eigentlich an der Stelle 35 Sekunden starten. Das Alternative Format mit t=XhYmZs wird ebenfalls nicht erfasst. Das ist der Regex, wie er aktuell in meiner Community eingetragen ist (unverändert):

    https?://(?:.+?\.)?youtu(?:\.be/|be\.com/(?:#/)?watch\?(?:.*?&)?v=)(?P<ID>[a-zA-Z0-9_-]+)(?P<start>(?:#a?t=(?:\d+|(?:\d+h(?:\d+m)?(?:\d+s)?)|(?:\d+m(?:\d+s)?)|(?:\d+s))$)?)

    Burning Board®-Version4.1.9
    Community Framework™-Version2.1.9 pl 1 (Typhoon)

  • Sicher, dass es nicht ein Fehler im Regex ist? Schaut man sich den Quellcode an, welchen der Media Provider generiert, sieht dieser nämlich so aus:

    <iframe width="560" height="315" allowfullscreen="" src="https://www.youtube.com/embed/DLzxrzFCyOs?wmode=transparent" style="max-width:100%;">

    Würde der Regex die Startzeit erfassen, müsste beim src-Attribut am Ende zumindest noch &start=X stehen, was aber nicht der Fall ist. Nehme ich einen iframe und setze als src folgendes:

    https://www.youtube.com/embed/DLzxrzFCyOs?wmode=transparent&start=45

    funktioniert Einbetten mit Angabe der Startzeit.

  • Ich habe mir den Regex angeschaut und eine Ursache für das aktuell ausgelieferte URL Format gefunden. Schaut man ein YouTube Video gibt es prinzipiell zwei Möglichkeiten für das Kopieren der URL an der aktuellen Stelle: Entweder durch einen Rechtsklick auf ein Video "Video URL an dieser Stelle kopieren" oder indem man unter dem Video auf Teilen klickt und dort "Start um:" anwählt. Ersteres führt zu dem Format https://youtu.be/DLzxrzFCyOs?t=35 und zweiteres zu dem Format https://youtu.be/DLzxrzFCyOs?t=1m35s. Beide Formate werden bereits vom Regex berücksichtigt. Allerdings erwartet der Regex das "?" in der URL schon früher, sodass es nicht direkt vor dem "t" Parameter stehen darf.

    Hier beispielhaft der Test Code, an welchem ich es ausprobiert habe

    Nächster Punkt ist dann der HTML Code des YouTube Media Providers. Dieser würde aktuell dazu führen, dass beim src-Attribut ein "t=X" angehängt wird. Es heißt aber wohl mittlerweile "start=X", wenn man den Startzeitpunkt bei einem iframe Embed festlegen möchte.

    Wie werden Updates für Media Provider eigentlich ausgeliefert? Es gibt ja kein offizielles MediaProviderPIP, wenn ich mich nicht täusche. Wird das über das SQL PIP gemacht?

  • Das nächste Update des WCF war ja bereits und ich habe im SQL auch eine Update Anweisung für YouTube entdeckt. Allerdings scheint das Problem nicht behoben worden zu sein, oder?

  • Okay, danke für den Hinweis. Wird glaube ich auch unschön zu beheben, da meines aktuellen Wissens nach beim Einbetten nur noch Angaben im Sekunden Format erlaubt sind, also beispielsweise start=100 und nicht mehr start=1m40s. Rein mit den Regex der Media Provider ist eine Umwandlung leider nicht möglich.

  • Ich habe für einige aus meiner Community, welche an den technischen Hintergründen interessiert sind, eine Erklärung für das Problem formuliert. Da sich hier manche vielleicht ebenfalls dafür interessieren, teile ich sie auch hier:


    Quote from ramius

    Beim automatischen erkennen von Medien (YouTube, Twitter oder webm URLs) wird die URL genommen und in den Code zum Einbetten umgewandelt. Dabei können Teile aus der URL im Code zum Einbetten verwendet werden. Beispielsweise haben wir eine YouTube URL youtube.com/watch?v=DLzxrzFCyOs. Diese wird automatisch erkannt und der Parser nimmt sich die Video ID, welcher hinter dem v= steht, also DLzxrzFCyOs. Nun wird der Embed Code genommen und dort die Video ID eingefügt:
    <iframe [...] src="https://www.youtube.com/embed/{$ID}"></iframe>
    Ihr seht, dass es sich schlicht um ein sogenanntes iframe handelt und dort an der Stelle {$ID} die aus der URL erfasste Video ID eingefügt wird.

    Nun zu den Timestamps: Diese hängt YouTube hinter der URL an. Dabei unterstützt YouTube zwei Format: Als Angabe in XhYmZs, also in Stunden, Minuten und Sekunden, oder einfach nur einer Zahl, welche den Zeitpunkt in Sekunden angibt. Man springt also mit t=1m40s an die gleiche Stelle wie mit t=100, da 100 Sekunden gleich 1 Minute 40 Sekunden sind. Eine YouTube URL mit Timestamp sind dann so aus: youtube.com/watch?v=DLzxrzFCyOs&t=1m40s oder youtube.com/watch?v=DLzxrzFCyOs&t=100

    Der Parser kann aus beiden URL Formaten den Timestamp extrahieren und in den Embed Code einfügen:
    <iframe [...] src="https://www.youtube.com/embed/{$ID}?start={$start}"></iframe>

    Je nach Format, steht also start=1m40s oder start=100 dort. YouTube erlaubt aber nur das zweite Format, also die Angabe einer Zahl in Sekunden. Nun könnte man sagen: Wandelt doch einfach die 1m40s in 100 um. Sollte ja kein Problem sein. Wäre es auch nicht, wenn man im Medien Parser Programm Code einbauen könnte. Man kann aber tatsächlich nur statisch Stücke aus der gegebenen URL nehmen und in einen beliebigen festen Code zum Einbetten einfügen. Daher ist es aktuell nicht möglich, Videos mit Timestamps im XhYmZs Format korrekt einzubetten. Zeitstempel im Sekunden Format funktionieren.

    Ich nehme an, dass der Hersteller sagen wird, dass sie das Ausführen von Programm Code im Medien Parser auf das nächste größere Update verschieben und bis dahin YouTube Timestamps nur im Sekunden Format angegeben werden können.


    Ich habe den Embed Code bei mir angepasst, damit zumindest das Sekunden Format funktioniert.
    Der reguläre Ausdruck lautet:

    https?://(?:.+?\.)?youtu(?:\.be/|be\.com/(?:#/)?watch\?(?:.*?&)?v=)(?P<ID>[a-zA-Z0-9_-]+)(&t=)?(?P<start>(?:(?:\d+|(?:\d+h(?:\d+m)?(?:\d+s)?)|(?:\d+m(?:\d+s)?)|(?:\d+s))$)?)

    Der Code zum Einbetten lautet:

    <iframe style="max-width:100%;" width="560" height="315" src="https://www.youtube.com/embed/{$ID}?wmode=transparent&start={$start}" allowfullscreen></iframe>

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!