2 Attachment(s)
Video Library Plugin - Play Multiple Videos in Same Video Placeholder
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 Attachment 129401 Video Plugin v1 Attachment 129402
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
Re: Video Library Plugin - Play Multiple Videos in Same Video Placeholder
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
Re: Video Library Plugin - Play Multiple Videos in Same Video Placeholder
Gary, I took the liberty of tidying your JavaScript:
Code:
<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
Re: Video Library Plugin - Play Multiple Videos in Same Video Placeholder
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:-O
Gary
Re: Video Library Plugin - Play Multiple Videos in Same Video Placeholder
Quote:
Originally Posted by
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:-O
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
Re: Video Library Plugin - Play Multiple Videos in Same Video Placeholder
Thank you for your help as always Acorn; it's work in progress : https://initiostar.co.uk/demo/JSD/vplugin.htm.
Gary
Re: Video Library Plugin - Play Multiple Videos in Same Video Placeholder
Gentlemen, this is an excellent job. Thank you.
Re: Video Library Plugin - Play Multiple Videos in Same Video Placeholder
Thanks so much guys. I really needed this.
Do I just pop all the code from the plug in into a place holder?
-Bill
Re: Video Library Plugin - Play Multiple Videos in Same Video Placeholder
Quote:
Originally Posted by
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
Bill, step-by-step.
- There is Website HTML Code(body) code, you copy into your design.
- There is a Placeholder with the <video> Tag detail in its code(body).
- There are the button controls with the code in their Links.
- 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