Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
JMM
Experienced
Topic Author
Posts: 154
Joined: 02 Aug 2021, 11:18

Anyone know how to loop MP4 in a URL, or embed videos on Content page & have them display similar to Justified layout?

14 Feb 2024, 13:14

Hello, folks,

In the past I have posted questions about how to do things that X3 was never designed to do, and in many cases incapable of doing (sorry, Karl), and quite possibly it is liewise impossible too to do what I am asking below  :upside_down:.

I realize that X3's main purpose is for images, but with the added benefit of being capable of displaying videos in various ways.  On my varios X3 websites, I have a few galleries that display videos using 2 different methods, depending on the gallery: either

embedded in the Content tab using <video>; or
natively in X3 from the gallery's Gallery page.

My preferred method is #2, where I have the gallery use the Justified layout with a Wide gallery width, and then I have 2 items for each video:
  1. the video itself, which I hide; and
  2. an image that when the user clicks on it, it plays that hidden video.
Associated with that above image, in the link section, I have a pointer to that hidden video, like this:
Code
{path}filename1.mp4?autoplay
So when a user clicks on any image in that Justified gallery, rather than the actual image being displayed by X3 in a popup, instead the hidden MP4 video is played (by way of the _self option).

As an asside, and unrelated to the questions in this post, for those galleries I also choose to add the following to those relevant galleries' CSS:
Code
.gallery.hover .image-container:before {
    content: "\f04b";
}
This works beautifully, except in some galleries I need those MP4 videos to loop, but unfortunately I have not been able to find how to loop them (if it's even possible).

So for now, I have been using method #1 (in the Content tab), because within the <video> tag I can use loop option, as an example:
Code
<video class="x3-style-frame" preload="metadata" controls controlslist="nodownload noplaybackrate" loop width="100%"
     poster="{{path}}filename1.jpg">
          <source src="{{path}}filename1.mp4" type="video/mp4">
               Your browser does not support the video tag.
</video>
The problem with using this embedded method, is the layout of the items in the gallery's Content page.  I've tried various different methods, including for example:
Code
<div>
     <ul class='small-block-grid-1 medium-block-grid-2 large-block-grid-3'>
          <li>
               <video class="x3-style-frame" preload="metadata" controls controlslist="nodownload noplaybackrate" loop width="100%"
                    poster="{{path}}filename1.jpg">
                         <source src="{{path}}filename1.mp4" type="video/mp4">
                              Your browser does not support the video tag.
               </video>
          </li>
     </ul>
</div>
But I wish for the layout of the items, when using the embedded <video> method in the gallery's Content page, to look exactly like it would when using a gallery with the Justified layout.

So my questions are:
  1. Does anyone know if it is possible to loop an MP4 video in the URL, similar to the filename.mp4?autoplay parameter?
  2. Is there a way to embed items in a gallery's Content page & have those items display & react exactly like if they were in an X3 gallery using the Justified layout?
Thanks in advance & have a great day.

Regards,
John 
Location: Burlington (Toronto-ish), Ontario, Canada
Self-hosted using Abyss Web Server:   AuroraWings.me   |   GalleryWings.com   |   PanAurora-Studio.com   |
Externally-hosted using LiteSpeed/Apache Web Server:   GenealogyWings.com/galleries   |
 
User avatar
JMM
Experienced
Topic Author
Posts: 154
Joined: 02 Aug 2021, 11:18

Re: Anyone know how to loop MP4 in a URL, or embed videos on Content page & have them display similar to Justified layou

14 Feb 2024, 13:32

A sorta work-around that I've been using, and I use an example of a 2-second-long very-low-res animated GIF that I converted to MP4 and then upscaled to 1080p, is to take that MP4 file & duplicate it 450 times & merge them, which gives me a 15 minute MP4 file  :relaxed:.  The 2-second-long upscaled 1080p MP4 is 1.2 MB, but the resulting 15-minute-long MP4 is 54-MB long!

Another short 42-second-long MP4 is a whopping 341-MB in size, but if I try to duplicate that video 21 times to get a video that's about 15-minutes-long, the resulting file would be more than 7-GB in size  :stuck_out_tongue_closed_eyes:.

Converting those MP4s to WEBMs is an option in order to reduce their filesizes, but they're still huge.  Hence me trying to find a way (if possible) to have those videos repeat/loop by passing a parameter in their respective URLs.
Location: Burlington (Toronto-ish), Ontario, Canada
Self-hosted using Abyss Web Server:   AuroraWings.me   |   GalleryWings.com   |   PanAurora-Studio.com   |
Externally-hosted using LiteSpeed/Apache Web Server:   GenealogyWings.com/galleries   |
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13998
Joined: 30 Sep 2006, 03:37

Re: Anyone know how to loop MP4 in a URL, or embed videos on Content page & have them display similar to Justified layou

15 Feb 2024, 01:35

JMM wrote: Is there a way to embed items in a gallery's Content page & have those items display & react exactly like if they were in an X3 gallery using the Justified layout?
Might as well clarify this first. Unfortunately, that would require a large amount of design and code, also Javascript. X3 is a gallery CMS of course, and a lot of time has gone into creating the layouts, and you can't just "use" it for your own custom content. X3 also uses Javascript for the justified layout.
JMM wrote:Does anyone know if it is possible to loop an MP4 video in the URL, similar to the filename.mp4?autoplay parameter?
Loop is assigned as an attribute loop="true" for <video> tags, and since you are not building the html yourself for videos in the popup, then you can't control the html either. It would require some really hacky solutions to achieve something like this, sorry.
 
User avatar
JMM
Experienced
Topic Author
Posts: 154
Joined: 02 Aug 2021, 11:18

Re: Anyone know how to loop MP4 in a URL, or embed videos on Content page & have them display similar to Justified layou

15 Feb 2024, 01:56

No problem.  I figured that was the case, but thought I would ask anyway, to be sure.

Thanks, and have a great day.
Location: Burlington (Toronto-ish), Ontario, Canada
Self-hosted using Abyss Web Server:   AuroraWings.me   |   GalleryWings.com   |   PanAurora-Studio.com   |
Externally-hosted using LiteSpeed/Apache Web Server:   GenealogyWings.com/galleries   |