HubSpot Ideas

JamesW42

Add API for Hubspot Video

I'd like to suggest that you provide developers with an API for controlling Hubspots iframe videos with Javascript.

From what I gather, it was previously possible because Hubspot was using Vidyard.

Here is a post from March 2022 explaining the problem in more detail:

https://community.hubspot.com/t5/CMS-Development/New-Video-and-Vidyard-Update-Window-obj-iframe/m-p/...

5 Comentarios
adriansfdev
Participante

Any new update for this? 

seanmart
Miembro

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: 

 

hsPlayer.postMessageToPlayer("SET_PLAYER_STATUS", {status: "PLAYING"})


and... NOTHING HAPPENS! in fact I've been messing with this for hours and this postMessageToPlayer function has never worked once.

 

Hubspot, RESPOND!





PMann1
Miembro

These commands work... but ONLY when the video has started playing. They do not work if the thumbnail is still visible (!).

 

hsPlayer.postMessageToPlayer("SET_PLAYER_STATUS", {status: "PLAYING"});
hsPlayer.triggerPause();

 

We tried creating our own video module.

 

In this video module, we:

 

  1. Used hubl to render a video with autoplay=True (to get around the thumbnail issue)
  2. Used JS to immediate pause the video
  3. Added the thumbnail and play button ourselves

... and then discovered the video is always muted if you have autoplay on.

 

The only solution seems to be to use a different video host.

amcintosh
Colaborador

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?

amcintosh_0-1702357313400.png
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.

amcintosh_1-1702361670334.png

 

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. 

adriansfdev
Participante

@amcintosh Can you control the play and pause of the video to send the data to GA?