So frustrated with this video player as a developer.
All I want to do is have a video in a modal that is triggered by a button that says 'view video'. The user would click, the overlay would fade on over the page and the video would start. when the user clicks again the overplay closes and the video stops.
I wrote all the pieces, and added the video. Did a test without autoplay first, obviously when I closed the modal the video kept playing of course. So thats when I do a simple search 'hubspot video player js api' - NO RESULTS (oh god this is going to be a nightmare).
I go to the hubspot slack board and search the same. Results are from the past few years and some clearly have solutions for a previous version of the player that are no longer relevant.
I do see one thing though that looks a little promising:
window.addEventListener('message', function(e){
if(e.data.videoId) {
const stop = document.querySelector('.js-stop');
const watch = document.querySelector('.js-watchButton');
watch.addEventListener('click', openModal);
stop.addEventListener('click', pauseMedia);
let hsPlayers = hsVideoApi.getPlayers();
let hsPlayer = hsPlayers[0];
function pauseMedia() {
hsPlayer.triggerPause();
}
function openModal() {
hsPlayer.postMessageToPlayer("SET_PLAYER_STATUS", {status: "PLAYING"})
}
}
});
Its a pretty crappy way to handle it, but at this point I'm just like 'fine whatever'. So I try to replicate this, but run into a problem immediately. Because the overlay is set to 'display:none' the player never actually inits until it becomes visible. So that means I can't add the click eventlisteners for the 'view video' button inside the message event listener, because unless the button is clicked, the overlay is never visible.
I move the click event outside and run into the next problem. My click event runs before the 'hsPlayer' is ready. I do a few more tests with setTimeout (which is obviously a big no-no, but I just wanted to see). I'm console logging to check the value of hsPlayer and I finally get it to be available. I then send the message:
The PostMessage method definitely used to work - I had it implemented for several popups I wanted to autoplay across our website and you can see some of the early conversation around it confirmed functionality in 2022 https://hubspotdev.slack.com/archives/CBA9UA4EN/p1663339602703359
I think that they've changed how the video API functions since then? I poked around in the source code a bit and definitely looked different. The live code also definitely has comments on what things will eventually look like, which makes me think things are still in development?
On the plus side, getPlayer() now works with the video id, so you can use,
let videoWrapper = modal.querySelector('.hs-video-widget')
let videoId = videoWrapper.dataset.hsvEmbedId
let video = window.hsVideoApi.getPlayer(videoId)
now instead of some convoluted logic for multiple players, or
let hsPlayer = hsPlayers[0];
for just one.
I also spent a lot of time trying to figure out how to get our videos to continue to autoplay on modal open. Seems like maybe there's something sticky with the player message queing? Ironically, this "triggerPause()" function seems to work without issue.
It seems absolutely asinine that there would be an obvious, easy-to-use "pause" and not an easy-to-use "play" for this video tool.
