Add support for poster image

I'm having the same issue.

Same here

same

Having same issue.

Hello,

I had the same problem, and this modification to the videojs.html.twig file fixed the issue for me. The trick was to upload image files in the same field where we upload the videos, then check the extension of the uploaded file. If the file has an image extension, then set it as the poster url.

You can help me improve on it. Thanks

{% set poster = '' %}
{% for user in items %}
{% set fileExt = file_url(user.uri)|trim|split('.')|last %}
{% if fileExt == 'jpg' or fileExt == 'png' or fileExt == 'jpeg'

<code><?php

?>

or fileExt == 'gif' %}
{% set poster %} {{ user }} {% endset %}
{% endif %}
{% endfor %}

{% for user in items %}
{% set fileExt = file_url(user.uri)|trim|split('.')|last %}

{% if fileExt == 'mp4' or fileExt == 'ogv' or fileExt == 'mov' or fileExt == 'webm' %}

{% endif %}

{% endfor %}

Have any update on this?

Really love how the video js scripts and the drupal module work across so many platforms. Now if we could just get an idea of how the Poster Image is supposed to present from the array of suggested video formats it would be great. Has anyone looked into this issue yet?

I think this is a feature request instead of a bug report. See https://www.drupal.org/project/videojs/issues/2811517#comment-11693913

I closed https://www.drupal.org/project/videojs/issues/2907550 as a duplicate.

As a feature request, let's consider how we want this implemented. How was this implemented in Drupal 7 version?

Looks like we need to add poster attribute using a URL to an image as its value to the element found in video.html.twig. We'll need to add this poster URL to the player_attributes template variable and update the template to print it.

I'm thinking we add a new formatter option to VideoJsPlayerFormatter to allow us select another field associated with the entity and then select an image style. We then use the selected field value and selected image style to generate an image URL to pass along to the template.

The tricky part would supporting both image fields and image media entity reference fields for poster images.

Thoughts?

Adding a patch based on https://www.drupal.org/project/2885400/git-instructions. This only supports media entity images for now.
Also includes patch here: https://www.drupal.org/files/issues/videojs-isapplicable.patch

Here is another patch without the work from isapplicable patch.

Updating patch from #10 to be compatible with core Media.

Hello, I have installed the dev Version of videojs but it still doesnt give me a option to add a Poster... Do I have to install this patch? if yes, how and which one of the three?

@Saif, yes I think you'll need to apply latest Patch #13.
Refer this to apply patch:

• Applying patches
• Apply patches on Windows

You can also Manually modifying module files according to instructions in the patch file. Refer this Applying a patch manually (Not suggested to do this on Production website).

As there is a patch available for review, please leave status to "Needs review". If attached patch worked for you then please you can change it to Reviewed & Tested by the Community ["RTBC"].

Thanks

The patch is not working with "Media entity" module. Core Media module is required.

The patch in #13 worked for me, thanks!

I was migrating a site from contrib Media to core Media, so can confirm that this patch will only work with the core Media module.

Plus, as an added gotcha, when you do select a poster image, the patch looks for that image entity to have a field called "field_image", which mine didn't as I was configuring core Media from a migration and ended up with slightly different field names on my core Media type for Image. Once I rejigged that field, everything worked nicely.

Patch re-rolled and updated with Drupal core 8.9.x.

Notice fix.

One problem here is that there's an assumption on which field name should be used; should it be configurable or something? The main differences between #13 and #19 are in the image field name - #13 uses field_image whereas #19 uses field_media_image.

FWIW we've been using #13 on a production site for a few years.

Please, reroll the patch to the latest branch version.

Patch re-rolled and updated with Drupal core 9.5.x.

The patch provided in #24 not patching the files correctly instead it's creating a patch file inside the directory. As per comment #22 added Needs Reroll to the tags.

@sakthi_dev Whoops apologies wrong file. Here is the updated one.

Patch 26 applied, but to Damiens' point there were PHP errors surrounding the new field name in #20.

We had been using patch #13 for several years which has field_image instead of field_media_image.

I think making that configurable is a good idea, but for now, I re-rolled and created patch #28 using patch #13 to start and the errors disappeared.

Patch applies clean to 8.x-1.x.

Patch #28 is incompatible with D10 as it uses deprecated and removed file_create_url().
Refactored so it is compatible with D10 and 3.x.

wstocker, patch #29 doesn't work for me.
Drupal 10.2.8.
Videojs 3.x.

When I aplied the patch I got the next error:

InvalidArgumentException: Field is unknown. in Drupal\Core\Entity\ContentEntityBase->getTranslatedField() (line 616 of core\lib\Drupal\Core\Entity\ContentEntityBase.php)

Drupal\Core\Entity\ContentEntityBase->get() (Line: 146)
Drupal\videojs\Plugin\Field\FieldFormatter\VideoJsPlayerListFormatter->viewElements() (Line: 91)
Drupal\Core\Field\FormatterBase->view() (Line: 76)
Drupal\Core\Field\Plugin\Field\FieldFormatter\EntityReferenceFormatterBase->view() (Line: 268)
Drupal\Core\Entity\Entity\EntityViewDisplay->buildMultiple() (Line: 339)
Drupal\Core\Entity\EntityViewBuilder->buildComponents() (Line: 24)
Drupal\node\NodeViewBuilder->buildComponents() (Line: 281)
Drupal\Core\Entity\EntityViewBuilder->buildMultiple() (Line: 238)
Drupal\Core\Entity\EntityViewBuilder->build()
call_user_func_array() (Line: 111)
Drupal\Core\Render\Renderer->doTrustedCallback() (Line: 859)
Drupal\Core\Render\Renderer->doCallback() (Line: 421)
Drupal\Core\Render\Renderer->doRender() (Line: 240)
Drupal\Core\Render\Renderer->render() (Line: 238)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 627)
Drupal\Core\Render\Renderer->executeInRenderContext() (Line: 239)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare() (Line: 128)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse() (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray()
call_user_func() (Line: 111)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch() (Line: 186)
Symfony\Component\HttpKernel\HttpKernel->handleRaw() (Line: 76)
Symfony\Component\HttpKernel\HttpKernel->handle() (Line: 58)
Drupal\Core\StackMiddleware\Session->handle() (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle() (Line: 28)
Drupal\Core\StackMiddleware\ContentLength->handle() (Line: 32)
Drupal\big_pipe\StackMiddleware\ContentLength->handle() (Line: 106)
Drupal\page_cache\StackMiddleware\PageCache->pass() (Line: 85)
Drupal\page_cache\StackMiddleware\PageCache->handle() (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle() (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle() (Line: 36)
Drupal\Core\StackMiddleware\AjaxPageState->handle() (Line: 51)
Drupal\Core\StackMiddleware\StackedHttpKernel->handle() (Line: 704)
Drupal\Core\DrupalKernel->handle() (Line: 19)

Updated patch #29 to take any media field name instead of only "field_image"

This is fixed in 10.x - please give it a try and provide feedback :)

3.x will get deprecated as soon as VideoJS 10 is released.

If anyone still needs this, feel free to review and merge.