PHPackages hauerheinrich/hh-video-extender - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. hauerheinrich/hh-video-extender ActiveTypo3-cms-extension[Utility & Helpers](/categories/utility) hauerheinrich/hh-video-extender =============================== Hauer-Heinrich - Extends sys\_file\_reference video/media. Added attributes to select in content element (eg textmedia) like: muted, loop, controls, previewImage and so on. 0.5.0(2mo ago)061.3k↑11.8%4[3 issues](https://github.com/Hauer-Heinrich/hh_video_extender/issues)[7 PRs](https://github.com/Hauer-Heinrich/hh_video_extender/pulls)2GPL-2.0-or-laterPHP Since Jun 8Pushed 2mo ago2 watchersCompare [ Source](https://github.com/Hauer-Heinrich/hh_video_extender)[ Packagist](https://packagist.org/packages/hauerheinrich/hh-video-extender)[ Fund](https://www.paypal.com/paypalme/hauerheinrich)[ RSS](/packages/hauerheinrich-hh-video-extender/feed)WikiDiscussions master Synced 2d ago READMEChangelogDependencies (8)Versions (39)Used By (2) hh\_video\_extender =================== [](#hh_video_extender) hh\_video\_extender is a TYPO3 extension. Extends sys\_file\_reference video/media. Added attributes to select in content element (eg textmedia) e.g.: muted, loop, controls, previewImage and so on. Extends TYPO3 core videorenderer with properties like: - for vimeo and youtube: defer loading (uses javascript to load video resource after page load) - for youtube: loop, controls, related\_videos, autoplay - for internal videos webp, mp4 and so on: loop, muted, preload, controls ### Installation [](#installation) ... like any other TYPO3 extension [extensions.typo3.org](https://extensions.typo3.org/extension/hh_video_extender/ "TYPO3 Extension Repository") #### Using the site set as dependency in a site config [](#using-the-site-set-as-dependency-in-a-site-config) ``` base: 'https://example.com/' rootPageId: 1 dependencies: - hauerheinrich/hh-video-extender - hauerheinrich/hh-video-extender/FluidCe (optional, or) ``` ### Features [](#features) - added default html5 video attributes to enable at the TYPO3 backend - no changes in FLUID required - automatically add TypoScript, can be disabled in the extension configuration (BE). Then you can choose it from template-modul = static-templates. - previewImage / poster-image can be set in the backend directly in the content-element - defaultPreviewImage can be set too as fallback (constants-editor) - you can overwrite the previewImage witch is set at the content-element (constants-editor) - you can output the preview image always as additonal img-tag instead of poster-attribute (constants-editor) - determines whether in the same directory as the mp4 video synonymous webm or ogg / ogv / ogm videos are with the same name, if so they are added as source - usage of html5 video tracks-tags see below. ### Todos [](#todos) - move preview-image to a css background solution ### Deprecated [](#deprecated) - currently nothing Explanations ------------ [](#explanations) - Option "defer" uses JavaScript which is included, but it is recommended to use your own JavaScript or copy this to your JavaScript library. Cause of loading extra file for a view lines of code. ### TypoScript Constants [](#typoscript-constants) - TypoScript constants are editable via the Constants-Editor at the TYPO3 backend. ##### includeCss [](#includecss) Enable or disable automaticaly inclusion of the CSS file(s) of this Extension (default: on). The file is automatically included only when it is needed. See FLUID file: [Video.html](Resources/Private/Partials/Media/Type/Video.html). ##### includeJavaScript [](#includejavascript) Enable or disable automaticaly inclusion of the JavaScript file(s) of this Extension (default: on). The file is automatically included only when it is needed. See FLUID file: [Video.html](Resources/Private/Partials/Media/Type/Video.html). ##### includeJavaScriptChapters [](#includejavascriptchapters) Include JavaScript code for video chapter generation? (regardless of includeJavaScript option!) See video tracks section below! The file is automatically included only when it is needed. See FLUID file: [Video.html](Resources/Private/Partials/Media/Type/Video.html). ##### previewImage [](#previewimage) Set the path to the default previewImage, this image is also used as fallback if no PreviewImage is set at the ContentElement (CE). ##### previewImage\_alt [](#previewimage_alt) Set the previewImage html-alt-attribute. ##### previewImage\_title [](#previewimage_title) Set the previewImage html-title-attribute. ##### previewOverride [](#previewoverride) Overwrites the preview image that was inserted via the ContentElement (CE) (default: off). ##### showAllwaysPreviewImageAsImage [](#showallwayspreviewimageasimage) Default show PreviewImage as html-poster-attribute. If you turn this option on, the PreviewImage will always be output as img tag as well (default: off). Only valid for local videos, not for youtube and vimeo etc! ##### clickPreviewImageToShowVideo [](#clickpreviewimagetoshowvideo) Should the video only be visible after clicking on the PreviewImage? Default: off - as soon as the video is loaded, the video is displayed immediately. This option only hides the preview-image (-wrapper), no autoplay of the video! This option uses JavaScript which is included, but it is recommended to use your own JavaScript or copy this to your JavaScript library. Cause of loading extra file for a view lines of code. (default: off). #### Video tracks-tags - Usage (currently) [](#video-tracks-tags---usage-currently) For example, you have a video file in "fileadmin/user\_uploads/my\_videos/" and the video is called "your\_video\_name.mp4". Then you have to create a file for each "track-type" and language, e. g.: - fileadmin/user\_uploads/my\_videos/your\_video\_name.mp4 - fileadmin/user\_uploads/my\_videos/your\_video\_name.webm - fileadmin/user\_uploads/my\_videos/your\_video\_name.captions.de.vtt - fileadmin/user\_uploads/my\_videos/your\_video\_name.subtitles.de.vtt - fileadmin/user\_uploads/my\_videos/your\_video\_name.captions.en.vtt - fileadmin/user\_uploads/my\_videos/your\_video\_name.subtitles.en.vtt - etc. For the html-track-tag attribute "default" you have to name your file like (added string "default" to the file name): - fileadmin/user\_uploads/my\_videos/your\_video\_name.captions.de.default.vtt IMPORTANT: only one default file per video should be set! Currently available track types: - "captions" - "chapters" - "descriptions" - "subtitles" You can find examples of these here: [VTT files](Examples/VTT/). ##### If you want custom track-labels [](#if-you-want-custom-track-labels) Default (default fallback, for every file): uses the "title" of the language from your site config.yaml Custom site config (site fallback, for every file): Add an entry below "videoTracks" -> "labels" for each language in your site config.yaml for each type of track (structure is important), e. g.: ``` languages: - title: English enabled: true languageId: '1' base: /en/ typo3Language: en locale: en_US.UTF-8 iso-639-1: en navigationTitle: EN hreflang: en direction: ltr fallbackType: free fallbacks: '0' flag: en-us-gb videoTracks: labels: captions: custom label for caption subtitles: label customized for subtiles ``` Custom per file: Make sure that the TYPO3 core extension "filemetadata" is loaded. Then you can set the labels for each file via module "filelist" (fileadmin) -> your file metadata. These labels set in the file metadata overwrites all other settings. HINT: - "chapters" are loaded depending on the html-tag attribute "lang" (with fallback to english if available). - currently only languages are loaded that are also stored in the TYPO3 site-config.yaml. More information about VTT files [Web\_Video\_Text\_Tracks\_Format](https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API/Web_Video_Text_Tracks_Format ".mozilla.org WebVTT") ### IMPORTENT NOTICE [](#importent-notice) - Vimeo is not tested! - If you have problems with autoplay video on IE/EDGE then try to set "options.preload" to "auto". - poster attribute only works if preload is set to 'none', but you have the option to set the preview image as img-tag: see features [![example picture from backend](github/images/preview.jpg?raw=true "Title")](github/images/preview.jpg?raw=true) ### Development [](#development) #### Setup [](#setup) 1. `npm install` #### Usage of Build Tools [](#usage-of-build-tools) - `npm run init` (only needed on first setup) - `npm run build` (build css, css nesting, js, sourcemaps & other files) - `npm run watch` (build css, css nesting, js, sourcemaps & other files everytime a file changes) - `npm run options` (show current build configuration/options) More informations/docs about the esbuild usage: ##### Copyright notice [](#copyright-notice) This repository is part of the TYPO3 project. The TYPO3 project is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. The GNU General Public License can be found at . This repository is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. This copyright notice MUST APPEAR in all copies of the repository! ##### License [](#license) --- GNU GENERAL PUBLIC LICENSE Version 3 ### Health Score 52 — FairBetter than 96% of packages Maintenance88 Actively maintained with recent releases Popularity31 Limited adoption so far Community19 Small or concentrated contributor base Maturity61 Established project with proven stability Bus Factor1 Top contributor holds 81.8% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~100 days Recently: every ~89 days Total 26 Last Release 60d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/f96c56f2f8cae31e7423131bc9dc49dc572ff3f5c2b573b59370389551e7b66e?d=identicon)[Teisi](/maintainers/Teisi) --- Top Contributors [![Teisi](https://avatars.githubusercontent.com/u/10898521?v=4)](https://github.com/Teisi "Teisi (81 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (13 commits)")[![iocron](https://avatars.githubusercontent.com/u/3641649?v=4)](https://github.com/iocron "iocron (3 commits)")[![mhofmannhauerheinrich](https://avatars.githubusercontent.com/u/247131106?v=4)](https://github.com/mhofmannhauerheinrich "mhofmannhauerheinrich (2 commits)") --- Tags extensionfluidtypo3typo3-extensionextensionTYPO3 CMS ### Embed Badge ![Health badge](/badges/hauerheinrich-hh-video-extender/health.svg) ``` [![Health](https://phpackages.com/badges/hauerheinrich-hh-video-extender/health.svg)](https://phpackages.com/packages/hauerheinrich-hh-video-extender) ``` ### Alternatives [friendsoftypo3/content-blocks TYPO3 CMS Content Blocks - Content Types API | Define reusable components via YAML 103519.9k53](/packages/friendsoftypo3-content-blocks)[brotkrueml/schema Embedding schema.org vocabulary - API and view helpers for schema.org markup 34653.7k16](/packages/brotkrueml-schema)[yoast-seo-for-typo3/yoast_seo Yoast SEO for TYPO3 511.7M9](/packages/yoast-seo-for-typo3-yoast-seo)[friendsoftypo3/visual-editor TYPO3 CMS Visual Editor - Brings a modern WYSIWYG editing experience to TYPO3 CMS. 576.1k2](/packages/friendsoftypo3-visual-editor)[pagemachine/typo3-formlog Form log for TYPO3 23238.6k8](/packages/pagemachine-typo3-formlog)[eliashaeussler/typo3-form-consent Extension for TYPO3 CMS that adds double opt-in functionality to EXT:form 1595.5k](/packages/eliashaeussler-typo3-form-consent) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)