Add poster image and transcript to HTML5 media videos

Created on 21 March 2018, almost 7 years ago
Updated 1 February 2023, almost 2 years ago

Hi All,

Drupal 8.5.0 with the media_module in core is bundled with four media types: audio, file, image and video.

Let's create a content type with two fields:

  1. the field_local_video_file field which is using the media video type
  2. the field_local_image_file field which is using the media image type

The node rendering an HTML5 video is handled by the file-video.html.twig file (which is a file_module core file located at core/modules/file/templates/file-video.html.twig):

{#
/**
* @file
* Default theme implementation to display the file entity as a video tag.
*
* Available variables:
* - attributes: An array of HTML attributes, intended to be added to the
*   video tag.
* - files: And array of files to be added as sources for the video tag. Each
*   element is an array with the following elements:
*   - file: The full file object.
*   - source_attributes: An array of HTML attributes for to be added to the
*     source tag.
*
* @ingroup themeable
*/
#}
<video {{ attributes }}>
  {% for file in files %}
    <source {{ file.source_attributes }} />
  {% endfor %}
</video>

Now, the idea is to offer the possibility to display a poster image using content from the field_local_image_file for the HTML5 video.

It would be nice if this feature could be managed by {{ attributes }} but I cannot figure how to implement this.

Thank you!

Gilles

✨ Feature request
Status

Needs review

Version

10.1 ✨

Component
Media  →

Last updated about 12 hours ago

Created by

🇧🇪Belgium bailleux

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024