Webm Video

The_C

Hallo,
hab ein Video im Format webm in mein Fluidtemplate eingebunden das eigentlich jeder Browser unterstützt aber anscheinend TYPO3 v12 noch nicht.
Wo fügt man das noch mal ein, ich hab es vergessen... das es auch mit TYPO3 v12 funktioniert?
Aber eigentlich ist mir das nicht logisch, müsste doch auch so gehen ich hab das ja nur im Fluidtemplate eingefügt.


<video autoplay loop muted playsinline
        style="width: 100%; height: 100%; object-fit: cover; position: absolute; z-index: -1;">

        <source href="{f:uri.image(src: '{settings.siteVideo}')}" type="video/webm">
        Dein Browser unterstützt das Video-Tag nicht.
    </video>

The_C

Hmm das hab ich gesucht ist aber auch schon eingetragen:

'SYS' => [
                'mediafile_ext' => 'gif,jpg,jpeg,webp,bmp,png,pdf,svg,ai,mp3,wav,mp4,ogg,flac,opus,webm,youtube,vimeo',

Eric Harrer

The_C hm, genau diese Eigenschaft hatte ich gerade schon im Zwischenspeicher und wollte vorschlagen es mal damit zu probieren.

$GLOBALS['TYPO3_CONF_VARS']['SYS']['mediafile_ext'] .= ',webm';

Wenn es damit nicht funktioniert, müsste ich das nochmal irgendwann praktisch nachvollziehen.

The_C

Genau das verstehe ich nicht, also sollte das doch greifen bzw. mit das Video anzeigen was es aber nicht tut!
Schau ich mir den Quelltext dazu an und klicke auf den korrekt erstellten Link wird mir das Video ohne Probleme angezeigt.

<video autoplay="" loop="" muted="" playsinline="" style="width: 100%; height: 100%; object-fit: cover; position: absolute; z-index: -1;"><source href="/_assets/8e4cfb312d14cc6e5b0332629e2b9aa2/assets/video/video.webm" type="video/webm">
        Dein Browser unterstützt das Video-Tag nicht.
    </video>

G. Schurkin

Möglicherweise ist diese Frage überflüssig, aber verwendest du den f:media Viewhelper?

The_C

G. Schurkin Nein, nur den Code von oben nix besonderes...

<video autoplay loop muted playsinline
        style="width: 100%; height: 100%; object-fit: cover; position: absolute; z-index: -1;">

        <source href="{f:uri.image(src: '{settings.siteVideo}')}" type="video/webm">
        Dein Browser unterstützt das Video-Tag nicht.
    </video>

Eric Harrer

Danke G. Schurkin für diese Rückfrage 👍
The_C Ich vermute mal ganz stark, dass das die Ursache ist. Aktuell verwendest du f:uri.image, also den ImageViewHelper. Dieser bezieht sich inter auf:

$GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext']

während der MediaViewHelper sich auf:

$GLOBALS['TYPO3_CONF_VARS']['SYS']['mediafile_ext']

bezieht.

Da es keinen f:uri.media ViewHelper gibt, musst du direkt den f:media ViewHelper benutzen, der die gesamte HTML-Ausgabe steuert.

Das würde (ungetestet) so aussehen können:

<f:media file="{file}" width="400" height="375" additionalConfig="{autoplay: '1', loop: '1', muted: '1', playsinline: '1'}" style="width: 100%; height: 100%; object-fit: cover; position: absolute; z-index: -1;" />

Die Problematik in deinem Use-Case ist jedoch, dass die Eigenschaft des file-Attributs ein FileInterface-Objekt erwartet. Du benötigst also einen vorgelagerten Prozess, der dir den Pfad zur webm-Datei in ein echtes File-Objekt umwandelt. Siehe dazu:
https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us/ApiOverview/Fal/UsingFal/ExamplesFileFolder.html#by-its-combined-identifier

Wenn du ohnehin über einen eigenen Controller dein Fluid-Template mit Informationen versorgst, kannst du die Umwandling ja einfach vornehmen. Wenn allerdings ein Fluid-Template über das TypoScript FLUIDTEMPLATE-Objekt ansteuerst, müsstest du einen anderen Weg, ggfls. über einen eigenen ViewHelper, gehen.

The_C

Dann müsste der Code so aussehen wenn ich mich nicht irre für den f:media und dann sollte es doch funktionieren...

<f:media file="{file: '{settings.siteVideo}'}"
            style="width: 100%; height: 100%; object-fit: cover; position: absolute; z-index: -1;"
            additionalConfig="{loop: '1', autoplay: '1', muted: '', playsinline: ''}" />

Aber hier bekomme ich einen Fehler:

(1/1) #1256475113 InvalidArgumentException
The argument "file" was registered with type "object", but is of type "string" in view helper "TYPO3\CMS\Fluid\ViewHelpers\MediaViewHelper".

Ich hab auch versucht beim f:uri das webm in imagefile_ext einzufügen aber das brachte mir nichts das Video wurde dadurch auch nicht angezeigt.

Eric Harrer

The_C Also wie gesagt: Das Attribut bzw. Argument file erwartet ein Element vom Typ object. Genau genommen sogar ein FileInterface-Objekt. Da hilft dir diese Array-Schreibweise {file: '{settings.siteVideo}'} in Fluid nicht weiter. Du brauchst hier einen echten PHP-Prozess (oben verlinkt), der dir den bloßen Datei-Pfad, der ja nur ein string ist, in ein richtiges PHP-Objekt umwandelt.

Wie man an der Fehlermeldung:

The argument "file" was registered with type "object", but is of type "string"

erkennen kann, wird mit deiner Schreibweise noch nicht mal ein Array erkannt, sondern ein bloßer string.
Aber egal wie du es schreibst, alle Typen, die nicht object sind, sind hier unzulässig und werfen eine PHP-Exception.

The_C

Eric Harrer dann kann ich aber das Text Media Element nicht mehr verwenden wenn ich das jetzt mit dem [https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us/ApiOverview/Fal/UsingFal/ExamplesFileFolder.html#by-its-combined-identifier](https://) erstelle oder verstehe ich da wieder was falsch?
Wie unterscheidet der was er für Datei da laden muss das gilt ja dann für alle Datein oder?

The_C

Also der ganze PHP Code kommt in mein Sitepackage

<?php

declare(strict_types=1);

namespace MyVendor\MyExtension\Classes;

use TYPO3\CMS\Core\Resource\File;
use TYPO3\CMS\Core\Resource\ProcessedFile;
use TYPO3\CMS\Core\Resource\ResourceFactory;

final class MyClass
{
    public function __construct(
        private readonly ResourceFactory $resourceFactory,
    ) {}

    public function doSomething(): void
    {
        // Get the file object by combined identifier "1:/foo.txt"
        /** @var File|ProcessedFile|null $file */
        $file = $this->resourceFactory->getFileObjectFromCombinedIdentifier('1:/user_upload/video.webm');

        // ... more logic
    }
}

Und was dann?

Eric Harrer

The_C Nein, so nicht. Es handelt sich in der Dokumentation um einen Beispiel-Code, den du nicht einfach per Copy & Paste verwenden kannst. Hier musst du etwas Transfer-Leistung erbringen 😉. Zunächst stellt sich die Frage, wie du überhaupt die PHP-Funktionalität ins Spiel bringst. Wie gesagt könntest du das für deinen Use-Case per ViewHelper realisieren. Wenn du, wie nun offenbart, im Fluid-Template des Textmedia-Contentelements unterwegs bist, bietet sich dieser Weg an.

Schicke den String aus der Variable {settings.siteVideo} als Argument durch deinen eigenen ViewHelper und bilde darin das erforderliche Objekt. Dieses kannst du anschließend im MediaViewHelper verwenden. Soweit zur Theorie, für die konkrete Ausarbeitung fehlt mir leider aktuell die Zeit.

Ich hoffe das bekommst du mit diesen Infos jetzt alleine hin. Falls ja, freuen sich andere hier im Forum bestimmt, wenn du deinen ViewHelper anschließend hier als Lösung postest. Falls nicht werde ich mir das irgendwann mal, wenn etwas mehr Zeit ist, mal anschauen.

Hier noch die Dokumentation zur Erstellung eines eigenen ViewHelpers:
https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us/ApiOverview/Fluid/DevelopCustomViewhelper.html#fluid-custom-viewhelper

The_C

Also absolut IRRE da Bastelt man an irgendwelchen FluidHelpern weil TYPO3 das schon wieder nicht kann...
Ich dacht mir achhh komm das mach ich mal schnell, und jetzt hänge ich schon wieder 3 h und jetzt erst weis ich warum das nicht geht.
Bin drauf und dran eine normal PHP Seite zu machen ohne TYPO3 das macht mich jetzt etwas wütend.
Also das sind schon Sachen die erwarte ich das ein CMS System das kann genau so wie webp das ist ja auch immer eine bastlerei bis das alles klappt...

Eric Harrer

Hatte eben einen Geistesblitz, vielleicht klappts alternativ mit dem RessourceViewHelper und deinem Ursprünglichen Code. Der Dateipfad zu webm-Datei, zeigt der nach fileadmin oder in eine Extension mit EXT:?

The_C

Eric Harrer in die EXT:
hab auch schon angefangen einen Fluidhelper zu bauen nur bekomme ich diesen Fehler:

(1/1) TYPO3Fluid\Fluid\Core\ViewHelper\Exception
Undeclared arguments passed to ViewHelper Rcdesign\Rcdesign\ViewHelpers\VideoViewHelper: src. Valid arguments are:

im Partials Template:
{namespace rc=Rcdesign\Rcdesign\ViewHelpers} und <rc:video src="fileadmin/user_upload/video.webm" />

und der VideoViewHelper.php Code:

<?php

namespace Rcdesign\Rcdesign\ViewHelpers;

use TYPO3\CMS\Core\Resource\File;
use TYPO3\CMS\Core\Resource\FileReference;
use TYPO3\CMS\Core\Resource\ResourceFactory;
use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper;

class VideoViewHelper extends AbstractViewHelper
{
    /**
     * @var bool
     */
    protected $escapeOutput = false;

    /**
     * @param string $src Der relative Pfad zum Video im Dateisystem
     * @return string HTML-Code für das Video-Tag
     */
    public function render($src)
    {
        $resourceFactory = ResourceFactory::getInstance();
        $fileObject = $resourceFactory->getFileObject($src);

        if ($fileObject instanceof FileReference) {
            $fileObject = $fileObject->getOriginalFile();
        }

        if ($fileObject instanceof File && $fileObject->getExtension() === 'webm') {
            $videoSrc = $fileObject->getPublicUrl();
            return '<video autoplay loop muted playsinline style="width: 100%; height: 100%; object-fit: cover; position: absolute; z-index: -1;">
                        <source src="' . htmlspecialchars($videoSrc) . '" type="video/webm">
                        <!-- Fallback für Browser, die das Video-Tag nicht unterstützen -->
                        Dein Browser unterstützt das Video-Tag nicht.
                    </video>';
        }

        return '';
    }
}

The_C

Hab den Code noch mal Überarbeitet jetzt wird auch mein Video angezeigt:

<?php

namespace Rcdesign\Rcdesign\ViewHelpers;

use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper;

class VideoViewHelper extends AbstractViewHelper
{
    /**
     * @var bool
     */
    protected $escapeOutput = false;

    /**
     * @param string $src Der relative Pfad zum Video im Dateisystem
     * @return string HTML-Code für das Video-Tag
     */
    public function initializeArguments()
    {
        $this->registerArgument('src', 'string', 'Der relative Pfad zum Video im Dateisystem', true);
    }

    public function render()
    {
        $src = $this->arguments['src'];

        $videoSrc = htmlspecialchars($src);

        return '<video autoplay loop muted playsinline style="width: 100%; height: 100%; object-fit: cover; position: absolute; z-index: -1;">
                    <source src="' . $videoSrc . '" type="video/webm">
                    <!-- Fallback für Browser, die das Video-Tag nicht unterstützen -->
                    Dein Browser unterstützt das Video-Tag nicht.
                </video>';
    }
}

Was für eine Geburt 🤣

Eric Harrer

The_C Tut mir leid aber dein ViewHelper macht doch nichts anderes, als den bereits bekannten HTML-Code auszugeben, und die Variable als String einzusetzen. Das kannst du doch dann genausogut direkt in dein Fluid-Template schreiben, ohne einen ViewHelper. Also so wie in meinem letzten Beispiel, nur eben statt src="/fileadmin/videos/big-buck-bunny_trailer.webm" → src="{settings.siteVideo}". Der ViewHelper war ursprünglich gedacht um alle Features des MediaViewHelpers nutzen zu können aber so macht dein ViewHelper meiner Meinung nach keinen Sinn..

Eric Harrer

Mit diesem Code funktioniert es bei mir:

<video autoplay loop muted playsinline
       style="width: 100%; height: 100%; object-fit: cover; position: absolute; z-index: -1;">
    <source src="{f:uri.resource(path:'EXT:sitepackage/Resources/Public/Videos/big-buck-bunny_trailer.webm')}" type="video/webm">
    Dein Browser unterstützt das Video-Tag nicht.
</video>

auch das hier würde funktionieren:

<video autoplay loop muted playsinline
       style="width: 100%; height: 100%; object-fit: cover; position: absolute; z-index: -1;">
    <source src="{f:uri.resource(path:'Videos/big-buck-bunny_trailer.webm', extensionName: 'Sitepackage')}" type="video/webm">
    Dein Browser unterstützt das Video-Tag nicht.
</video>

einziges Problem ist, dass der ResourceViewHelper einen Extbase-Kontext voraussetzt. Das bedeutet, dass Resourcen aus fileadmin nicht eingebunden werden könnten.

Hm, aber jetzt mal ganz naiv an die anderen hier gefragt. Könnte man bei einem Video, dass direkt unter fileadmin liegt nicht einfach ganz ohne ViewHelper den direkten Pfad angeben?

<video autoplay loop muted playsinline
       style="width: 100%; height: 100%; object-fit: cover; position: absolute; z-index: -1;">
    <source src="/fileadmin/videos/big-buck-bunny_trailer.webm" type="video/webm">
    Dein Browser unterstützt das Video-Tag nicht.
</video>

Die Hash-Dateipfade werden doch eigentlich nur bei Extension-Resourcen gebildet. Im Fileadmin hat man höchstens die bearbeiteten Versionen in einem fileadmin/_processed_-Verzeichnis. Oder lasse ich gerade irgendetwas außer Acht?

The_C

Für mich macht er jetzt schon Sinn weil er funktioniert und alles was funktioniert ist schon OK ich war hald komplett BLIND und kam nicht auf die so einfache Lösung wie in deinem ersten Beispiel DANKE!
Eigentlich wurde mir diese Variable zu Verhängnis {f:uri.image(src: '{settings.siteVideo}')}
Und wie man so schön wieder sieht kann TYPO3 nix dafür der Fehler sitzt vor dem Bildschirm!!!

Eric Harrer

The_C schön, dass du nun einen geeigneten Weg gefunden hast. Das nächste mal bereitet dir dieser Punkt schon kein Kopfzerbrechen mehr.
Solche Momente zwischen Planlos und schließlicher Erleuchtung hatte ich in den vergangenen 13 Jahren Selbstständigkeit schon etliche!
Ich denke eine wertvolle Lehre sollte sein, dass man sich nicht zu schnell aus der Ruhe bringen lassen sollte. Am Ende findet sich immer eine Lösung und manche notwendige Zeit ist halt dann auch Lehr-Zeit, die später schon nicht ein zweites mal mehr investiert werden muss.

Nächste Seite »

Unterstütze das Forum

Hilf mit, den Community Hub für TYPO3 werbefrei zu halten und die Betriebskosten zu decken. Werde Official Community Hub Supporter für nur 5 Euro im Monat (zzgl. USt) und erhalte ein exklusives Supporter-Badge. Jeder Beitrag zählt!

Jetzt Supporter werden

Impressum - Datenschutz - Kontakt - Netiquette - RSS