Bolt API Documentation - Playwire Support Playwire Support

Getting Started With Bolt Player

Playwire offers three different ways of embedding the Bolt Video 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. You can find the embed code your video, when viewing your video in the Playwire backend. Click the copy button in the embed section to copy your embed code.

Where can I find my embed code? Refer to this support article for more help embedding your videos.

!! 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. Embed code will not work without a web server or local server environment such as MAMP or XAMPP. Additionally, <!doctype> must be declared at the top of your HTML document or you may encounter errors in Internet Explorer.

Paste this code in the <body> of your HTML document that you want the video player to appear.


			<!-- Basic embed example -->
			<script
				data-config="https://support.playwire.com/configs/config_non_ad_video.json"
				data-height="100%"
				data-width="100%"
				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
				type="text/javascript">
			</script>
			<!-- / Basic embed example -->

View Demo Download Demos

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.

Paste this code in the <body> of your HTML document that you want the video player to appear.


			<!-- Lazy load embed example with data-autoload="false", data-id="myPlayer" -->
			<script
				data-config="https://support.playwire.com/configs/config_spotx.json"
				data-height="100%"
				data-width="100%"
				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
				data-autoload="false"
				data-id="myPlayer"
				type="text/javascript">
			</script>
			<!-- / Lazy load embed example -->

Paste this code in a <script> tag on the same page or in a linked JavaScript file.



			// All console.log() messages are only for demo purposes
			// you can remove when using on your site

			var timer = window.setInterval(checkForBolt, 100);

			function checkForBolt(){

				console.log('%cChecking for Bolt object', 'background: yellow;');

				if( typeof Bolt !== 'undefined'){
				  window.clearInterval(timer); // clear interval timer
				  console.log('%cBolt Player Object Ready', 'background: green;');
				  Bolt.renderPlayer("myPlayer"); // Rendering Player with data-id of myPlayer
				  console.log('%cBolt Player Rendered', 'background: green;');
				}

			}

View Demo Download Demos

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. In this demo, after the player is fully loaded, the myPlayerLoaded.init method will be called which will wait for the Bolt.BOLT_CONTENT_STARTED event to fire, effectively creating a link.

Paste this code in the <body> of your HTML document that you want the video player to appear.


			<!-- Callback embed example with data-id="myPlayer" and data-onready="myPlayerLoaded.init" -->
			<script
				data-config="https://support.playwire.com/configs/config_spotx.json"
				data-height="100%"
				data-width="100%"
				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
				data-id="myPlayer"
				data-onready="myPlayerLoaded.init"
				type="text/javascript">
			</script>
			<!-- / Callback embed example -->

Paste this code in a <script> tag on the same page or in a linked JavaScript file.



			// when player with data-id of "myPlayer" is fully loaded
			// call the myPlayerLoaded.init function and create a link

			var myPlayerLoaded = {

				init : function(){

					Bolt.on( 'myPlayer', Bolt.BOLT_CONTENT_STARTED, function(){

						var link       = document.createElement( "a" );
						var linkText   = document.createTextNode( "Click Here" );

						link.title     = "My Link";
						link.href      = "http://www.playwire.com";
						link.target    = "_blank"
						link.className = "link-style";

						link.appendChild( linkText );
						document.getElementById( "message" ).appendChild( link );

						console.log( 'Content Started' );

					});

				}
			}

View Demo Download Demos

Bolt.resizeVideo( player_id , width, height )

Description: Resizes the video player to a specified dimension.

Parameters

player_id Type: String
Description: A string matching the data-id attribute of the player embed code. width Type: String
Description: A string representation of the desired width of the player. Can be set in pixels or percentages. If pixels, dimension must be followed by 'px' i.e. '640px' If percentage dimension must be followed by '%' i.e. '50%' height Type: String
Description: A string representation of the desired height of the player. Can be set in pixels or percentages. If pixels, dimension must be followed by 'px' i.e. '640px' If percentage dimension must be followed by '%' i.e. '50%'

Usage

There may be times when you want to set the size of the video player to specific dimensions. Using the resizeVideo() method, the code snippet below resizes the video player with the data-id of myPlayer to a width of 480px and a height of 270px.


				Bolt.resizeVideo( 'myPlayer', '480px', '270px' );

Code Example

In this demo, the user can select a new player size from the dropdown. After selecting the new player size, the new player size will be risized using resizeVideo() method by passing the values of the dropdowns to the method.



			<!-- dropdown size selector -->
			<div class="form" style="margin: 25px 0;width: 360px;">
				<form role="form">
					<select class="form-control change-size" style="width: 360px;color: #000;">
						<option disabled="" selected="">Change the player size</option>
						<option data-width="480px" data-height="270px">480x270</option>
						<option data-width="640px" data-height="360px">640x360</option>
						<option data-width="853px" data-height="480px">853x480</option>
					</select>
				</form>
			</div>
			<!-- /dropdown size selector -->

			<!-- resizeVideo() example -->
			<script
				data-config="//config.playwire.com/1/videos/v2/4322636/zeus.json"
				data-height="100%"
				data-width="100%"
				data-id="myPlayer"
				src="//cdn.playwire.com/bolt/js/zeus/embed.js"
				type="text/javascript">
			</script>
			<!-- /resizeVideo() example -->



			 jQuery( document ).on( 'change', '.change-size', function(){
			      changeWidth = jQuery( this ).find( 'option:selected').attr( 'data-width' );
			      changeHeight = jQuery( this ).find( 'option:selected').attr( 'data-height' );
			      Bolt.resizeVideo( 'myPlayer', changeWidth, changeHeight );
			 });

Code Demo

Use the dropdown to change the size of the player

Attribute	Description
data-ad-tag	Default ad tag that can be used for all cases: desktop, HTML5 and mobile devices.
data-desktop-ad-tag	If Flash is supported by the desktop device, this ad tag will be used.
data-html5-ad-tag	If Flash is not supported by the desktop device, this ad tag will be used.
data-mobile-ad-tag	If the the user is using a mobile device, this ad tag will be used.

Getting Started With Bolt Player

Basic Embed

Lazy Loading

Callbacks

Bolt.resizeVideo( player_id , width, height )

Parameters

Usage

Code Example

Code Demo

Bolt.setFullscreen( player_id , boolean )

Parameters

Usage

Code Example

Code Demo

Bolt.seek( player_id , time )

Parameters

Usage

Code Example

Code Demo

Bolt.muteMedia( player_id )

Parameters

Usage

Code Example

Code Demo

Bolt.unmuteMedia( player_id )

Parameters

Usage

Code Example

Code Demo

Bolt.setVolume( player_id, volume )

Parameters

Usage

Code Example

Code Demo

Bolt.replayMedia( player_id )

Parameters

Usage

Code Example

Code Demo

Bolt.stopMedia( player_id )

Parameters

Usage

Code Example

Code Demo

Bolt.pauseMedia( player_id )

Parameters

Usage

Code Example

Code Demo

Bolt.playMedia( player_id )

Parameters

Usage

Code Example

Code Demo

Bolt.removeVideo( player_id , boolean )

Parameters

Usage

Code Example

Code Demo

Bolt.renderPlayer( player_id )

Parameters

Usage

Code Example

Code Demo

Bolt.BOLT_AD_REQUEST_START

Usage

Code Example

Code Demo

Bolt.BOLT_AD_STARTED

Usage

Code Example

Code Demo

Bolt.BOLT_AD_ERROR

Usage

Code Example

Code Demo

Bolt.BOLT_AD_CLICKED

Usage

Code Example

Code Demo