!! DEPRECATION WARNING !!
If you are here, you are viewing the deprecated API documention. You will automatically be directed to the New Bolt Player API Documentation momentarily, or you can click HERE. to be redirected.
Getting Started With Bolt Player
Playwire offers three different ways of embedding the Bolt Player. Most users will find that the Basic Embed is sufficient for their needs, but if you are a developer wanting to load the Player on a page dynamically, you may be interested in our Lazy Loading option. Additionally, if you are planning to use the Bolt Player API, please check out the Callbacks section below for important information about how to execute functions once the Player is fully loaded on the page
Basic Embed
The basic embed requires only the single line of code provided to you on the Playwire site when you view one of your videos. This code should be placed at exactly the point on the page where you want your video to show. Please note: unlike other video players you may have used in the past, the code should not be placed in the HEAD of your page! Instead, place it in the BODY at the point where the video should be displayed. The embed also will not work unless hosted on a web server or local dev environment.
<!-- Basic Embed -->
<script data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json" data-height="100%" data-width="100%" src="//cdn.playwire.com/bolt/js/zeus/embed.js" type="text/javascript"></script>
Lazy Loading
Sometimes you may not want the Player to be present on your page at the moment the page loads. For situations like this, you will want to use Lazy Loading instead.
At the point where you want the Player to load, use the Basic Embed code, but include this additional attribute: data-autoload="false". Additionally, make sure to specify a data-container attribute; this will let the Player know into what container it should be loaded when you choose to load it. Then execute the “renderPlayer()” code in the example to actually load the Player.
At the point where you want the Player to load, use the Basic Embed code, but include this additional attribute: data-autoload="false". Additionally, make sure to specify a data-container attribute; this will let the Player know into what container it should be loaded when you choose to load it. Then execute the “renderPlayer()” code in the example to actually load the Player.
<!-- Lazy load embed with data-autoload set to "false" and data-container with the id of "myPlayer" -->
<script data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json" data-height="100%" data-width="100%" src="//cdn.playwire.com/bolt/js/zeus/embed.js" data-autoload="false" data-container="myPlayer"></script>
<!-- When the Bolt Video Player with the ID of "myPlayer" renders, log "The player is loaded" to the console -->
<script type="text/javascript">
Bolt.renderPlayer("myPlayer", function() {
console.log("The player is loaded!");
});
</script>
Callbacks
If you are interested in using the Bolt Player API, you will likely want to take advantage of the data-onready attribute. data-onready allows you to specify the name of a function you want to be executed as soon as the Bolt Player is fully loaded on the page. This is a good way to ensure that you do not try to execute Bolt functions before they are available for use.
<!-- Callback embed with data-container set to id of "myPlayer" and data-onready calling the myApp.init function -->
<script data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json" data-height="100%" data-width="100%" src="//cdn.playwire.com/bolt/js/zeus/embed.js" data-container="myPlayer" data-onready="myApp.init"></script>
<!-- When the Bolt Video Player with the ID of "myPlayer", log "The player is loaded" to the console when the video content ends-->
<script type="text/javascript">
var myApp = {
init: function(){
Bolt.on('myPlayer', Bolt.BOLT_CONTENT_COMPLETE, function(){
console.log('Content Complete');
})
}
}
</script>