Controlling HubSpot Video with JavaScript

[gafimiv406]

To check the answer first, HubSpot Video hsVideoApican be operated using .

fig04


hsVideoApi.getPlayer()First, use a function to get the player instance that manages the video .
The first argument requires the video embed ID, so data.embedidenter the one obtained in the MessageEvent mentioned above.

window.addEventListener('message', function(e){
if (e.data.type !== 'PLAYER_READY') return;
const player = window.hsVideoApi.getPlayer(e.data.embedId);
if (!player) return;

console.log(player);
});
JavaScript

console.log(player)The bahamas number data contents are as follows:

fig05


Now we have a player instance.

Then use Prototypethe object's functions to control the player .postMessageToPlayer()


For example, if you want to stop the video using a separate video stop button, it would look like this:

window.addEventListener('message', function(e){
if (e.data.type !== 'PLAYER_READY') return;
const player = window.hsVideoApi.getPlayer(e.data.embedId);
if (!player) return;

// 動画停止ボタンの作成
var buttonEl = document.createElement('button');
buttonEl.textContent = '動画再生';
buttonEl.style.position = 'fixed';
buttonEl.style.top = '0';
buttonEl.style.width = '100%';
buttonEl.style.height = '50px';
buttonEl.style.background = '#E55';
buttonEl.style.cursor = 'pointer';

// 動画再生ボタンにイベントを追加
buttonEl.addEventListener('click', function(){
// 動画プレイヤーに再生を指示
player.postMessageToPlayer('SET_PLAYER_STATUS', {status: 'PLAYING'});
});

// 動画再生ボタンを画面に表示
document.getElementsByTagName('body')[0].appendChild(buttonEl);
});
JavaScript

When you reload the page, a [Play Video] button will appear at the top of the screen.
Did the video play when you pressed the button?

postMessageToPlayer()Looking at the source code, there are several values ​​available to set as the second argument of , but it seems that only and can be set, statusas mentioned above .PLAYINGPAUSED

The source code is

Conclusion
We have prepared the following video for testing.
You can control the player by pressing the [Play] or [Stop] button.

reproduction stop


Using this method, you can implement the "Auto-play when the video area enters the screen" function.
Please note that due to HTML5 restrictions, the audio must be set to [Mute] by default.

video_playerIf you are using the Hubl tag , make sure mutedto Trueset the property.

{% video_player 'embed_player'
muted=True,
autoplay=False,
player_id='xxx',
type='hsvideo2',
overrideable=False, hide_playlist=True, viral_sharing=False,
embed_button=False, hidden_controls=False, full_width=False,
loop=False,
width='1280', height='720' %}
HTML + HubL

This might be a bit nerdy, but I hope it helps if you want to control HubSp