Video Jukebox using files from my Magix Album Site

[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

[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

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

[browj2]

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

[Initiostar]

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.

[browj2]

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

[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

[Initiostar]

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

[Acorn]

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