Persistent video player
Written by Benji Weiser
Updated at September 5th, 2024
Table of Contents
What is the persistent video player?
Video is becoming an increasingly important focus across all forms of media, and we want to ensure our clients can fully leverage it. While users are consuming more video content, they also enjoy browsing simultaneously. Platforms like YouTube cater well to this multitasking behavior. To enhance our offering, we've supported this with our audio miniplayer and are now extending similar functionality to video.
Introducing the new persistent video player—an optional content type that can be added to any timeline. This feature allows video content to remain on-screen as users browse. When a video player card is added to a timeline, any video content below it will automatically play in the persistent player. As users scroll past the player, it will either pin to the top of the screen at full width (on mobile devices) or float in the corner (on tablets and larger screens). When one video ends, the next in the timeline will play automatically. Alternatively, users can tap on any other video, which will then replace the current one in the persistent player.
Who can use it?
The persistent video player is for you if your app has a timeline solely of video content and you want to allow your users to browse while they watch. It has no restrictions and is available for any of our supported video providers (Youtube, Vimeo, Brightcove, JW player, MP4, VideoJS).
We are currently aware of an issue with Brightcove and MP4 causing videos to open full screen when playing.
What is needed to get it live?
The persistent video player needs the latest version of Pugpig Express and Bolt Timeline, both of which automatically update server side, so no app update is necessary. All you need to do is add a persistent video card to the timeline you want and all video cards below it will follow the persistent video behaviour.
You can do the above in your CMS by doing the following:
- Go to Content > Video Player Cards.
- Click “Add video player card” and give it a title (this is only for your reference, it won't show in the app).
- Tag it in the relevant timeline via collection tag and we would recommend pinning it to the top of the timeline. While not essential, the UX of having the player anywhere other than the top isn't ideal.
- If you cannot see the option to pin then add:
pugpig_widgets_pinned1to the custom fields on the card.
- If you cannot see the option to pin then add:
- Publish.
If you can't see the persistent video card content type, or are having any difficulties adding it please reach out to Pugpig Support.