X3Photo Gallery Forums

solmea · 11 Mar 2023, 16:03

I tend to film show dance performances and upload the videos to my personal X3 gallery with password protection. So the dancers can checkout their dances and friends and famillies can also check it out.

I am using the method you once explained to me with disabling all movies and their poster images in the Gallery. The topic is here: viewtopic.php?f=57&t=9923&p=45352
And then using customized Settings -> Content using the following as an example for one video:

<h2  class="title" itemprop="caption">Video title</h2>
<video width="100%" preload="metadata" controls  poster="{{path}}Video title.jpg">
<source src="{{path}}Video title.mp4" type="video/mp4">
</video>

This is fairly simpleto do. Though annoying if you have to add 40 videos to it...

Now I went one step further and created a javascript video tag solution which is able to :
* play multiple videos after eachother
* have buttons for next and previous video
* Update the title with the videoname
* a button to increase the video width from 100% to 150%.

So It might get a bit like Youtube, but then only to view in my case all demo dance teams in one row on for example a TV.

First a disclaimer I am not an in depth CSS and javascript developer, but I can find my way to get things done :-)

If you want to see an example first: https://gallery.kwenie.org/Openbare-Fot ... Carrousel/

So first we setup in the Content section I added:

<h2><div id="ViewAllTitle">This video is being shown: Video title</div></h2>
<div id="ViewAllScreen" >
  <video  width="100%" src="{{path}}Video title.mp4" id="myvideo" controls style="background:black">
  </video>
  <div style="width: 100%">
    <table width="100%">
    <tr><td>
    <button id="myPrevButton">Prev</button>  </td>
    <td align="center"> <button id="myBiggerButton">Toggle Wide View</button>  </td>
    <td align="right"> <button id="myNextButton">Next</button> </td></tr>
    </table>
  </div>
</div>

This thing has a title above the video and 3 buttons below the video.

In the Settings -> Advanced -> Javascript section I added:

var myvid = document.getElementById('myvideo');
var myvidTitle = document.getElementById('ViewAllTitle');

var mybutton = document.getElementById('myNextButton');
var myprevbutton = document.getElementById('myPrevButton');
var mybiggerbutton = document.getElementById('myBiggerButton');

var myvidsBaseUrl = "https://yourdomain.com/content/Path/to/gallery";
var myvids = [
  "1 Video1.mp4", 
  "2 Video2.mp4",
  "3 Video3.mp4",
  "4 Last video.mp4"
  ];
var activeVideo = 0;

myvid.addEventListener('ended', function(e) {
  // update the active video index
  activeVideo = (++activeVideo) % myvids.length;

  // update the video source and play
  myvid.src = encodeURI(myvidsBaseUrl+myvids[activeVideo]);
  myvidTitle.innerHTML = "This video is being shown: "+decodeURI(myvids[activeVideo]).replace(/.mp4/g, " ");
  myvid.play();
});

mybutton.addEventListener('click', function(e) {
  // update the active video index
  activeVideo = (++activeVideo) % myvids.length;

  // update the video source and play
  myvid.src = encodeURI(myvidsBaseUrl+myvids[activeVideo]);
  myvidTitle.innerHTML = "This video is being shown: "+decodeURI(myvids[activeVideo]).replace(/.mp4/g, " ");
  myvid.play();
}); 

myprevbutton.addEventListener('click', function(e) {
  // update the active video index
  activeVideo = (--activeVideo) % myvids.length;
  if ( activeVideo == -1 ) 
      activeVideo = myvids.length-1;

  // update the video source and play
  myvid.src = encodeURI(myvidsBaseUrl+myvids[activeVideo]);
  myvidTitle.innerHTML = "This video is being shown: "+decodeURI(myvids[activeVideo]).replace(/.mp4/g, " ");
  myvid.play();
}); 

