Video Library Plugin - Play Multiple Videos in Same Video Placeholder

[Initiostar]

Last month, with the help of Acorn, we developed an 'Audio Player Plugin that works across all browsers.

In the closing stages, Acorn suggested an interesting extension to the Audio Player with custom controls. It wasn't taken any further at the time to avoid delaying completion of the project, but the basic controls of Play, Pause and Stop can now be seen in the v3 demo https://initiostar.co.uk/demo/Jukebox/.

One can extend these custom controls, but the key to simplicity is the retention of a browser's native controls in the background.

Now the same principles have been applied to a new 'Video Player Plugin' v1' (VPP). In all examples, a mobile-first strategy is deployed and the VPP can be embedded into any website.

https://initiostar.co.uk/demo/JSD/vplugin.htm

All videos are held in a 'Library', a secure hosted directory. The VPP is exported to the same folder as the website in which it is to appear - this avoids any cross-origin issues.

The fun bit was getting square videos (think Instagram & Facebook) to work in the same standard HD format placeholder (1080 x 1920) - best exampled with Parsonage Events 2021

VPP v1 FEATURES

1 - Start with the On/Off Button this Displays the VPP (with a lead video).
2 - In-Play, Play and Pause Buttons are synced with the browser's native controls.
3 - Scroll to top ensures a visitor does not have to scroll up from the list.
4 - Separate JS functions for Display, Locate (video and play), In-Play, Play and Pause
5 - The VPP file size is less than 300KB and loads quickly (there are no assets on the page).
6 - All the JS is contained (for now) in the website Body(HTML).

KNOWN ISSUES

[i] 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.
[ii] Firefox does not auto-start the holding video (due to a picture-in picture conflict).

CURRENT FILES

Audio Plugin v3 Jukebox-v3.xar Video Plugin v1 JS-Video Player.xar

I'll post an update when the issues have been resolved.

Very many thanks to Acorn for the audio idea - any help on the best way to resolve [ii] appreciated. Need to retain the On/Off button and add toggle into the JS function vPlayer(n).

Toggle ON per video needs to check the Player if being displayed, if not display and play, Toggle OFF returns the holding video (visitors).


Gary

[Acorn]

Gary, you have been having fun.

Square videos - I would have tried a background-image for the full width. Second idea might be a transparent video IFRAME over a static under-image. Am I close?

I have no idea about the FF issue. I might just map out the entire video Tag with a static image until a full video is picked. How about just setting the source to a JPEG? It goes blank.
Better seems to be to set the width to 0%.

Acorn

[Acorn]

Gary, I took the liberty of tidying your JavaScript:

<script>
var view = document.getElementById('vidplayer');


function display() {
  showing = view.style.display;
  view.style.display = showing === "none" ? showing = "block" : showing = "none";
}


var source = 'https://initiostar.co.uk/assets/';
function vplayer(vid) {
  locate = view.setAttribute('src', source + vid);
  window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
}


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

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

</script>

Acorn

[Initiostar]

Thank you Acorn,

Can I ask you how you could extend the 'vplayer' function to first check whether the player is showing? if true, the function operates as normal, if false, show the player, then execute the 'vplayer' function.

Here's the thought process: I'd like to keep on the On/Off button (for some more fun), but now if I pick a video on the list and the player isn't showing I'll get the audio, but not the picture.

Thanks again, the most code I've probably written in 40 years

Gary

[Acorn]

Thank you Acorn,
Can I ask you how you could extend the 'vplayer' function to first check whether the player is showing? if true, the function operates as normal, if false, show the player, then execute the 'vplayer' function.
Here's the thought process: I'd like to keep on the On/Off button (for some more fun), but now if I pick a video on the list and the player isn't showing I'll get the audio, but not the picture.
Thanks again, the most code I've probably written in 40 years
Gary

Gary, if I read you right, you could move the showing variable to the top (outside any function) just after the view declaration: var showing = view.style.display;

Then you could use !view.paused - so when playing the value is true. Add in showing. With a value of none then you know when the video is playing but not showing.

if (!view.paused && (showing == "none")) ( /* do something when playing but not showing */ vplayer("video.mp4") }

Acorn

[Initiostar]

Thank you for your help as always Acorn; it's work in progress : https://initiostar.co.uk/demo/JSD/vplugin.htm.

Gary

[Spamiky]

Gentlemen, this is an excellent job. Thank you.

[bwood]

Thanks so much guys. I really needed this.
Do I just pop all the code from the plug in into a place holder?
-Bill

[Acorn]

Thanks so much guys. I really needed this.
Do I just pop all the code from the plug in into a place holder?
-Bill

Bill, step-by-step.

1. There is Website HTML Code(body) code, you copy into your design.
2. There is a Placeholder with the <video> Tag detail in its code(body).
3. There are the button controls with the code in their Links.
4. There are the videos with code in their Links.

What Gary is offering is total designer freedom like placing a static image behind the player.
I recall Egg added stage curtains to one of his presentations.

Acorn