Serving Video Files Locally
Closed this issue · 4 comments
I'm having a similar issue to #131 for MP4s and wondering if I'm doing something wrong.
I'm using the latest version of WPGatsby and the latest version of Gatsby and this plugin.
"gatsby": "^2.30.1",
"gatsby-source-wordpress-experimental": "^6.0.0",
What I was hoping for:
- the localFile graphQL object would have a sourceUrl or equivalent.
From reading previous issues, I thought that any URL that had was being sourced from the uploads directory would be remapped and downloaded.
What I'm doing
Here's the relevant part of the graphQL query:
{
allWpPage {
nodes {
title
blocks {
... on WpAcfSpotlightBlock {
name
acf {
backgroundVideo {
localFile {
relativePath
}
mediaItemUrl
sourceUrl
}
}
}
}
}
}
}
It's worth noting that sourceUrl comes back as null
and that the localFile is there to show where I was hoping to find sourceUrl.
This is then used in a component where I pass the video down:
const BackgroundVideoComponent = ({ backgroundVideo }) => {
return (
<>
<video
autoPlay
muted
loop
className="background-video z-10 object-cover absolute w-full h-full"
>
<source src={backgroundVideo.mediaItemUrl} type="video/mp4" />
</video>
</>
);
};
What is happening
On inspection, this produces the following HTML.
<video autoplay="" loop="" class="background-video z-10 object-cover absolute w-full h-full">
<source src="http://website.local/wp-content/uploads/2020/07/rain.mp4" type="video/mp4">
</video>
Do I need to be adding more transforms or should the plugin be fetching this asset automatically?
Super appreciative of all the work you're doing - thank you!
@doingandlearning thanks for reporting this issue you're having! Do you have a way to provide a repository or some such that allows us to reproduce this bug?
Hi,
I've done a minimal reproduction. The repo is here: https://github.com/doingandlearning/example-wordpress-video-repo
- I have a WordPress instance with an ACF field that is serving a file
- The file is a video file
- In the template I'm using that file
What I was hoping
That the localFile would have a transformed URL for a file in the cache.
What is actually happening
The URL provided in localFile is linking to the WP instance.
Here is the WP plugins that are installed.
I think this is the simplest version of the question I have above - I would like these files to be locally sourced so I can disconnect from the WP instance in the static build.
Hi,
I haven't heard anything back about this since I reproduced the issue above.
At the moment, I can see the files in the cache after the build but the localFile is not linking to the cached version.
I'm very happy to do the work myself, I'm just not sure where to head. I'm around in the wpgraphl Slack (Kevin) and if someone could help I'd very much appreciate it.
Best,
Kevin.
Hi @doingandlearning , apologies for the lengthy delay on this - this is already possible, see the docs for more info https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-wordpress/docs/features/media-item-processing.md#referencing-static-file-public-urls