Examples
Friday, August 4, 2017 9:15 AMExamples using the player API to perform common tasks
Embed code
This is an example of an embed code for the video 12345
.
<div class="video" id="buto_12345"></div>
<script>
(function(d, config) {
var script = d.createElement("script");
script.setAttribute("async", true);
var data = JSON.stringify(config);
script.src = "//js.buto.tv/video/" + data;
var s = d.getElementsByTagName("script")[0];
s.parentNode.insertBefore(script, s)
})(document, {"object_id":"12345", "width":"500px"})
</script>
For a playlist please ensure that the line script.src = "//js.buto.tv/video/" + data;
is changed to script.src = "//js.buto.tv/playlist/" + data;
To get a reference to the player all you need is the element id. In this case it is buto_12345
var player;
var element = document.getElementById('buto_12345');
element.addEventListener('playerReady', function(e){
player = Akita.playerInstances[this.getAttribute('data-instance-id')];
});
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.
Demo
Code
<div class="video" id="buto_external_controls_demo"></div>
<script>
(function(d, config) {
var script = d.createElement("script");
script.setAttribute("async", true);
var data = JSON.stringify(config);
script.src = "//js.buto.tv/playlist/" + data + "/akita";
var s = d.getElementsByTagName("script")[0];
s.parentNode.insertBefore(script, s)
})(document, {"object_id":"t8YHQ", "element_id": "buto_external_controls_demo", "width":"500px"})
</script>
<button id="play_btn">Play</button><button id="pause_btn">Pause</button><select id="load_index"></select><button id="load_btn">Load</button>
<h5><strong><span id="buto_external_controls_demo_title"></span></strong></h5>
<p id="buto_external_controls_demo_description"></p>
<script>
var demoPlayer;
var demoElement = document.getElementById("buto_external_controls_demo");
demoElement.addEventListener("playerReady", function(){
demoPlayer = Akita.playerInstances[this.getAttribute("data-instance-id")];
//populate dropdown
var dropdown = document.getElementById("load_index");
for(var i=0;i<demoPlayer.schedule.length;i++){
//create an option tag
var option = document.createElement("option");
//set the value to the index in the schedule
option.value = i;
//set the title as the value seen in the dropdown
option.innerHTML = demoPlayer.schedule[i].title;
//add the option to the select dropdown
dropdown.appendChild(option);
}
//add event listener to play button
document.getElementById('play_btn').addEventListener('click', function(){
if(demoPlayer){
demoPlayer.play();
}
});
//add event listener to pause button
document.getElementById('pause_btn').addEventListener('click', function(){
if(demoPlayer){
demoPlayer.pause();
}
});
//add event listener to load button
document.getElementById('load_btn').addEventListener('click', function(){
//get the index value from the selected dropdown
var index = document.getElementById('load_index').options[document.getElementById('load_index').selectedIndex].value;
if(demoPlayer){
demoPlayer.load(parseInt(index));
}
});
//add event listener to player so we can update the description accordingly
demoPlayer.eventEmitter.on("loadVideo", function(e){
document.getElementById("buto_external_controls_demo_title").innerHTML = demoPlayer.currentScheduleItem.title;
document.getElementById("buto_external_controls_demo_description").innerHTML = demoPlayer.currentScheduleItem.description;
});
document.getElementById("buto_external_controls_demo_title").innerHTML = demoPlayer.currentScheduleItem.title;
document.getElementById("buto_external_controls_demo_description").innerHTML = demoPlayer.currentScheduleItem.description;
});
</script>
Overlays
Overlays can be used to share information about the content, or as a call to action. Sometimes you want more functionality than simply opening another page.
You can use the player API to listen for when an overlay is clicked and trigger one of your own methods. This can be used for example to add a product on the screen to your shopping basket.
In the example below we are hiding the overlay when it is clicked and showing a panel underneath the video that has related content.
N.B. The overlayId
for a particular overlay is referenced in the video JSON https://api.buto.tv/v2/video/TKx5C under the overlays
property.
Demo
The overlay is shown between 00:17
and 00:28
Brian (Our IT Manager)
- Has a girlfriend
- Doesn't like fantasy gaming or comics
- With it!
Code
<div class="video" id="buto_overlays_demo"></div>
<script>
(function(d, config) {
var script = d.createElement("script");
script.setAttribute("async", true);
var data = JSON.stringify(config);
script.src = "//js.buto.tv/video/" + data + "/akita";
var s = d.getElementsByTagName("script")[0];
s.parentNode.insertBefore(script, s)
})(document, {"object_id":"TKx5C", "element_id": "buto_overlays_demo", "width":"500px"})
</script>
<div id="buto_overlays_demo_info" class="hide">
<p>Brian (Our IT Manager)</p>
<ul>
<li>Has a girlfriend</li>
<li>Doesn't like fantasy gaming or comics</li>
<li>With it!</li>
</ul>
</div>
<script>
var player;
var element = document.getElementById('buto_overlays_demo');
var infoElement = document.getElementById('buto_overlays_demo_info');
var showPanel = function(){
//show the info panel
infoElement.classList.remove('hide');
//hide the overlay
player.eventEmitter.emit('hideOverlay', {
data: {
overlayId: overlayId
}
});
}.bind(this);
//listen for playerReady event
element.addEventListener('playerReady', function(e){
//get reference to player
var player = Akita.playerInstances[this.getAttribute('data-instance-id')];
//listen for overlayClicked event
player.eventEmitter.on('overlayClicked', function(e){
var overlayId = e.data.overlayId;
var overlay = player.overlays.availableOverlays[overlayId];
switch(overlayId){
case 'iajjSGF':
showPanel();
break;
}
});
});
</script>
Time based events
It can be useful to trigger callbacks at specific time codes during a video. This simple demo shows how you can trigger a custom function at a specific timecode.
Demo
You should see an alert box triggered at 00:05
and another at 00:10
Code
<div class="video" id="buto_timed_events_demo"></div>
<script>
(function(d, config) {
var script = d.createElement("script");
script.setAttribute("async", true);
var data = JSON.stringify(config);
script.src = "//js.buto.tv/video/" + data + "/akita";
var s = d.getElementsByTagName("script")[0];
s.parentNode.insertBefore(script, s)
})(document, {"object_id":"qmJnV", "element_id": "buto_timed_events_demo", "width":"500px"})
</script>
<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.
Demo
The following player embeds a 4:3 video at a 16:9 aspect ratio
Code
<div class="wrapper">
<div id="buto_F94kC"></div>
<script>
(function(d, config) {
var script = d.createElement("script");
script.setAttribute("async", true);
var data = JSON.stringify(config);
script.src = "//js.buto.tv/video/" + encodeURIComponent(data);
var s = d.getElementsByTagName("script")[0];
s.parentNode.insertBefore(script, s)
})(document, {
"object_id": "F94kC",
"width": "100%",
"height": "100%"
})
</script>
</div>
<style>
.wrapper {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.wrapper .base-akita-container {
position: absolute;
}
</style>
Remove Buto play icon
Some users may wish to remove the default play icon used in our player and replace it with their own
Demo
Code
<div class='buto_no_play_icon_container'>
<div id="buto_lfn7k"></div>
<script>
(function(d,config){
var script=d.createElement("script");
script.setAttribute("async",true);
var data=JSON.stringify(config);
script.src="//js.buto.tv/video/"+data;
var s=d.getElementsByTagName("script")[0];
s.parentNode.insertBefore(script,s)
})(document,{"object_id":"lfn7k"})
</script>
</div>
<style>
.buto_no_play_icon_container .akita-player .base-play-btn {
display: none;
}
</style>
Add custom play icon
It can be useful to display a custom play icon in the centre of the player, instead of the default provided by Buto.
Demo
You should see a red play icon displayed in the centre of the player
Code
<div class='buto_play_icon_container'>
<div id="buto_cmpgx"></div>
<script>
(function(d,config){
var script=d.createElement("script");
script.setAttribute("async",true);
var data=JSON.stringify(config);
script.src="//js.buto.tv/video/"+data;
var s=d.getElementsByTagName("script")[0];
s.parentNode.insertBefore(script,s)
})(document,{"object_id":"cmpgx"})
</script>
<a id="buto_custom_icon">
<svg viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg"><path d="M1576 927l-1328 738q-23 13-39.5 3t-16.5-36v-1472q0-26 16.5-36t39.5 3l1328 738q23 13 23 31t-23 31z"/></svg>
</a>
</div>
<style>
.buto_play_icon_container .akita-player .base-play-btn {
display: none;
}
.buto_play_icon_container{
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
background: #3A3A3A;
border: 1px solid #555;
display: block;
}
#buto_custom_icon{
position: absolute;
width: 70px;
z-index: 120;
left: 5px;
right: 0;
margin: 0 auto;
top: 40%;
cursor: pointer;
display:block;
}
#buto_custom_icon svg{
fill:red;
}
</style>
<script>
var embedElement = document.getElementById('buto_cmpgx');
embedElement.addEventListener('playerReady',function(readyEvent){
var player = Akita.playerInstances[this.getAttribute('data-instance-id')];
var playIcon = document.getElementById('buto_custom_icon');
playIcon.addEventListener('click',function(){
player.play();
});
player.video.el.addEventListener('play',function(){
//hide play icon
var playIcon = document.getElementById('buto_custom_icon');
playIcon.style.display = 'none';
});
player.video.el.addEventListener('pause',function(){
//show play icon
var playIcon = document.getElementById('buto_custom_icon');
playIcon.style.display = 'block';
});
});
</script>
Hide player controls
It can be useful to hide player controls altogether. This is possible by adding a disable_chrome:true
property/value to the embed configuration object.
Demo
The following player should have have no player chrome.
Code
<div id="buto_RsBZx"></div>
<script>
(function(d,config){
var script=d.createElement("script");
script.setAttribute("async",true);
var data=JSON.stringify(config);
script.src="//js.buto.tv/video/"+data;
var s=d.getElementsByTagName("script")[0];
s.parentNode.insertBefore(script,s)
})(document,{"object_id":"RsBZx","disable_chrome":true})
</script>
NB
disable_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.
The Quiz at 00:09
now has a black background and white text
Code
<div id="buto_THrrl"></div>
<script>
(function(d,config){
var script=d.createElement("script");
script.setAttribute("async",true);
var data=JSON.stringify(config);
script.src="//js.buto.tv/video/"+data;
var s=d.getElementsByTagName("script")[0];
s.parentNode.insertBefore(script,s)
})(document,{"object_id":"THrrl"})
</script>
<style type="text/css">
#buto_THrrl .hapyak-annotation-container .popcorn-pop {
font-family: serif;
color: red;
}
#buto_THrrl .hapyak-player .hapyak-quiz-container {
background: black;
color: white;
}
</style>