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. hauerheinrich/hh-video-extender ActiveTypo3-cms-extension 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.4.1(11mo ago)057.5k↓17.6%4[1 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 10mo 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 1mo ago READMEChangelogDependencies (4)Versions (37)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 43 — FairBetter than 91% of packages Maintenance52 Moderate activity, may be stable Popularity31 Limited adoption so far Community17 Small or concentrated contributor base Maturity61 Established project with proven stability Bus Factor1 Top contributor holds 83.2% 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 ~91 days Recently: every ~34 days Total 25 Last Release 349d 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 (79 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)") --- 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 [fluidtypo3/vhs This is a collection of ViewHelpers for performing rendering tasks that are not natively provided by TYPO3's Fluid templating engine. 1954.1M49](/packages/fluidtypo3-vhs)[brotkrueml/schema Embedding schema.org vocabulary - API and view helpers for schema.org markup 33584.6k13](/packages/brotkrueml-schema)[web-vision/deepltranslate-core This extension provides option to translate content element, and TCA record texts to DeepL supported languages using DeepL API services with TYPO3 CMS 3289.7k2](/packages/web-vision-deepltranslate-core)[ichhabrecht/core-upgrader Run upgrade wizards for multiple TYPO3 versions at once 2732.0k](/packages/ichhabrecht-core-upgrader)[leuchtfeuer/locate Locate - The users country, preferred language and other facts will be detected. Depending on configurable rules the user can be redirected to other languages or pages. Locate also provides geo blocking for configurable pages in configurable countries. 1182.8k](/packages/leuchtfeuer-locate)[netresearch/contexts Multi-channel content visibility for TYPO3 - by Netresearch 1117.4k1](/packages/netresearch-contexts) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)