Jump to content

Documentation

A universal, accessible video and audio player for TYPO3. Offers support for HTML5 video/audio, YouTube, Vimeo, SoundCloud, HLS and DASH streaming, playlists, subtitles, transcripts, sign language, and compliance with WCAG 2.2…

VidPly TYPO3 Extension Logo

Features

  • Privacy-focused external services – YouTube, Vimeo, SoundCloud with a GDPR-compliant consent layer
  • Site-wide privacy settings – Centralised backend configuration for privacy layer text, links and headings
  • Media library – Reusable media assets across your entire website
  • Automatic playlists – Playlists are created automatically once there are two or more items
  • Full accessibility – Subtitles, chapters, audio description, sign language, keyboard navigation
  • HLS streaming – Adaptive bitrate streaming with hls.js 1.7.2 (Chrome / Firefox / Edge / Desktop Safari) and native HLS on iOS / iPadOS – both options are integrated into VidPly’s menus for subtitles, transcripts and quality
  • DASH streaming – MPEG-DASH via dash.js 5.2.1 (modern UMD) with adaptive quality and subtitles (integrated into video/audio formats)
  • Import via URL – Paste a media URL into the backend to automatically detect the type, attach online media and pre-fill the title, artist and poster
  • SoundCloud support – GDPR consent layer, followed by playback via the SoundCloud widget (optional developer consent for uniform VidPly controls – see privacy layer)
  • Buffer spinner – Centred loading spinner that appears automatically whilst media is buffering
  • Optional download button – Can be enabled or disabled per media item; progressive sources (MP4/WebM/MP3) are used automatically; for pure HLS/DASH elements, add a progressive fallback file
  • Floating Player – Optional custom picture-in-picture: a movable, resizable window on the page (per media record)
  • Modern player – Responsive, browser-based PiP, quality switching, playback speed, overlay with keyboard shortcuts
  • Structured data (JSON-LD)VideoObject / AudioObject (as well as ItemList on gallery pages) for SEO rich results – see Developer Quick Start
  • TypeScript codebase – The integrated VidPly player is now written in strict TypeScript and contains .d.ts declarations
  • Conditional loading of assets – Only the JavaScript files required for your media types are loaded
  • List view & detail page – Add a VidPly list view content element for one or more searchable rows (horizontal shelf or responsive grid), optional pagination and sorting controls per row, category chips on cards, and links to a VidPly detail page with short and long (RTE) descriptions, categories and slug or ?media= URLs; linked translations follow the configuration for the default language row (see List view and detail page)

Quick Start

Install

 
composer require mpc/mpc-vidply
  1. Database update → Admin tools → Maintenance → Analyse database structure
  2. Integrate site set → Site Management → Sites → Your site → Sets → Add mpc/mpc-vidply
    (or add mpc/mpc-vidply to dependencies in config/sites/<site>/config.yaml)
  3. Clear caches

Create media

‘List’ module → VidPly Media

The quickest way: Use ‘Import from URL’ at the top of the form – enter a YouTube, Vimeo, SoundCloud or streaming link (.m3u8 / .mpd) or an external MP4/MP3 link listed in the whitelist. VidPly recognises the type and fills in the metadata automatically. See the Editor Manual for more details.

Or select the media type manually:

  • Video – Upload MP4 or WebM files, or add HLS/DASH streaming URLs (with progressive fallbacks)
  • Audio – Upload MP3 or OGG, or add HLS/DASH streaming URLs (with progressive fallbacks)
  • YouTube – Paste a video URL
  • Vimeo – Paste the video URL
  • SoundCloud – Paste the track/set URL

Add player to page

Page module → Add content → VidPly player – Select one or more media items (a playlist will be created if you select two or more). For information on player options, subtitles, playlists and privacy, see the editor manual.

Create a media library (list view)

Add a VidPly Listview content element for searchable list rows and a VidPly detail page for displaying individual media items (slug URLs, categories, detailed descriptions). Step-by-step guide: Listview & Detail.

Documentation

Start with the documentation index for navigation tailored to your target audience (editors, administrators, developers).

GuideFor
editorsCreating media, players, subtitles and privacy levels
List view & detail viewMedia library overview, detail pages, redirection, i18n
Quick start for developersInstallation, processors, TCA, tests, JSON-LD
IntegrationsVue/Swiper, dynamic content, CSP, mp-core
Settings, ArchitectureExtensions, privacy, player and media settings
Privacy layerGDPR consent for YouTube, Vimeo, SoundCloud
Implementation of HLS and DASH streamingHLS and DASH streaming as well as CSP
Conditional loading of assetsConditional loading of JavaScript
Template partsOverrides of Fluid templates

Troubleshooting

ProblemSee
Problems with media or playlistsEditor Manual → Troubleshooting
Privacy layer / YouTube / Vimeo / SoundCloudPrivacy layer
HLS/DASH or CSP errorsImplementing HLS and DASH streaming
Player missing from Vue/Swiper sliderIntegrations
List view routing or slugsList view and detail page

Prerequisites

  • TYPO3: 13.4+ or 14.x (Core, Fluid, Extbase)
  • PHP: 8.2+ (8.3 recommended)
  • Composer: Required
  • Browser: Chrome 90+, Firefox 88+, Safari 14+

fluid_styled_content is optional. VidPly registers its own TypoScript for rendering front-end content (lib.mpcVidplyContentElement) and provides a compatible default layout for tt_content headers and container classes.

Licence

GNU General Public Licence v2.0 or later

Author

Matthias Peltzer

Share page