Page 1 of 1

mp4 video titles in gallery

Posted: 13 Feb 2020, 14:23
by solmea
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

Re: mp4 video titles in gallery

Posted: 14 Feb 2020, 04:24
by mjau-mjau
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.
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:So is there a way to show filenames or even titles which can be added in the gallery if you go into Edit mode.
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.

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

Posted: 14 Feb 2020, 05:37
by solmea
mjau-mjau wrote:
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.
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.

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>
Thanks for the prompt response. 

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">
Last but not least I will have a go at the last option in a test page. I am not quite sure if that will give me a better experience.

Thanks for the good product!

Re: mp4 video titles in gallery

Posted: 14 Feb 2020, 05:54
by mjau-mjau
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. 
I wasn't aware of this. Is this a working feature for embedded videos in html <video> tag?
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?
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.

Re: mp4 video titles in gallery

Posted: 17 Feb 2020, 04:14
by solmea
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.
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
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.

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

Posted: 17 Feb 2020, 20:27
by mjau-mjau
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.
Good to hear!