Video Jukebox using files from my Magix Album Site

[Acorn]

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

[Initiostar]

John,

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

Gary

[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/

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

[Initiostar]

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

[Initiostar]

@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.

[browj2]

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

[Initiostar]

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.

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:



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

Gary

[browj2]

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

[browj2]

@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.

Nathalie VidPlayer.xar

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

[Acorn]

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

Acorn