Examples

Examples 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

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

PlayPauseLoad

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

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>