Design, Code, Adventure

Hello! I'm sorry this sad, unformatted blog post is all you find when you search for, "hsVideoAPI" - I spent a little bit too long looking for information about hsVideoApi when I needed to build an auto-playing video modal, so I tried to pull together all of the resources I found into this post to make life a little easier.

Here's a post on the HubSpot community forum requesting documentation for this tool. Please go upvote it! 

Update December 12th, 2023:

It looks like HubSpot's refactored this code without providing any documentation, and the ability to post a message to a player appears to be modified/removed. 

On the plus side,

hsVideoApi.getPlayer('- video id here -');

appears to return the video instance now, so when they give us back the ability to play a video on modal open, you don't need to select your video form the getPlayers array.

---

Here's an attempt to dissect the source code for this new API, as of January 29th, 2022:

HubSpot's new video embeds load the thumb in the page, then hide it in favor of an iFrame containing the thumbnail, video and their new video analytics. To play/pause the video, you can use hsVideoApi to manipulate the iframe. 

Some guidelines that may or may not be valid:

1. Use Window.onLoad vs document.addEventListener('DOMContentLoaded')
2. HubSpot automagically pauses other videos when you play a video

Functions that appear to be built in to hsVideoApi:

getPlayer: ƒ w(e)
getPlayers: ()=>Le(v())
pauseAllPlayers: ƒ _()
registerPlayer: ƒ d(...e)
renderPlayer: ƒ m(e,t)
updatePlayer: ƒ g(e,t)


As far as I can tell, getPlayer() doesn't do anything useful yet - I would guess that HubSpot will eventually allow you to do something like, hsVideoApi.getPlayer(''); but it doesn't look like that functionality is enabled yet. 

Get a video with a particular parent element:

var allVideoPlayers = window.hsVideoApi.getPlayers();

function returnVideoUsingParent ( allVideos, parentClassString ) {
  let video
  allVideos.forEach((el) => {
    if (el.iframeEl.closest(parentClassString) != null) {
      video = el
    }
  })
  return video
}

returnVideoUsingParent(allVideoPlayers, "[PUT YOUR PARENT CLASS HERE]")

Play a video:

 

function playVideo ( video ) {
  video.postMessageToPlayer("SET_PLAYER_STATUS", {
    status: "PLAYING"
  })
}


 

Pause a video:

function pauseVideo ( video ) {
  video.postMessageToPlayer("SET_PLAYER_STATUS", {
    status: "PAUSED"
  })
}

Give Stuart some love on the dev slack for figuring this out for us