This web-component was built because I needed a video player that could handle YouTube, Vimeo, and self-hosted videos and support uploading a custom poster frame. It also unifies the video events events work consistently no matter which video type your page includes. The examples below will display event notifications to demonstrate the events and data you can expect.
The web-component is also keyboard accessbile and has been designed for accessbility. Feedback is welcome to make this as accessbile as possible.
This web component can be found on NPM at https://www.npmjs.com/package/@morton-studio/video-player and the GitHub repo is at https://github.com/johnfmorton/video-player.
A YouTube-hosted video describing the Bespoken Craft CMS plugin that I created.
<video-player
src="https://www.youtube.com/watch?v=bdFROVpgeZA" <-- Required
allowfullscreen <-- Optional
aspect-ratio="16x9" <-- Default is 16x9; Also supports 4x3, 1x1, 9x16
playbutton <-- Optional
posters='{
"webp": "you-tube-bespoken.webp",
"jpg": "you-tube-bespoken.jpg"
}'
posteralt="A robot with a speech bubble next to a sign saying 'Bespoken' and a YouTube logo." <-- Optional
></video-player>
A Vimeo-hosted video of fountains in Nice, France.
<video-player
src="https://vimeo.com/166865309"
poster="vimeo-nice-fountains.jpg"
allowfullscreen
playbutton></video-player>
A self-hosted video of a very good boy.
<video-player
src="cat-head-rub.mp4"
allowfullscreen
aspect-ratio="9x16"
playbutton
poster="self-hosted-9x16.jpg"></video-player>
A YouTube-hosted short of my pen plotter in action.
<video-player
src="https://www.youtube.com/shorts/cWRmknW0hjM"
allowfullscreen
playbutton
aspect-ratio="9x16"
poster="youtube-shorts-9x16.jpg"></video-player>