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