From BricksExtras v1.5.4+ we have the ability to build our own player for playing videos/audio and designing our own custom player UI in Bricks. One of key features of the media player is supporting HLS, meaning we can use popular video hosting/streaming services like Bunny Stream.
Advantages of Bunny Stream
Although it’s easy to just upload an mp4 video direct to WordPress and add in the source URL to the player to get started quickly, there’s a lot of benefits to using a HLS provider like Bunny Stream for video hosting.
It doesn’t just offer faster video playback across the world for low cost (while taking the load off your server), but when hosting with Bunny Stream it opens up additional features, which the Media Player element takes full advantage of..
– Automatically transcoded into multiple resolutions.
Upload one video file (your mp4 for example) and it will automatically be transcoded into many resolutions (which resolutons are included can be customised in Bunny settings).
Bunny stream will then provide a single ‘HLS’ URL (ending with .m3u8) to use in the player for the source URL.
The media player will then pick up the various resolutions from that URL and importantly, default to the best available quality for the current user’s bandwidth & internet connect type. (This is different to if using Bunny’s own player that comes as an iFrame, which instead will default to the lowest quality until they can detect the bandwidth – often leading to a blurry first few seconds of playback – not ideal).
The various quality options will also be made available from the settings menu to change if preferred.
– Automatic transcribe into multiple languages
Bunny stream has a useful ‘Transcribe AI’ feature, which means it can automatically detect and convert speech from videos to text. This can be used to auto-generate captions and translations in over 57 languages, rather than adding manually. Once enabled, it will do it automatically for every new video uploaded.
The media player will fetch any captions associated with the video from Bunny Stream (whether AI generated or added manually) & make them available from in the settings menu and provides a ‘caption toggle’ button to show/hide. These will be an additional to any captions that have been added in the player settings for that media.
Bonus – the caption text is also customisable part of the media player, so we can style it however we want in Bricks to match the player style.
If using playlists, these options will all update each time the user selects a new video.
– Video security – making sure nobody can steal the URL
For membership sites, or just for situations where we don’t want people to be able to share outside of where we’re displaying the video, Bunny stream has two useful features.
- Allowed domains – A simple option to whitelist which domains are allowed to accept the video playback. This’ll stop people copying the video URL for sharing & hot linking.
- CDN token authentication – This option will add an expiry time to the video URL, so then it can’t be used after a set time.
For the CDN token authentication, there’s an option in the media player to enable this and to choose an expiry time. This expiry time means we can then be confident that the user can’t watch the content or share the content at a later date – only when we’re allowing them access to that content through our site.
This ideal for membership sites where we want the membership conditions & user capabilities to control when users can access certain video content. The URL is then obfuscated by being signed. Users can’t get the original video URL by just looking at the source code. If we lock them out of that page (via our membership settings) then there’s no way for them to get access even if they copied the URL.
Other HLS providers
Of course, the Media Player element works with any provider that offers HLS links – Cloudflare Stream, Mux, Vimeo (on their standard plan), to name a few. But for the reasons above and overall lower cost, Bunny Stream is what we currently recommend to cover most typical website video hosting needs.