Play all videos solution in a gallery. Help needed to make generic
Posted: 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: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:
This thing has a title above the video and 3 buttons below the video.
In the Settings -> Advanced -> Javascript section I added:
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:
Suggestions for improvements are also welcome :-)
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:
Code
<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>
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:
Code
<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>
In the Settings -> Advanced -> Javascript section I added:
Code
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 = "";
}
});
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.
Suggestions for improvements are also welcome :-)