Photo Gallery Forums

Hello Karl & anybody else,

This question pertains to videos (MP4s) that are played using <video> tags, which is defined in its gallery on the Settings|Content page.

I have a little over 500 videos, which I am dreading having to manually add each of them into the Content page.

I am curious if it's possible, through some Javascript code, to be able to automatically read in every MP4 file within that gallery, and then have the Javascript code automatically insert the actual video filename into each <video> tag (in the below sample code, it would insert the actual filename where autofilename.mp4 is shown).

All of my MP4 files are located in a subfolder (gallery_items_folder in the below sample code), and that subfolder is hidden, so none of the actual MP4 files are displayed, and the gallery itself is empty, and uses only what is coded in the Content page.

I am also hoping that I will be able to use only 1 single <video> tag (as shown above), instead of 500+ video tags.

I got the idea from another post HERE from a couple of years ago, but I have no idea if that project was taken any further.

So, anyone know if what I am try to accomplish is doable?  I know absolutely nothing about Javascript.

Thanks in advance & have yourselves a great day.

Regards,
John

JMM wrote:I have a little over 500 videos, which I am dreading having to manually add each of them into the Content page.

Perhaps I did not read the post properly or understand correctly, but when you upload videos into X3, they will automatically render as separate <video> tags in the X3 gallery page. If there is any reason this is not appropriate, then it would be useful to know why.

JMM wrote:I am curious if it's possible, through some Javascript code, to be able to automatically read in every MP4 file within that gallery, and then have the Javascript code automatically insert the actual video filename into each <video> tag

... so when I read this, I don't quite understand what it does differently from normal behavior. When you upload 500 videos, X3 wil already create 500 <video> tags with each video embedded inside (with each video's actual file name and file path) ...

Until I understand the above, there doesn't seem to be any point in discussing further. Let me know!

Thanks for getting back to me, sir.

I also forgot to mention that all of these videos are portrait, 1080*1920, and many of their durations are less than 5 seconds long, most of them between 5-10 seconds long.

I did a search on the Internet for videos that were 1080*1920, and found a series with a similar subject, of which I downloaded 8 of those videos to use for my examples below.

1.)   If I were to view them in a default X3 gallery, they are all displayed vertically, above & below each other, as shown HERE in this test gallery.  I also use the Narrowest gallery width option, in order to be able to view most of each video, but even then, on a 1080p display, I am unable to see the entire video vertically.  Additionally, using this method, there is no way for short videos to repeat (if the user wishes), without the user clicking on the Play button every time the video finishes.

2.)   However, by me instead using the block-grid method on a gallery's Content page, I can display multiple videos next to each other on the same line.  They're of course smaller (depending on how many are defined on the Content page)... in this example of this method HERE, I am using small-block-grid-8 medium-block-grid-8 large-block-grid-8.

Additionally, using this method, I can define certain tasks & restrictions, such as autoplay (as long as muted is also used), loop, nodownload, and noplaybackrate.

For the above reasons, those are why I personally prefer to use method #2 above for videos, using the Content page, which allows X3 to display & play videos similar to how it wonderfully displays images, which I am fully aware that it was designed for.

Maybe that could be considered to be a suggestion for a future feature of X3, or X4: to have a Layout specifically for Videos, where that template uses the code similar to my sample above in my first post, but that X3/X4 reads in the filenames of the videos as it does now for images, and then displays the page similar to my sample in item 2) above.  Just a thought.

Also, I realize that the particular gallery that I was mentioning that had 500+ videos is a one-of with that many videos, and I wondered how sluggish it would be with that many videos  :grimacing:.  So I created another test gallery, using those same 8 sample videos, but repeating them multiple times copy/paste/paste/paste/paste/paste/paste , etc.  So that test gallery HERE has about 600 videos displayed... definitely not as fast as just 8 or so videos, but after they cache, they were watchable.  Quite possibly, for external visitors, it could end up being as slow as molasses running uphill in winter  :stuck_out_tongue_closed_eyes:.

Anyway, the above is my reasoning.  Most-likely what I would like to accomplish is not possible without extensive coding, if at all, in which case I will abandon the idea.

Thanks in advance & have a great day.

John

Hi John. I imagined it was something like that, which does make sense if you want to customize the somewhat limited X3 video layout. It could be possible to create a little Javascript that loops through the video files, and then generates a custom video layout from a basic template.

JMM wrote:All of my MP4 files are located in a subfolder (gallery_items_folder in the below sample code), and that subfolder is hidden, so none of the actual MP4 files are displayed, and the gallery itself is empty, and uses only what is coded in the Content page.

This is the first stumbling block however. Javascript can't just "load a list of videos from another folder". That would require a custom PHP script also to "get" the videos in that folder. For this to be reasonable, you would need to have the videos in the SAME page as they are going to display. Then, we can loop through the videos, and re-generate the layout from a different template, as we want it.

Yes it might be sluggish, but it depends on several factors. There are forms of "lazy" loading for videos also, so that they only appear once you scroll to the point where they would appear, but things are now getting increasingly complicated. Surely you don't intend to "autoplay" 600 videos? I can't imagine how that will not be a disaster ...

The answer is yes, it can be done, as long as the videos are on the same page as you intend to display them. However, there are many pitfalls, and I can't guarantee how everything will perform.