Video Jukebox using files from my Magix Album Site

Hi,

Further to my post about using video files that are stored on the Magix Album website, I managed to get them to open separately in different widgets on different pages. However, I would like to use the Video Player Plugin developed by Initiostar with help from Acorn such that I can get the file from the Magix album site instead of from an on-linr Assets folder. The problem is limited space for storing the files.

The code is like this: var source ='http://my_webpage/Assets/';

Is there a way to do this, like putting the links somewhere into the web page and referencing these to get the videos?

Thanks,
John CB

References
The following is the thread for the Initiostar Video Jukebox plugin.
https://www.talkgraphics.com/showthr...hlight=jukebox

The following thread allows one to select a video from a computer drive/thumb drive:
https://www.talkgraphics.com/showthr...hlight=jukebox

Link to my thread about using videos stored in my Magix on-line Album:
https://www.talkgraphics.com/showthr...ite&highlight=

John, can I assume all the videos have a root location?
They can be in any number of subfolders as well so what you need to do is to split the path of each into a common bit and a specific to the video bit.
The common bit is added to the source variable ending with a slash.
The specific bit is the ongoing path all the way to the .mp4 bit.
This forms the link as added to text on the page as javascript: vplayer('path/video-title-filename.mp4')

If there is no common part set souce to an empty string ("") and the links then will be the full web address.

Acorn

Hi Acorn and thanks for replying,

Wonderful!

For future reference

Here is a typical link:

http://www.magix-photos.com/permacod...1641770A641E0C

In the Website HTML Code (Body), I changed the var source to:

var source = 'http://www.magix-photos.com/';

For the placeholder for the particular video, I put:

javascript: playPause('permacodemedia?perma_code=C11E68E0AADE1 1ECAA1641770A641E0C');

so no need for anything that indicates mp4.

Has the problem for turning on/off the display been resolved as indicated by Initiostar in the notes as Known Issues, "v2 will be enhanced with a toggle function for each video, that conditionally recognises whether the the VPP display is on or off. Otherwise if you hit a video, you get audio and no picture"?
Right now, the user has to turn on the display with the Display button.

Also, how should I handle the 'Link to' on the on/off button? I can't add a 'visitors.mp4' as such, but I can add another video and put the link in here. However, what is the video supposed to do? I put a link to one and it ran.

javascript: void vplayer('visitors.mp4');display();

John, I would try changing function playVid() { view.play(); } to function playVid() { view.style.display = "block"; view.play(); }

It's Initiostar's way of playing a short cut as a filler rather than have a dead space. I thought that had been removed in v2. i only remember it in v1.

Acorn

John,

I can confirm that splitting the link works and here is a JB demo: Attachment 131782 with an update to the buttons.

The spilt as I expect you have discovered is to change the var: var source = 'http://www.magix-photos.com/' - thereafter the links are javascript: vplayer('permacodemedia?perma_code=C8131670218211E 98DAE5A490A641E0B') where this is the specific link to your video.

