Video player

[github-actions]

This PR closes #815 and implements video player support through a new video template filter which transforms a standard html <video> element to a a full fledged video player. The template filter makes use of the popular https://plyr.io/ video player.

This feature doesn't provided video streaming, videos need be downloaded before they can be played. Video streaming using byte serving is provided through Joomlatools Server or adaptive bitrate streaming can be provided by any other external service.

Features

1. HTML5 video player

Plyr is a simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers. For a complete list of features and customisation options please check: https://github.com/sampotts/plyr#features

2. Lazy video loading

The video player is automatically lazy-loaded using the Lazysizes js library meaning that it's only rendered when the user is close to seeing the video player. This prevents loading videos that are images outside of the initial viewport.

3. Poster image support

Pages can generate an optimised poster image by making use of the features provided by Joomlatools Server. For more info please also see: #812

4. Adapts to users device capabilities and preferences

Pages will consider device capabilities and user preferences to serve the most optimised video format possible for the context of the device and or user. It makes use of:

• Save-Data
• The connection type

Rules:

• If the connection is 2g load lowest quality video (*)
• If save-data is enabled load lowest quality video (*)

(*) Requires multi quality videos to be available.

Getting started

To use the image filter simple add the filter to your page or layout:

---
@layout: template://pages/document.html
@process:
    filters:
        - video
---