Hi there,
I am trying to use X3 for a video gallery. And technically it works.. But the video previews are not always working and I keep seeing black images as video.
So is there a way to show filenames or even titles which can be added in the gallery if you go into Edit mode.
Have I missed anything? If not, can I hack it in the code somewhere? I do know a bit of PHP, but getting a direction to where to edit would save me some time.
Greetings and thanks for this nice product,
Roalt
X3Photo Gallery Forums
X3 Photo Gallery Support Forums
mp4 video titles in gallery6 posts
Re: mp4 video titles in gallery
X3 doesn't load any "preview" or anything. The video is just embedded, and then it's up to the browser to preview meta data, which are normally the first frames of the video. If the video is black, then likely the first frame of you video is black. This also depends on browsers, where some browsers (desktop) may preload more frames before the video is playing, while others (mobile) might not preload any frames at all, or maybe just the first frame (often black). X3 cannot control this. Your only option would be to manually add the videos to the content section, in which case you can use the poster="..." attribute to set the preview image for the embedded video.solmea wrote:I am trying to use X3 for a video gallery. And technically it works.. But the video previews are not always working and I keep seeing black images as video.
If you go to page Settings > Gallery > scroll down to Captions, you can assign TITLE, DESCRIPTION and DATE, just like for gallery images. If you want custom control of video captions, your option would be to embed them manually into page content, and then write formatted text above or below each video.solmea wrote:So is there a way to show filenames or even titles which can be added in the gallery if you go into Edit mode.
To add videos manually, you should first click to HIDE the video(s) uploaded into your page gallery (so they won't appear automatically in the page's gallery). Then, you can embed them into the page > Content section, by using the html code from the templates dropdown. For example:
Code
<video width="100%" preload="metadata" controls controlsList="nodownload" poster="{{path}}poster-for-video.jpg">
<source src="{{path}}videofilename.mp4" type="video/mp4">
</video>Re: mp4 video titles in gallery
Thanks for the prompt response.mjau-mjau wrote:If you go to page Settings > Gallery > scroll down to Captions, you can assign TITLE, DESCRIPTION and DATE, just like for gallery images. If you want custom control of video captions, your option would be to embed them manually into page content, and then write formatted text above or below each video.solmea wrote:So is there a way to show filenames or even titles which can be added in the gallery if you go into Edit mode.
To add videos manually, you should first click to HIDE the video(s) uploaded into your page gallery (so they won't appear automatically in the page's gallery). Then, you can embed them into the page > Content section, by using the html code from the templates dropdown. For example:Code<video width="100%" preload="metadata" controls controlsList="nodownload" poster="{{path}}poster-for-video.jpg"> <source src="{{path}}videofilename.mp4" type="video/mp4"> </video>
I added the Title in the Caption before the preview and now I see a title above the movie. Good enough for me. :thumbsup:
Concerning the preview I understand that it is a browser preload thing. I have looked into that issue and added the following to the URI '#t=2'. This should tell the browser to preload an image after 2 seconds.
I have edited it in the underlying code in twig and some hashed template. And now it works. I understand that Twig is a markup template which creates the hashed templates. So somehow the twig stuff must be triggered to regenerate the template?
The twig line in twig/partials/module.video.html is at line 61
Code
<source src="{{ assetspath ~ (gallery.file_path ~ "/" ~ video.file_name)|trim(".") }}#t=2" type="video/mp4">Thanks for the good product!
Re: mp4 video titles in gallery
I wasn't aware of this. Is this a working feature for embedded videos in html <video> tag?solmea wrote:Concerning the preview I understand that it is a browser preload thing. I have looked into that issue and added the following to the URI '#t=2'. This should tell the browser to preload an image after 2 seconds.
X3 templates are pre-rendered (by TWIG) in the /app/templates/ directory. The /app/twig/ dir is really only there fore reference. I think you can re-generate template-output by deleting the contents of the existing /app/templates/ dir.solmea wrote:I have edited it in the underlying code in twig and some hashed template. And now it works. I understand that Twig is a markup template which creates the hashed templates. So somehow the twig stuff must be triggered to regenerate the template?
Re: mp4 video titles in gallery
I tested a bit more and I am not sure if it is a good idea to show videos this way with the #t option. It works for a few videos, but I had 40 in there and then it starts preloading all 40 up to the timestamp given.
So I used your suggestion to hide all images and movies and generate the content in the Content section with poster image. That works pretty awesome. And it loads a lot quicker on slower devices like budget phones.
However the movie will start at 15 seconds if you use #t=15 so the viewer will have to rewind the movie if they wanna see it from the start.Start or stop the video at a certain point or timestamp
Using Media Fragments (the #t= anchor in the src) you can specify the time at which the video should start playback and end playback. In this example, the video playback will start at second 15 and end at second 20: #t=15,20
So I used your suggestion to hide all images and movies and generate the content in the Content section with poster image. That works pretty awesome. And it loads a lot quicker on slower devices like budget phones.
Re: mp4 video titles in gallery
Good to hear!solmea wrote:So I used your suggestion to hide all images and movies and generate the content in the Content section with poster image. That works pretty awesome. And it loads a lot quicker on slower devices like budget phones.