Acorn kindly modified the code a while back and that is included in this version - I have removed the old design notes in your demo. Should you have a long list of videos you can shorten the height of the embedded placeholder as required and use a window scroll to bring a video back into view (that's in the updated example).

The original generic demo now has two additional formats here: https://initiostar.co.uk/demo/EmbedVideo/ - What you will see is I have added video thumbnail links instead of the the list format (ignore the page-based video as it is not relevant here) - this is the format I use for my own website

Demo: Attachment 131783 - the code is slightly different, but the principles are the same.

Gary

There is still a minor issue with the Close button - it correctly pauses the video and closes the display - however if you immediately hit the play button it restarts the video in the background (i.e. audio without the image) - not sorted that out atm and I may need Acorn's help - it could reload the video maybe but not start it.

Acorn,

Thanks for that. Gary has given me the modified version.

Gary,

Thank you very much. That is great!
I see what you mean about hitting Play after hitting Close. I modified the file that you sent me to put the image over top of the video placeholder, gave the image a name (videocover) as you indicate in the site instructions. It works fine except for the Close-Play problem.
I also used an image as a test instead of the placeholder with text, following your instructions.

I'll get back on it tomorrow changing the theme to match my wife's site. I had gone through each of the video pages and modified the script to get the videos to play and I'll be scrapping that. The old script from Magix used flash (it still provides the code).
I much prefer the jukebox type as having a page per video seemed to be redundant. I wonder why Xara didn't make a proper widget for jukeboxes.

I'll be interested in seeing how the mobile variant handles this on my cell phone. Currently (not with your model), when I turn the phone sideways, I get the main variant and the video plays but I can't see it. Also, in mobile mode, clicking on full-screen also turned it landscape. Strange.

Thanks again,
John CB

John,

Reworked v2 to v3 https://initiostar.co.uk/demo/JSD/vplugin.htm > Attachment 131784

The display function is removed and replaced with the video cover from the image link version; the outcome being now that the video controls are hidden when the video is inactive; embedded example here: https://initiostar.co.uk/demo/EmbedVideo/

This solves the issue of inadvertently touching close followed by play (as play becomes hidden on close).

v2 had an export 'scroll' now changed to website; there is an issue somewhere with scroll and mobile iOS - works as expected on Android and should be OK now on iOS mobile

Attachment 131785

The embedded placeholder for the VPP might need a video poster - quirky issue with Firefox atm.

Updated the code to v3.

Let us know how you get on,

Gary

Hi Gary,

Thanks for the updated version.

Here is the result:

http://jcbrown.xara.hosting/Nathalie...er/vplugin.htm

Try as I might, I couldn't get rid of the underlined text. No problems with the MouseOver, just the MouseOff text. It happens on any text that has a link. Any ideas as to how to change this?

Next step will be to try adding it to the main website as per your instructions.

Thanks,
John CB

John, look at Web Properties > Website > Web link colours and untick Underline text links.

If not there, there will be some CSS around with "text-decoration:underline;" - change this to "text-decoration:none;".

Acorn

Acorn,

It was that easy? Shows how much web design that I've done.

Thanks,
John CB

Quote:

---

Originally Posted by browj2

Acorn,
It was that easy? Shows how much web design that I've done.
Thanks, John CB

---

...and already re-published.

People seem to forget the fluidity that Xara web work brings.

Acorn

John,

Looking great :D - I would remove the page shadow though when you embed the plugin.

Gary

Hi Gary and Acorn,

Here is the result with the video player added as a plugin and I also used your Jukebox for the music:

http://nathalieasselin.com/

In the main variant, under video, clicking on a lower one does not move back to the top. Strange, as it goes to the top in the plugin version - http://jcbrown.xara.hosting/Nathalie...er/vplugin.htm

For the mobile variant, I ran into problems with the width in both portrait and landscape modes. Also, if I click on the full-page button, it switches to landscape (if in portrait) and freezes on the videocover; the video keeps playing behind it.

Any suggestions?

Thanks,
John CB

Quote:

---

Originally Posted by browj2

Hi Gary and Acorn,

Here is the result with the video player added as a plugin and I also used your Jukebox for the music:

http://nathalieasselin.com/

(1) In the main variant, under video, clicking on a lower one does not move back to the top. Strange, as it goes to the top in the plugin version - http://jcbrown.xara.hosting/Nathalie...er/vplugin.htm

(2) For the mobile variant, I ran into problems with the width in both portrait and landscape modes. Also, if I click on the full-page button, it switches to landscape (if in portrait) and freezes on the videocover; the video keeps playing behind it.

Any suggestions?

Thanks,
John CB

---

John, let's deal with the two issues, but in reverse order:

(2) Your Video Plugin width AFAICT is 760px wide and your mobile variant is 600px wide; reduce the Video Plugin width to be the same size as your mobile variant and apply Scale-to-fit-Width with (say) a maximum of 800px; the width of your desktop variant can then be up to 800px wide. My go-to-test is the demo https://initiostar.co.uk/demo/EmbedVideo/ which AFAICT (so far) works correctly. When I open the mobile browser in portrait mode, go full screen, it automatically shows the video in landscape - rotate the mobile back to portrait, it still shows the video, but reduces its size to the fit the width of the display, remove full screen and it returns to the holding web page (at least with Chrome) - iOS might work slightly differently.

(1) The approach here is bound (or currently limited to) by the fact that scroll-to-top applies to the Video Plugin - and it scrolls therefore to the top of its placeholder. When you scroll the placeholder out-of-view on the main page, it is out-of-view until the visitor scrolls in back into view. Therefore, the short-cut is to reduce the height of the placeholder such that it is (generally) always in view. Try the desktop placeholder height around 800px for starters and near to the top of the page - what you will see then is that as you select a video from the list by scrolling down to it, that the Plugin scrolls to the top of its placeholder and shows the video.

The extension to this approach would be to ensure that the placeholder 'sticks' at a specific height in px from the top of the main web page. A bit more code for sure and I've not ventured that far as yet. Acorn has probably done this at sometime, but it's a bit tricky.

Best to see it we can get it working the same as the demo first,

Gary

@Acorn, you may have answered this before?

WRT (1) in the post above, is there a way to have the top of the video plugin placeholder scroll into view when Video plugin placeholder is longer than the browser window? If this were the case atm, the visitor would have to select the video and scroll upwards to see it.

The workaround which is OK is to reduce the height of the embedded placeholder / page such that (most of the time) the top of the placeholder is in view e.g. https://initiostar.co.uk/demo/EmbedVideo/ Seems less of an issue on the mobile in the example because of a more portrait format.

Thanks,

Gary

@JB BTW my error, I think your mobile variant is 620px not 600px, so I try the plugin width @ 620px.

Hi Gary,

I'm back at it.

I modified the plugin to make it narrower (640) and Scale to fit width max of 800. In the main website, I reduced the height of the placeholder. This adds a vertical scrollbar that I was trying to avoid, but selecting a lower video scrolls back up to the video window.

The mobile variant page size is actually 480. I unlocked Scale to fit, max. now 680.
I played with the plugin height on the mobile var and there is seemingly no change and it works. Selecting the last video jumps back up to the video window. Great!

I noticed that selecting a video turns on the mouseover layer (green) and leaves it selected. This is what I want, however, it doesn't do it in the main var, only mobile var. Is there some way to get the same in the main variant? The same happens with the audio jukebox (Musique).

Do you find that the videos are slow to load?

The mob version has (Mob) in the footer and the version is today's date plus a, b, c.. I added this so that I could easily tell which variant and version was showing up. Before modifying the scale to fit, I would get the main variant in landscape mode on my cell phone.

As for my problem of going full-screen, it seems to be related to my phone and probably the older Android version 6. It works fine on my wife's cell phone. She's pleased with the result.

I'll try to convince her that it would be best to remove the image at the top of the Video and Musique pages to get the contents closer to the top, at least on the mobile variant.

Thanks,
John CB

Hi John,


http://nathalieasselin.com/videos.htm > Great result; it works well and I like the consistent in-play, pause and stop icons for both the Video and Audio plugins.

I would not change the mobile version; there is a consistency across the desktop and mobile styles that looks good and the video positions well in the mobile layout.

Attachment 131797 Attachment 131798

Quote:

---

I noticed that selecting a video turns on the mouseover layer (green) and leaves it selected. This is what I want, however, it doesn't do it in the main var, only mobile var. Is there some way to get the same in the main variant? The same happens with the audio jukebox (Musique).

---

A touch device does not support 'Hover /MouseOver' in the same way as a desktop/laptop - on a touch device where the link has a MouseOver, the MouseOver state is retained until the visitor touches the screen again; hence in your mobile variant you (temporarily) see the MouseOver 'green' - this is the same for the Audio plugin.

To achieve a similar effect on a desktop, you would create a link with an additional MouseDown state; the MouseDown state would have the same attributes/ colours as the MouseOver state:

Attachment 131796

Now that you have it working, not sure I would set about changing all the links. The videos seems to load OK for me here.

Great job :D

Gary

Hi Gary,

I took your advice and left well enough alone. I did some cleaning up.

I noticed that there was a slideshow that didn't work, just a simple thumbnail gallery that I did several years ago. Fortunately, I found a thread with the solution thanks to Acorn.

So, thank you both for your much-appreciated assistance.

John CB

@Acorn @Initiostar,

My wife has asked me to change the source to YouTube because Magix' album site takes too long to stream.

For the Vidplayer file, I changed Web Properties to:

<script>
var view = document.getElementById('vidplayer');
var source = 'https://www.youtube.com/embed/';

function vplayer(vid) {
if (view.style.display === "none") { view.style.display = "block"; }
locate = view.setAttribute('src', source + vid);
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
document.getElementById('videocover').style.displa y = "none";
}

function pauseVid() { view.pause(); }

function playVid() { view.play(); }

</script>

And for the particular video, I changed the link to:

javascript: vplayer('TarTMx_uZ1c')

Doesn't work. Thie video doesn't play.

Attachment 133295

I only did the first item; I haven't put the others on YT yet.

The link to the first one is:

https://youtu.be/TarTMx_uZ1c

Could either of you please guide me in the right direction?

For reference, the previous lines were:

var source = 'http://www.magix-photos.com/';

Link:

javascript: vplayer('permacodemedia?perma_code=216757B0AA2711E CA58F7BD20A641E0B')

Thanks,
John CB

John, the answer was in the embed part.
You need to change the <video> tags in the vidplayer Placeholder to <iframe> instead.

Acorn

Hi Acorn,

Thanks for helping out, but I'm lost. I don't see any <video> anywhere. Could you please explain more?

Also, why doesn't just changing the source from the Magix site to YT work?

Thanks,
John

Quote:

---

Originally Posted by browj2

Hi Acorn,
Thanks for helping out, but I'm lost. I don't see any <video> anywhere. Could you please explain more?
Also, why doesn't just changing the source from the Magix site to YT work?
Thanks,
John

---

John, under the video cover image is a White Placeholder, the code is in its Body.
The 'embed' is expecting to be put into an IFRAME, the Magix site is probably playing MP$s whereas YT is a force unto itself.

Acorn

Hi Acorn,

Got it! I had completely forgotten about the placeholder hidden under the image.

In the following, I replaced "video" with "iframe"

Thank you kindly,
John

John,

Do the individual custom controls for in-play, pause and stop still work when you switch to YouTube?

Another idea could be to use 'poster' in the video tag e.g. https://initiostar.co.uk/demo/video-poster/vplugin

When I looked at your current site, for me anyway, it loaded OK, but a custom poster could match the overlay too, though not in my demo here.

Hi Gary,

I haven't put the modified site up yet, I ran into the daily YouTube limit. I should finish it late today. There are other changes to be made.

No, the buttons do not work with YouTube. Clicking on the Stop button does not stop but puts the overlay image back on blocking the YT controls and the video continues to run.

The alternative is to remove the buttons, but it would be good to have a way to stop the YT video and put back the image hiding the controls and video window.

Any solution?

BTW, one of your test sites is rather messed up. I'll try to find it and let you know.

Thanks,
John

@Initiostar
Hi Gary,
Further to my last post, I found a site that shows how to do up the buttons for YT videos (I think).

https://blogs.perficient.com/2021/01...me-player-api/

I have no idea how to modify the scripts in my file. Any help would be appreciated.

Attached is the most recent XAR file for the video jukebox with links to the YT videos, not the main site that calls it.

Thanks,
John CB

Quote:

---

Originally Posted by browj2

@Initiostar
Hi Gary,
Further to my last post, I found a site that shows how to do up the buttons for YT videos (I think).

https://blogs.perficient.com/2021/01...me-player-api/

I have no idea how to modify the scripts in my file. Any help would be appreciated.

Attached is the most recent XAR file for the video jukebox with links to the YT videos, not the main site that calls it.

Thanks,
John CB

---

John, not considered how to change the button code for YT. I think my start point would be to look at embed options and Google API information. Away Atm..

John, my original concept for this approach was to use the HTML5 <video> tag to its fullest and avoid extra dependencies.
Switching to YT IFRAME and also throwing in the YT API is fairly excessive and while @Initiostar may like the challenge, it is getting too niche so when others start asking for variations, the coder is at YT's whim versus a W3I standard.

There are simple things you can do to exploit the current capabilities.
The first does not change any code, instead you append a query string to the end of the YT Video ID.
An example is ?autoplay=1&start=secsAfterStart&end=secondsBefore End&modestbranding=1, in which you should add in your numeric values like:
?autoplay=1&start=9&end=2&modestbranding=1, giving a Link - javascript: vplayer('TarTMx_uZ1c?autoplay=1&start=9&end=2&mode stbranding=1') for Les Gailurons.

Note autoplay will not fire in most browsers playing videos with audio to protect eardrums and hearts.

Look at https://developers.google.com/youtub...ers#Parameters.

The next is to advise what can be achieved:

• Spacebar or [k]: Play / Pause
• Arrow Left: Jump back 5 seconds in the current video
• Arrow Right: Jump ahead 5 seconds in the current video
• Arrow Up: Volume up
• Arrow Down: Volume Down
• [f]: Toggle full-screen display
• [j]: Jump back 10 seconds in the current video
• [l]: Jump ahead 10 seconds in the current video
• [m]: Mute or unmute the video
• [0-9]: Jump to a point in the video. 0 jumps to the beginning of the video, 1 jumps to the point 10% into the video, 2 jumps to the point 20% into the video, and so forth.

I didn't know about the last one!
You could create an overlay of these keypresses to cover the current controls.

The final approach would be to create buttons when pressed that send the keycode of the required key press to the IFRAME.

Acorn