mybiggerbutton.addEventListener('click', function(e) {
  // Check on marginLeft for the toggle button
  if (myvid.style.marginLeft == 0 || myvid.style.marginLeft == "0px" ) {
    myvid.style.width = "150%";
    myvid.style.marginLeft = "-175px";
  } else {
    myvid.style.width = "100%";
    myvid.style.marginLeft = "";
  }
});

This works for me and some people were already very excited with this. But for me to maintain the video's it might be handy to improve.
So my question is:

Can I use {{path}} in javascript somehow? So I don't have to fill in the var myvidsBaseUrl myself.
Can I get a list of the .mp4 files in an easy way? With that I would not need to feed all video filenames myself.
The width of the video goes from 100% to 150% in my setup that was the max I could set the div to as the gallery was not wider.. I did not test it in a differen setup.

As said I am not a javascript wizard, but a pointer in a direction would help me greatly.
Suggestions for improvements are also welcome :-)

11 Mar 2023, 22:57

Good job there! I can see that you have nice a nice video carousel slider, although your post doesn't explain exactly what you want to achieve so I could think if there are any better solutions. Some answers:

solmea wrote:Can I use {{path}} in javascript somehow? So I don't have to fill in the var myvidsBaseUrl myself.

You mean the {{path}} url for each page, so that you don't need to fill it on a per-page basis? That would only be possible if you added the Javascript directly into the "content", as that's where {{path}} vars are converted dynamically. Perhaps the next question is better:

solmea wrote:Can I get a list of the .mp4 files in an easy way? With that I would not need to feed all video filenames myself.

In your case, this would perhaps be a better solution. Something like this:

Don't HIDE the videos from the page (like you have done now). Instead, allow them to render automatically in the default vertical stacked layout.
Hide the videos with CSS (display: none) so that they don't render on screen, but are still available in the DOM.
In Javascript, simply loop through the videos and extract the paths into an array.
Loops through the paths (similar to your current Javascript), and add the videos into a carousel module.
At this point, you wouldn't really need "myvidsBaseUrl" since the path contains the full root-relative path.

solmea wrote:The width of the video goes from 100% to 150% in my setup that was the max I could set the div to as the gallery was not wider.. I did not test it in a differen setup.

There are only a really a couple of ways you can handle dynamic scaling of a video.

Scale the video to full width of the container, which is currently default view I guess.
Scale the video to full screen, but this requires setting position fixed/absolute, essentially temporarily detaching it from it's container.

For #2, this seems pointless as there is already a native "fullscreen" button in the video controls. In my opinion, "wide view" is pointless anyway ... If I want to view/focus on the video, I will simply use the native video "fullscreen" button anyway. This saves a lot of energy from having to adjust your solution to cover all scenarios and devices, as the effect is currently wrong in mobile.

If you do want to keep an improved solution based on #1, I would do this:

Set the width of your "context" module to "wide" allowing it so scale 100% of the available area between left menu and side of screen. The video will now by default cover the entire available area.
If you want the video to be smaller by default, you can use CSS max-width (when not toggled "wide").
To limit text width, you would also need to add the text inside a container with max-width.

In my opinion, it doesn't provide much benefit and not worth the technical hassle. I can use the video fullscreen button.

solmea · 26 Mar 2023, 04:57

Thanks for the quick feedback mjau-mjau and my reply is a bit delayed by busy real life matters.

But your feedback is appreciated and I will give your idea to automate the lot a spin. It will stretch my coding skill to the limits, but I like to learn so that is okay :-) I will do some experimenting with the wide setting for the context module, but for now the 150% is good enough for me.

I am not sure how many people are using this gallery software for showing video-recordings. So I thought I put it here in this 'questions' section, not knowing if there is a better place. But I thought at least to share my solution if some else would need it.

X3Photo Gallery Forums

Play all videos solution in a gallery. Help needed to make generic3 posts

Play all videos solution in a gallery. Help needed to make generic

Re: Play all videos solution in a gallery. Help needed to make generic

Re: Play all videos solution in a gallery. Help needed to make generic