Get preview image of a video obtained from file_url

Store Design
,
1

Hello,

I am showing a video with the code of the pages.liquid file.
and I can’t get the jpg of the preview image.

I use this code:

{% assign video_1 = "video.mp4" | file_url %}

<video controls>
<source src="{{video_1 }}" type="video/mp4">
</video>

and using the variable “preview_image” it should be displayed, but I haven’t been able to do it

The “video_tag” tag does not work in pages files.
And when I upload the video to the Content > Files section of the admin, a cover image is shown and can be customized.

Minifigures_Dis_0-1695637332729.png
Minifigures_Dis_0-1695637332729.png973×669 774 KB

any ideas?

thanks!

2

Just spent way too long trying to figure out how to access a generic_file’s metadata. It honestly seems impossible. You cannot reference a file object that you attached to a metafield in a product or collection. However, I hacked a way through:

{% assign poster_url = settings.featured-collection.metafields.custom.background_video | metafield_tag | json | split: 'poster=\"\/\/' | last | downcase | split: '\"\u003e' | first | replace: "_small.jpg", ".jpg" | replace: "\/", "/" %}

Let’s break down what’s happening here:

settings.featured-collection.metafields.custom.background_video

This is the file_reference that is attached to the metafield of a collection I’m interested in. I can export the url of the file by doing this:

{{ settings.featured-collection.metafields.custom.background_video | file_url }}

Which I guess is fine for images. But for videos, there is a bunch of other stuff I want to access (let alone worrying about accessing the media type instead of having to hack a solution using file extensions). I poured through the docs for hours and was about to give up when I came across a buried little filter called “metafield_tag”. What this does is export your metadata object in a bunch of pretty html, the assumption being that you would write rules for the classes they provide.

{{ settings.featured-collection.metafields.custom.background_video | metafield_tag }}

This puts the whole chunk of generated HTML into the template for you. This is useless to my purposes. But! In my desperation I decided to filter the generated HTML with a JSON filter, just for poos and hoos. And low behold, it exports the HTML with escaped characters.

{{ settings.featured-collection.metafields.custom.background_video | metafield_tag | json }}

To see the data unescaped, you can print to console:

This has a bunch of goodies including the media type but we’re interested in the preview image URL. For our purposes, we’re working with the generated data in its escaped format. So,

{% ... json | split: 'poster=\"\/\/' | last | downcase ... %}

This finds the string **poster="** and returns everything after it. Next,

{% ... downcase | split: '\"\u003e' | first ... %}

This finds the string **">** and returns everything before it. Finally, we need to swap out the thumbnail url which is the small version to the regular version:

{% ... first | replace: "_small.jpg", ".jpg" | ... %}

And last but not least, we’re just doing some house-cleaning and replacing **\/** (escaped slashes) with regular slashes:

{% ... | replace: "\/", "/" %}

Tada! You know have the preview/cover image URL for your Shopify hosted videos.

3

Nice breakdown.