Supported Parameters

The config object passed into the embed code supports the following paramters

Parameter

Required

Description

String object_id

Yes

ID of the video or playlist you wish to embed

String element_id

No

ID of the element you want to embed the video into. Defaults to buto_<object_id>

String width

No

The width in px if you wish to force the player dimensions

String height

No

The height in px if you wish to force the player dimensions. Can only be used when width has also been specified

String token

No

A valid token to play this video, if token security is enabled

External controls

Sometimes it is useful to have some external controls for the player. Consider the following example you have an external play and pause button and also a dropdown that you can use to select which video to load.

As a bonus the video title and description are also shown via the schedule object.

<script>
var player;
var element = document.getElementById('buto_timed_events_demo');
//listen for playerReady event
element.addEventListener('playerReady', function(e){
//get reference to player
var player = Akita.playerInstances[this.getAttribute('data-instance-id')];
//object containing the timecode (in seconds) we are interested in and a callback
var callbacks = {
5: function(){
alert('This is Brian!');
},
10: function(){
alert('He works for BigTech Consulting');
}
};
//contains the timecode of the last callback fired so we dont fire the callback multiple times
var lastCallbackFired;
//listen for timeupdate event
player.eventEmitter.on('timeupdate', function(e){
var currentTime = parseInt(e.data.event.target.currentTime);
for(var timecode in callbacks){
//check if the currentTime is one we are interested in if not return early
if(parseInt(timecode) !== currentTime){
continue;
}
//check to see if we have already fired this callback as we recieve multiple timeupdate events per second
if(parseInt(timecode) === lastCallbackFired){
continue;
}
//update var with timecode of the callback we are firing
lastCallbackFired = parseInt(timecode);
//fire callback
callbacks[timecode]();
}
});
});
</script>

Custom embed aspect ratio

It can be useful to embed a video at a different aspect ratio to the source aspect ratio.

NBdisable_chrome will take precedence over the player settings assigned to a video.
For example, assigning a player setting to a video which has 'Show player controls' enabled will always display player controls unless the disable_chrome:true property/value has been set in the embed code, in which case the player controls will be disabled.

Customising Buto Interactive

It can be desirable to tweak the fonts and colours used for Buto Interactive popups. This can be done using CSS.

Demo

The popup comment at 00:04 has been changed to a Serif font and the colour changed to red.